Pro Speed Guy

Author: prospeedguy@gmail.com

  • Fastest WordPress Hosting Providers in 2026

    Fastest WordPress Hosting Providers in 2026

    On the hunt for the fastest WordPress hosting provider to serve up your WordPress site?

    You’ve probably heard about the importance of making your website load fast. It makes your visitors happier; it helps with SEO…it’s just generally really important.

    And while yeah, there are all kinds of WordPress performance tips you can implement to make your site load faster, your site’s hosting is always going to play one of the biggest roles in how quickly your site loads (especially if you’ve already optimized the other stuff).

    To help you find the fastest WordPress host provider that also matches your budget, we went hands-on with eight popular WordPress hosts and ran real speed tests. The end goal of this post is to help you find a host that can offer you the performance you want, at the price you want.

    You’re probably here for the hard data, so we’ll start by sharing all the data in an easy-to-compare table format.

    Then, we’ll dig into each host in more detail and also share some tips for finding the fastest WordPress hosting for your specific needs.

    The Fastest WordPress Hosting providers: What the Data Says
    If you just want the absolute fastest WordPress hosts based on our testing, here are our three recommendations based on their speed, price, and features (full data and more info below):

    HostStarting PriceLoad Time
    Kinsta$30 per month1.43 s
    WPX Hosting$25 per month1.46 s
    Cloudways$10 per month
    (budget pick)    		1.52 s

    Now let’s dig in!

    To find the fastest WordPress hosting, we set up a real test site at every single one of the hosts on this list. Then, we ran our test sites through a duo of speed testing tools:

    Below the table, we’ll explain what each metric actually means, as well as how we set up our test site:

    HostStarting Price (per month)Load Time (WPT)TTFB (WPT)
    Kinsta $30.001.43 s0.099 s
    WPX Hosting $24.901.46 s0.108 s
    Cloudways $10.001.52 s0.115 s
    Flywheel$15.001.52 s0.057 s
    WP Engine$30.001.54 s0.115 s
    InMotion Hosting$5.991.57 s0.116 s
    DreamHost$16.951.61 s0.250 s
    SiteGround$6.991.80 s0.511 s
    •  Performed in the top two in that category
    • The two cheapest options

    Performance Metrics Explained

    To collect the WebPageTest data, we used a simple desktop test from Chicago, Illinois with a native traffic connection. We collected two metrics:

    • Load Time (Document Complete) – this is what most people think of as a website being “fully loaded”. According to the WebPageTest documentation, it’s “the time from when the user started navigating to the page until the Document Complete event (usually when all of the page content has loaded)”.
    • Time to First Byte – this how long it takes for the first bit from your server to arrive. It shows how responsive a host’s server is.

    We configured WebPageTest to run nine separate tests and take the median value, which should eliminate single-test variance. That is, all of the data in the table above is the median result from nine different tests.

    WebPageTest data is valuable, but it only gives the load times for a single “visitor”. However, in the real world, your site will have more than one visitor at the same time.

    Because of that, it’s important that your host can load your site just as fast for the 50th visitor as it does for the first one.

    That’s where the BlazeMeter data comes in. BlazeMeter simulates 50 “people” visiting your site at the same time. That way, you can see how each host performs under scale.

    Here are the details for our BlazeMeter tests:

    • Test location: Virginia, USA
    • Visitors: 50
    • Duration: 5 minutes
    • Ramp up steps: Visitors increase every minute, starting from zero and building up to 50 active visitors for the last minute.

    We’ll share the BlazeMeter chart for each host below. One thing to keep in mind, however, is that most managed WordPress hosts implement some type of firewall/DDoS protection, so some hosts blocked some of the requests in our test.

    If you see a high error rate in the BlazeMeter charts, this is the result of an overactive firewall, not necessarily poor performance.

    How Our Test Site Was Set Up

    To simulate a real site and create a consistent test case, we used the lightweight Airi theme and one of its importable Elementor demo sites.

    So, our “full” test site includes:

    • The Airi theme as the base
    • A homepage design built with the Elementor page builder

    Here’s the exact Airi demo site that we’re using.

    Fastest WordPress Hosting: Compared in More Detail

    Now that you have a good idea of how each host performs in objective speed tests, let’s take a deeper look at their features as well as Load Impact data to see how they stood up under scale.

    1. Kinsta

    • Plan Tested: Starter
    • Load Time: 1.432 s
    • Time to First Byte: 0.099 s
    • Starting price/mo: $30

    Kinsta is a popular cloud-managed WordPress host that uses the Google Cloud Platform to help you host your WordPress site. Kinsta also layers on its own optimized tech stack with Nginx, server-level caching via Fast_CGI, and other enhancements.

    In addition to offering stellar performance, Kinsta has one of the best looking hosting dashboards out there, as well as lots of convenient features like:

    • Automatic daily backups
    • Easy staging sites
    • Free SSL certificate and one-click install
    • Firewalls/malware scans
    • A free hack-fix guarantee if something gets through

    You also get some nice value-adds, such as the addition of a CDN and premium DNS services at no extra cost.

    Kinsta’s plans start at $30 per month for a single website.

    2. WPX Hosting

    • Plan Tested: Business
    • Load Time: 1.463 s
    • Time to First Byte: 0.108 s
    • Starting price/mo: ~$25

    WPX Hosting is a very interesting option if you need to host multiple WordPress sites. It’s managed WordPress hosting but, unlike most managed WordPress hosts, even the entry-level plan lets you host multiple websites (up to five). It does this for a slightly lower price than competing hosts such as Kinsta and WP Engine.

    As the data shows, though, it doesn’t skimp on performance — WPX Hosting ranked second in our tests and wasn’t far behind Kinsta.

    All of WPX Hosting’s plans come with:

    • Free/one-click SSL certificates
    • A built-in CDN at no extra cost
    • Automatic daily backups
    • Malware scans and free malware removal if anything shows up
    • Staging sites
    • Your choice of three data centers — USA, UK, or Australia

    In terms of prices, WPX Hosting starts at $25 per month for up to five websites. Two things to note about WPX Hosting’s pricing:

    1. They don’t bill you by visitors like many other managed WordPress hosts — you’ll only pay based on your bandwidth and storage.
    2. Staging sites count as full websites for billing purposes. So one production site + one staging site = two websites in terms of your plan limits.

    3. Cloudways

    • Plan Tested: $10 DigitalOcean plan – 1 GB RAM, 1 processor core
    • Load Time: 1.522 s
    • Time to First Byte: 0.115 s
    • Starting price/mo: $10 (depends on cloud provider)

    Cloudways is not a host itself. Instead, it’s a managed hosting service that lets you choose your own cloud VPS provider from a list of options, including:

    • DigitalOcean
    • Vultr
    • Linode
    • Amazon Web Services (AWS)
    • Google Cloud

    No matter which cloud provider you choose, you’ll get an optimized performance stack, a built-in CDN, and useful features such as:

    • One-click staging sites
    • Easy/free SSL certificates
    • One-click WordPress installs
    • Automatic backups

    The one downside is that Cloudways is a little bit more complicated than your average WordPress host. However, it’s certainly still something that a non-developer can handle — I just wouldn’t recommend it if this is your first time launching a WordPress site.

    The big upside is that Cloudways is able to offer exceptional performance for a lower price than all the other top-performing hosts on this list.

    For reference, our test site is using the cheapest DigitalOcean droplet, which costs just $10 per month. Your exact speeds may vary depending on the cloud provider that you choose. However, all the cloud providers offer excellent performance. If you’re really obsessed with speed, you can play around with the newly released Vultr High-Frequency servers.

    One neat thing is that Cloudways offers a 3-day free trial. So if you’re interested, spin up a test site and see how it works for you.

    4. Flywheel

    • Plan Tested: Tiny
    • Load Time: 1.516 s
    • Time to First Byte: 0.057 s
    • Starting price/mo: $15

    Note – Flywheel was acquired by WP Engine in 2019. While this has led to some standardization (e.g. in pricing), the two are still run separately and have a separate infrastructure.

    Flywheel is a popular managed WordPress host that used to target itself mainly creatives, freelancers, and agencies. However, in recent times, they’ve moved towards a more mainstream audience, and anyone can benefit from Flywheel’s hosting services (though if you do build websites for clients, Flywheel still has tons of convenient features for that).

    Like Kinsta, Flywheel uses Google Cloud Platform’s infrastructure to power its plans. Beyond that, they have tons of helpful features like:

    • Staging sites
    • Automatic backups
    • Free SSL certificate
    • Built-in CDN (extra charge on lower-tier plans)
    • 24/7 support

    Flywheel’s plans start at just $15 per month with the Tiny plan, which is the plan we tested. This plan has all the features, but a low traffic limit (just 5,000 visitors). Higher tier plans start at $30 per month. Excluding the Tiny plan, Flywheel’s prices are identical to WP Engine.

    As an upshot of the WP Engine acquisition, all Flywheel customers now also get access to the Genesis Framework and StudioPress child themes at no extra cost.

    5. WP Engine

    • Plan Tested: Startup
    • Load Time: 1.536 s
    • Time to First Byte: 0.115 s
    • Starting price/mo: $30

    WP Engine is one of the most popular managed WordPress hosts out there. All of the WP Engine plans come with staging sites, automatic updates and backups, integrated CDN, and plenty of other helpful tools.

    One neat thing is that WP Engine recently acquired the Genesis Framework and all of StudioPress’ Genesis child themes. These themes are now included at no extra cost as part of every WP Engine plan.

    WP Engine’s plans start at $30 per month and go up from there.

    6. InMotion Hosting

    • Plan Tested: WP-1000S
    • Load Time: 1.572 s
    • Time to First Byte: 0.116 s
    • Starting price/mo: $5.99

    InMotion Hosting is a well-known budget host that’s recently made the jump into managed WordPress hosting with a set of affordable plans.

    Their plans come with automatic WordPress updates, free SSL certificates, and free backups (automatic on all tiers except the cheapest). And on the higher tier plans, you can also get access to the premium tiers of Jetpack at no extra cost, just like DreamPress offers.

    InMotion Hosting didn’t have the best performance in our tests, but its cheapest tier — the WP-1000S plan that we tested — starts at just $5.99 per month with promotional pricing, which still offers good value when you consider the price.

    7. DreamHost

    • Plan Tested: DreamPress
    • Load Time: 1.613 s
    • Time to First Byte: 0.250 s
    • Starting price/mo: ~$17

    DreamHost is one of the oldest web hosts out there, founded all the way back in 1996. DreamPress, the hosting plan we tested, is DreamHost’s managed WordPress offering.

    It comes with daily automatic backups, unmetered bandwidth, and 24/7 support. And on higher-tier plans, you’ll also get a built-in CDN, as well as access to the (normally paid) Jetpack Professional plan at no extra cost.

    With plans starting at just $16.95, DreamPress is a good value option. However, you’ll need at least the $24.95 DreamPress Plus plan if you want Jetpack Professional and the included CDN.

    8. SiteGround

    • Plan Tested: GrowBig
    • Load Time: 1.799 s
    • Time to First Byte: 0.511 s
    • Starting price/mo: $6.99

    SiteGround is a popular WordPress host that manages to combine pretty fast page load times, some managed WordPress features, and great support into one surprisingly low-priced package.

    If you’re on a budget and want the best bang for your buck, SiteGround is one of your better options (though I’d still rank it behind Cloudways).

    While the prices are comparatively low, you still get access to:

    • The latest technologies, including PHP 7.4+
    • Automatic WordPress updates
    • Staging sites (excluding the entry-level plan)
    • A custom hosting dashboard
    • Great support

    SiteGround’s plans start for as little as $6.99 per month, though we tested the $9.99 per month GrowBig plan. However, make sure to pay attention to the differences between promotional prices and regular prices, as the difference can be large. If you want to use SiteGround, we recommend trying to lock in three years of promotional prices. While it will cost you more upfront, it will save you a lot of money in the long run.

    Tips to Choose the Fastest WordPress Hosting For Your Site

    When you’re trying to choose the best hosting for your specific needs, here are some things to consider:

    • Data center locations – while a CDN can mitigate this issue, you still want to find a host that offers data centers near your target readers.
    • Think about your traffic – if your site is relatively low traffic, you might be fine with one of the budget options. However, for high-traffic sites, you want to make sure your chosen host did great in the Load Impact test. You’ll see that the higher-priced hosts usually differentiate themselves when performing under scale.
    • Price – finding the fastest WordPress hosting company isn’t just about the overall winner. It’s about finding the best option that fits your budget. Paying an extra $30 per month just to save a couple fractions of a second might not be worth it for you, especially if your site doesn’t get a lot of traffic.

    Which Host Should You Choose?

    Again, there’s no single winner here — it really depends on your needs.

    However, as we indicated at the beginning, Kinsta and WPX Hosting had the best overall performance. Of the two, Kinsta stood out, but WPX Hosting will be much cheaper if you need to host multiple websites.

    If you’re looking for something more on the budget end and you aren’t a super technical user, SiteGround is a great entry-level option that will still get you pretty good performance without breaking the bank, especially if you need to host multiple sites. If you just need to host a single website, InMotion Hosting is also a solid option.

    Finally, if you’re a little more technical, Cloudways can be a great choice because you’ll get surprisingly good performance for as little as $10 per month. I recommend the entry-level DigitalOcean box if you want the cheapest option. Or, if you’re willing to pay a few dollars more, check out the new Vultr HF servers (high frequency).

  • WordPress Plugin and Cloudflare Worker

    WordPress Plugin and Cloudflare Worker

    In order to create great User Experience (UX), websites should always load fast. I mean immediately! It’s really tough to achieve instant results. AMP is one of the ways Google is trying to speed up the entire internet. But there’re simply so many steps we need to achieve in order to achieve speed. For every web design projects, loading speed is one of the top priorities for Krome.

    We’ve always been crazy about pushing every single byte out of the way so that our sites can be loaded at lightning speed. Cloudflare is probably one of the coolest tools you can use to push up the speed limits.

    One of the most annoying speed optimisations is Time to First Byte (TTFB). It’s really hard to reduce such stuffs. So, one of the ways is to use Cloudflare’s Worker. 

    For some of us, though it might sound good, it doesn’t make much sense until we see a practical example.

    Time needed: 15 minutes.

    Here are some simple steps to get it setup fast

    1. Install Cloudflare Page Cache WordPress Plugin
    2. Go to Cloudflare > WorkersClick ‘Launch Editor’

    3. Click ‘Add Script’

    4. Give a name

    (any name)

    5. Click ‘Edit’

    6. Delete all existing code

    7. Add ‘Route’

    Copy codes from https://raw.githubusercontent.com/cloudflare/worker-examples/master/examples/edge-cache-html/edge-cache-html.js

    Paste Workers codes

    Edit codes with your Cloudflare credentials

    email: “”, // From https://dash.cloudflare.com/profile
    key: “”,   // Global API Key from https://dash.cloudflare.com/profile
    zone: “”   // “Zone ID” from the API section of the dashboard overview page https://dash.cloudflare.com/

    8. Add ‘Route’

    9. Create Route

    Enter your website URL. I used an * (also known as wildcard) so that it applies to all my webpages.

    Click on the dropdown and select your script

    10. Click ‘Save’

    All Done!

  • How To Reduce Server Response Time Waiting (TTFB)

    How To Reduce Server Response Time Waiting (TTFB)

    To be blunt, most articles on the web written about reducing waiting TTFB are complete garbage and written by content writers who have no technical or speed optimization experience and are simply parroting what everyone else says online.

    In this article, we’ll share the troubleshooting steps and recommendations we’ve created after optimizing 100’s of WordPress sites.

    What is TTFB?

    TTFB stands for time to first byte. To put it simply, this is a measurement of how long the browser has to wait before receiving its first byte of data from the server. The longer it takes to get that data, the longer it takes to display your page. A common misconception is that this is calculated after DNS lookup times, however, the original calculation of waiting TTFB in networking always includes network latency. This involves a 3-step process and delays and latency can occur anywhere in between, adding up to your total TTFB.

    Reduce server response time waiting (TTFB)

    Another demo from Lighthouse Audit, the Opportunities section of your Lighthouse report reports Time to First Byte, the time that it takes for a user’s browser to receive the first byte of page content:

    What Is Server Response Time?

    Server response time is a broad measure of how responsive a server is. It represents the period between the user’s request and the first byte that the web browser receives from the server (time to the first byte).

    Most blogs and web articles state that TTFB doesn’t really matter, but it does. Lower server response time improves website performance and therefore allows for a better user experience. Lower TTFB is always better.

    What Is a Good TTFB?

    Server response time highly depends on geography – for a WordPress site, we expect to see a good TTFB sit in the 0.1-0.2 second range for visitors in the country or continent the site is hosted in and 0.2-0.5 seconds internationally.

    Google guidelines note that anything in the 200-600 ms range means good TTFB, but honestly, if it’s higher than 500 ms that indicates there’s some work to do.

    How To Reduce TTFB or Server Response Time Step by Step Guide

    1. Use Fast DNS Hosting

    The speed and quality of your DNS hosting have a huge impact on your TTFB. Fast DNS hosting can help you reduce server response times. 

    We typically recommend Cloudflare as your DNS host. Cloudflare is usually one of the top 3 fastest DNS hosts worldwide, ranked by dnsperf.com. 

    If you can’t use Cloudflare, our next suggestion is the DigitalOcean DNS hosting. It’s also fast, reliable and has a simple to use interface.

    If you’re DIYing a DNS hosting move be mindful that it’s absolutely critical that every single DNS record is copied from the source of the original DNS host and moved across to the new host. Missing even one record can potentially break your IT infrastructure.

    2. Use Page Caching in WordPress

    You pretty much can’t run a WordPress site without Page Caching. With Page Caching in place, pages are pre-built before the visitor hits the website.

    All the PHP processing and database lookups required to generate the HTML file are all done in advance and stored in the page cache. When the visitor hits the website, the server provides the HTML file immediately, so the user experiences a faster site and the load on the server is dramatically reduced.

    Typically, it’ll take 1-4 seconds to generate a page from scratch whereas a cached page is available in a few hundred milliseconds (0.2-0.5 seconds). Without some form of page caching the TTFB will roughly match the page generation time so you’ll see the TTFB sit in that 1-4 second range.

    WP Rocket is one of the best caching plugins on the market. It includes lots of excellent speed optimization features and is the plugin we use and recommend.

    Note that some hosts come with built-in caching features. In some cases, caching features are installed but they’re either not working or are simply not enabled. If you’re using a managed WordPress host then this is worth looking at as a troubleshooting step.

    Object caching is another type of caching that will help improve the TTFB of busy sites or database heavy sites too.

    3. Use Good Hosting Close to Your Visitors

    Ideally you want your hosting as close to the bulk of your visitors as possible. For most small businesses we’ll typically recommend Cloudways or Siteground but there are several other hosts we recommend on our Fastest WordPress Hosting page.

    4. Use Edge Caching

    Edge caching can reduce most of the impact of geography on site speed and TTFB and if you’re serving a global audience we recommend using it.

    With edge aching in place, let’s say you are hosting your site in the US, and someone from Australia visits it. Most of the site will be loaded from the CDN server. Entire pages are cached on the CDN server called edge node. 

    We typically recommend Cloudflare’s APO service, which is available for $5/month. 

    Cloudflare’s Argo service can help reduce TTFB even further.

    5. Confirm if the High TTFB is only on the Homepage or on All Pages?

    Check if the TTFB issues are only present on the homepage or all pages. You can do this by testing the homepage and other pages on the site from different locations a few times. Make sure that you’re testing the correct URL. Sometimes the problem is simply the use of a wrong variation of the URL. It might be missing “www” at the front, or it’s testing HTTP instead of HTTPS and it’s the redirect causing a high TTFB.

    If only the homepage is problematic, the issue might be caused by some plugin, or something else running on that page that slows it down. 

    6. Make Sure You Are Using HTTPS for HTTP2 protocol support

    HTTP2 protocol was released in 2015, but some hosts still don’t support it. HTTP2 speeds up the communication between the browser and the hosting server dramatically. 

    7. Make Sure There Are No Issues in Cloudflare With Your SSL Certificate

    If you’re using Cloudflare, and you have an SSL certificate, make sure that the encryption setting is set to FULL under the SSL settings. Having it set to flexible will cause poor TTFB timing.

    When you’re in Cloudflare, another thing to make sure is that you’re using A records in the DNS hosting settings instead of CNAME or Alias records. Using a CNAME or ALIAS record will result in the DNS system having to do a second lookup to find the IP address. Sometimes it happens that the DNS hosting is pointing to an old IP address that still works, but is routed to a new IP address. So, it’s a good call to double-check the IP address to ensure it’s correct too.

    8. Check the .htaccess File For Stuff That Shouldn’t Be There

    Duplicate and excessive code in your htaccess file can absolutely cause a high time to first byte.

    Often when someone manually adds speed optimization code to the htaccess file AND then installs a caching plugin (such as WP Rocket) on top of that there will end up being duplicate caching code in htaccess. 

    This will inevitably cause issues with TTFB and overall site speed.

    Also, if your htaccess file includes some weird rules or you have hundreds of thousands of lines in there that can be a problem. In a scenario where you have thousands of redirects, it’s worth looking at moving those into a redirect plugin which will eliminate the impact on TTFB. NOTE that these redirects might work slower if they are in the plugin since they would be processed by PHP and not the htaccess file.

    9. Check the Server Load and the Storage Space on the Server

    Another factor that might be increasing your TTFB and bringing your site speed down is a lack of storage space on your hosting plan or server. Not having enough space to curate stuff such as log files or caching files will cause things to slow down. 

    There are some memory issues related to that as well because if your site is using a reasonable amount of RAM and overflowing into virtual memory, lack of free space can break how virtual memory works. 

    General server load can be an issue too so make sure your hosting has some CPU buffer and isn’t working at 100% load all the time.

    10. Disable Jetpack’s Site Accelerator Plugin (Formerly Photon)

    Some optimization features, particularly the image optimization plugin called Site Accelerator by Jetpack (former Photon), definitely cause TTFB issues. We urge you to disable it and then run a few speed tests and find out if this was your issue. 

    There’s better image optimization plugins than Jetpack – we typically recommend ShortPixel and Cloudflare, because the combination of these two should be way faster than Jetpack’s Site Accelerator. This article breaks down how we use Shortpixel.

    11. Make Sure That Page Caching Is Actually Working

    Sometimes, page caching might not be working because of permission issues on the caching folder. The folder might also contain old corrupt data and garbage that could be causing problems. Deleting the cache folder is an easy way to fix this. 

    You’ll find the caching folder under /wp-content/cache

    Simply delete the /cache folder 

    **MAKE SURE you DO NOT delete the WP content folder itself.

    The /cache folder is auto-created by caching plugins so you should see it reappear almost immediately after deleting it.

    12. Run Query Monitor to Identify Any Errors

    Query Monitor is a plugin that can help identify errors and other issues such as long database lookups that hurt your TTFB.

    Install the plugin and navigate to the homepage while logged in as a WordPress admin and it’ll show red or yellow in the admin toolbar if there are errors happening under the bonnet.

    13. Use the Highest Version of PHP the Site Supports

    Each new version of PHP is faster than the one before it. Version 8 of PHP has just been released in March of 2021. Most hosts don’t support it yet, but versions 7.4 and 7.3 are available. 

    Using the highest version of PHP your site supports will help your site speed. If you’re running a really old version like 5.6 this will likely hurt your TTFB.

    There’s a plugin called WP Engine that serves as a compatibility checker for PHP server support. You simply install it and run the test. If something fails the test, you manually look up that plugin or theme or whatever it is and see if its developer supports PHP 7. In most cases it does, so it’s worth checking.

    14. Make Sure You Don’t Have 404s on the Page

    Sometimes, 404 errors can cause TTFB issues downstream especially if the file is referenced high up in the HTML or CSS. Checking and resolving 404 errors *might* in some cases fix a TTFB problem.

    15. Disable Javascript and CSS Minification Combining

    Content around the web almost always tells you to minify and combine CSS and JS to fix TTFB issues – this is 100% wrong and does absolutely zero for TTFB. On the contrary, combining those tools or minifying them with a plugin can even cause an increase in server response times. 

    We recommend that if you have CSS minified or combined with JS, try disabling them and run a speed test. In some cases, JS and CSS minification and combining can cause a TTFB problem especially if there is a 404 related to one of those files.

    Database Size and Storage Engines

    A lot of people online will tell you to optimize your database . If your database is too big, that’s an issue, but realistically speaking, most WordPress databases are not bigger than a few hundred MB. Databases as big as 5, 10, or 20 GB, are considered huge and indeed problematic. But let’s focus on what matters here, and that’s choosing the right storage engine for your database. WordPress uses a MySQL database, and there are two storage engines available: InnoDB and MyISAM. 

    To illustrate the difference between the two, we should imagine your database as a Google or Excel spreadsheet. MyISAM protocol would only enable editing of one of those sheets or tabs at a time, which means that that tab is locked while being edited. So from the database perspective: users are visiting the site and WordPress is trying to write things to the database. One of these operations has to be put on hold because only one can go on at the time. This means that the table is locked, operations start to queue up, and it all results in things slowing down. 

    On the other hand, InnoDB doesn’t lock tabs. Locking can only happen on a row-level, so only one person can edit a row on the sheet or table at once. This is rarely a problem since it’s not very common that multiple rows are being edited at the same time.

    There are different ways to convert from MyISAM to InnoDB, but we use a plugin from ServeBolt optimizer, which changes the storage engine on all database tables.

    16. Check the Server Logs- Apache & PHP

    If you are still troubleshooting, then you should probably start looking at the log files and realize what’s happening under the bonnet. Query Monitor should help you solve most of the errors, but still there might be some things happening at the lower level of the hosting and causing issues. 

    17. Check WP-Config.php for duplicate lines or conflicting directives

    One fairly common problem we see similar to the .htaccess problem is duplicate code or conflicting directives in the wp-config.php file.

    Here’s a perfect example of a site that had previously used Nitropack and had asked us to switch them to WPRocket & Cloudflare APO. The site had 4 cache directives turning it off and on and off and on which was chewing up CPU cycles on the hosting. The TTFB was sitting in the 1-2 second range. Removing 3 of the lines so the last line from WPRocket was the only line in there solved the issue.

    Similar issues can also occur if you duplicate other lines in this file, for example duplicate sets of cache salt keys.

    What Doesn’t Work

    As we said before, minifying or combining will not bring any improvement to your TTFB or site performance in general. Also, remember not to listen to nonsense tips that tell you to mess with WordPress heartbeat, because that doesn’t do anything. In fact, it can break things. We also noted before that cleaning the database will not do anything either, so just check storage engines instead.

    Want It Fixed For You?

    We’ve optimized over 100’s of WordPress sites and can help make yours load lightning fast too! If you’re looking for someone to do this for you, complete the form on our homepage and one of the team will review your site and tell you what’s doable in terms of site speed.

  • How to Serve WebP Format Images in WordPress

    How to Serve WebP Format Images in WordPress

    WebP is a modern format for serving images faster than ever. If you are using WordPress, you can easily serve all images in WebP with some basic tweaks.

    Most Browsers support WebP

    • According to Caniuse data, WebP is currently supported in 91% browsers include Apple Safari, Google Chrome, Opera, Mozilla Firefox, Microsoft Edge and Android browsers.
    • You can still serve JPEG/PNG as fallback for unsupported browser.

    Major Benefits of using WebP format Image

    • In comparison to the size of normal JPG or PNG image, same dimension image WebP can serve in small bytes. Hence, Images will load faster.
    • Serving Quality Images in few bytes, dramatically save bandwidth.
    • Keep your website updated with latest trend. Don’t loss conversation due to bull-cart slow loading issue.
    • WebP is recommended by Google Developers. Helps you in passing “serve images in next-gen format” recommendation of Google PageSpeed Insight.

    This is how you can serve WebP for a WordPress site.

    Use WebP Express Plugin in NGINX

    • Install & Activate WebP Express, free plugin. A huge thanks to Dev.
    • Operation mode: Varied image responses.
    • Scope: Upload only.
    • Run Bulk Convert
    • For Apache users, no config requires as .htaccess does all magics.
    • NGINX server user need to modify configuration file with root access.

    For better organization of code, I would recommend placing first inside /etc/nginx/ directory with name webp.conf then include in the main server block.

    Enter below command

    cd /etc/nginx/ && nano webp.conf
    • Paste below code using right click inside nano editor in SSH Terminal.
    # WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
  add_header Vary Accept;
  expires 365d;
  if ($http_accept !~* "webp"){
    break;
  }
  try_files
    /wp-content/webp-express/webp-images/doc-root/$uri.webp
    $uri.webp
    /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
    ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
      $uri
      /wp-content/plugins/webp-express/wod/webp-realizer.php?wp-content=wp-content
      ;
}
# ------------------- (WebP Express rules ends here)
    • Press CTRL+O and Enter key to save.

    Now visit the main server block.

    cd /etc/nginx/sites-available && ls

    Highly recommend: Learn To instal WordPress at NGINX (In simple three steps)

    Edit your configuration file, and put include webp.conf; as shown below.

    # General
server {
    listen         80;
    server_tokens off;
    return 301 https://$host$request_uri;
}
server {
server_tokens off;
root /var/www/html;
index index.php index.html index.htm;
server_name .abc.com;
client_max_body_size 0;

    listen [::]:443 ssl http2 ipv6only=on;
    listen 443 ssl http2;
        ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
        ssl_certificate /etc/comodo/cert.pem;
        ssl_certificate_key /etc/comodo/private.pem;
        ssl_prefer_server_ciphers on;
        ssl_session_cache   shared:SSL:20m;
        ssl_session_timeout 20m;
        ssl_ciphers 'TLS13+AESGCM+AES128:EECDH+AES128';

error_page 404 /404.html;
error_page 500 502 503 504 /50x.html;


# WebP Express rule goes here

include webp.conf;

# WebP Rule end

location / {
    try_files $uri $uri/ /index.php$is_args$args;
}

    Reload or restart the NGINX.

    service nginx reload

    Things to note

    • If you use BunnyCDN, must enable Vary Cache.
    • Cloudflare doesn’t support Vary Cache. Try below alternative approach.

    Use WebP using Cloudflare CDN

    If you’re a Cloudflare Pro user you can simply enable WebP in one-click from Speed Tab.

    Serve WebP using BunnyCDN Optimizer

    BunnyCDN offers Optimizer services which comes with On-the-fly WebP serving solution. It’s one-click solution for $9.5/mo additional cost.

    Serve WebP using JetPack Plugin

    • Simply install and activate JetPack plugin
    • Enable the Site Accelerator.

    You may notice a downgrade in image quality that can be fixed using the below filter.

    add_filter('jetpack_photon_pre_args', 'jetpackme_custom_photon_compression' );
function jetpackme_custom_photon_compression( $args ) {
    $args['quality'] = 100;
    $args['strip'] = 'all';
    return $args;
}

    Serve WebP in NGINX using ShortPixel Plugin

    ShortPixel plugin can help in bulk image optimization with WebP conversion and serving as per Browser support. The best part this plugin does processing on their server so it won’t slow down your site.

    • If you’re Apache web server user you can use .htaccess rewriting. That’s simple.
    • In case of NGINX you can use below rewriting rule with the help of hosting support
    • This plugin is supported with WP Rocket cache plugin as well.

    First, add this block before the server directive:

    map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

    Add this block inside the server directive:

    location ~* ^(/wp-content/.+)\.(png|jpe?g)$ {
    set $base $1;
    set $webp_uri $base$webp_suffix;
    set $webp_old_uri $base.$2$webp_suffix;
    set $root "<<FULL PATH OF wp-content PARENT>>";
    root $root;
    add_header Vary Accept;
    if ( !-f $root$webp_uri ) {
        add_header X_WebP_SP_Miss $root$webp_uri;
    }
    try_files $webp_uri $webp_old_uri $uri =404;
}

    Placement matters. So add it carefully.

    Manual method

    This section is for information purposes only.

    Step 1 : Adding WebP format in HTML Document

    First, you need to convert your all images in WebP and along with your previous image format as the fall-back. There is  some plugin like Optimus which can do this job automatically. But, I will show an another easy to do this manually.

    1. Go to this website image.online-convert.com/convert-to-webp
    2. Paste your Image Link and click on convert. Your WebP format images will be downloaded.
    3. Now edit the raw HTML code where your normal Image is appearing.

    Let us say, in beginning, your Image HTML code was like this

    <img src="https://abc.com/wp-content/uploads/2016/09/webplogo.png" alt="abc" width="186" height="66" />

    You need to wrap above code with little more HTML markup.

    <picture>
	<source srcset="https://abc.com/wp-content/uploads/2016/09/webplogo.webp" type="image/webp" />
	<img src="https://abc.com/wp-content/uploads/2016/09/webplogo.png" alt="abc" width="186" height="66" />
</picture>

    Now, Your HTML document is ready to serve images in WebP format.
    Step 2 : Configure server settings
    Just one more step, you need to configure some Apache Webserver settings via .htacccess so browser and web server can treat it properly like all other images.

    Your Web Hosting server may don’t know from which mime type this kind of format images they need to serve. So must add proper mime type. Also, it would be worth to setup expiry header for caching.

    # Serve Images with correct Mime Type
AddType image/webp .webp

# Setup Cache
ExpiresActive On
ExpiresByType image/webp A2592000

    Kindly note: WordPress by default do not support uploading of WebP format image. You may get the error “This file type is unfortunately not allowed for security reasons” while uploading .webp images.

    So, must fix this issue by adding this code in your theme functions.php It would be helpful in case if you will upload your images directly from WordPress Dashboard > Media option.

    function webp_upload_mimes( $existing_mimes ) {
	// add webp to the list of mime types
	$existing_mimes['webp'] = 'image/webp';

	// return the array back to the function with our added mime type
	return $existing_mimes;
}
add_filter( 'mime_types', 'webp_upload_mimes' );

    Done.

    If you need any help, please write to me at prospeedguy@gmail.com. It would be my pleasure to help you.

    Further readings
    If you are curious to learn more about WebP, please refer these links.

    Thanks.

  • Why you should Self-Host Google Fonts?

    Why you should Self-Host Google Fonts?

    Web and browsers are evolving fast!

    Many optimizations we did a few years are ago now outdated or not recommended.

    Delivering Google Fonts to get maximum performance has also changed recently as browsers implemented new features. This post is specifically on why you should self-host Google Fonts.

    Outdated Performance Arguments

    Argument: Browsers will already have Google Fonts cached

    When you embed a Google Font, it first downloads a CSS file from “fonts.googleapis.com” and then downloads font files mentioned in that CSS file from “fonts.gstatic.com”.

    Only font files downloaded from “fonts.gstatic.com” has a cache period of 1 year. The main CSS file only has 24 hours of cache lifespan.

    “Browsers will already have Google Fonts cached”, yes, but to serve that cached font, the browser needs to download a CSS file every 24 hours, that too is render-blocking in most websites!

    If that didn’t convince you enough, here is one more 😉.

    New “Cache Partitioning” in browsers for privacy

    Chrome and Safari have implemented something called “Cache Partitioning” or “double key caching”.

    In simple words, files cached by website A will not be available for website B. When website A downloads a resource from “example.com/script.js”, cache it, and another website B tries to download the same file, it will have to download it again.

    So a Google Font downloaded by a website will not be available for another website in the browser cache.

    Under the hood, the browser uses a key to cache files. Usually, the cache key is the URL of the file. But with cache partitioning, the URL of the website which requested the file is also included in the cache key.

    You can read more about cache partitioning in Chrome here: Gaining security and privacy by partitioning the cache.

    Browser implementation of Cache Partitioning

    ✅ Chrome: since v86 (October 2020)
    ✅ Safari: since 2013
    🚫 Firefox: from v85 (January 2021)

    Browsers like Edge, Opera, Brave uses Chromium engine, so expect this feature in other browsers soon.

    Also, note that Chrome and Safari alone has a market share of ~80% in browsers.

    Argument: Google Fonts delivers optimized fonts based on device/browser

    Yes, Google delivers different fonts based on the user-agent.

    But as long as you deliver self-hosted Google Font in “woff2” format, you’re targeting ~96% of the browsers.

    Only Internet Explorer and Opera Mini don’t support “woff2”. In that case, you can add “eot” as a fallback and still get all advantages of self-hosting.

    Here is the sample code:

    @font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/poppins-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
}

    Argument: Google CDN is faster

    If your website is on good hosting or has CDN and has enabled HTTP/2, self-hosting will outperform Google CDN. Because the browser doesn’t have to make extra DNS lookups, SSL handshakes etc and reuse existing HTTP/2 connections.

    When you self-host and inline Google Fonts, the browser can immediately start to download the font after receiving the first HTML. You can also leverage preload functionality.

    Sia Karamalegos has written a great post on comparing the difference: Making Google Fonts Faster⚡.


    Without Self-Hosting
    With Self-Hosting

    “Yes. The open-source fonts in the Google Fonts catalogue are published under licenses that allow you to use them on any website, whether it’s commercial or personal.”

    Google Fonts – FAQ

    In fact, Google itself recommends self-hosting Google Fonts for complete control like preloading. It’s mentioned in one of their YouTube videos:

    How to Self-Host Google Fonts in WordPress

    OMGF plugin can self-host Google Fonts. But I found it hard to use. We’ve to search the fonts or auto-detect by opening pages manually.

    If you’re using Wp-Rocket, turn on “Optimize Google Fonts”. It will take care of self-hosting, combining and everything for you!

  • How To Use Cookie-Free Domains with Cloudflare in WordPress- CDN

    How To Use Cookie-Free Domains with Cloudflare in WordPress- CDN

    Seeing “Use cookie-free domains” error at GTmetrix Yslow or Pingdom for your site?

    GTmetrix report

    Why use Cookie Free Domains?

    When the browser requests a static element and sends cookies with the request, the server ignores the cookies. These cookies are unnecessary network traffic. It increases page load time. Therefore, it is better to avoid cookies for static resources like CSS, JS, Images, etc. files. This is why speed test tools such as GTMetrix and Pingdom recommend to serve the static resources from a domain that doesn’t set cookies.

    Solutions

    • Use a CDN
    • Use Cloudflare only for DNS

    #1. Use a CDN to Serve Cookie-Free Content

    As unnecessary cookies can come from various sources such as Cloudflare, Analytics, top-level domain names and so on, it’s better to completely offload static resources to a CDN unique hostname.

    • Use BunnyCDN to serve all static resources cookies-free.
    • Or, use Stackpath (Formerly known as MaxCDN), they support cookie-free domains.
    Strip all cookies with Stackpath CDN

    This method should work for site using top level (non-www) domain or www alias.

    Bonus tip: If you’re using Yoast SEO WordPress plugin, it would be best to update the image path in XML file. You can add the below snippet via Code Snippets plugin.

    function wpseo_cdn_filter( $uri ) {
	return str_replace( 'https://example.com', 'https://example.stackpathcdn.com', $uri );
}
add_filter( 'wpseo_xml_sitemap_img_src', 'wpseo_cdn_filter' );

    #2. Use Cloudflare only for DNS

    Generally, you can’t serve cookie-free content while using its CDN (Reverse Proxy) services together. The way Cloudflare provide services, it must add a special cookie namely _cfduid with each HTTP request over whole domain.

    HTTP/1.1 200 OK
Date: Thu, 26 Mar 2020 15:37:09 GMT
Content-Type: image/vnd.microsoft.icon
Content-Length: 0
Connection: keep-alive
Set-Cookie: __cfduid=d36b1934da000d3fbc11e5a8e13fccde11585237029; expires=Sat, 25-Apr-20 15:37:09 GMT; path=/; domain=.cloudflare.com; HttpOnly; SameSite=Lax; Secure
Strict-Transport-Security: max-age=31536000; includeSubDomains; preload
CF-Cache-Status: HIT
Age: 4650
Accept-Ranges: bytes
Expect-CT: max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
X-Content-Type-Options: nosniff
Server: cloudflare
CF-RAY: 57a1f3878d3ad597-BOM
alt-svc: h3-27=":443"; ma=86400, h3-25=":443"; ma=86400, h3-24=":443"; ma=86400, h3-23=":443"; ma=86400

    Solution: To eliminate __cfduid cookies, keep Cloudflare in DNS only mode or switch to Enterprise Plan that allow to remove but it would be costly. Alternatively, you can use Sucuri performance and security solution which doesn’t set cookies with each request.

    #3. Switch to Static WordPress

    This blog is live example a static WordPress site. It is hosted at BunnyCDN Cloud Storage. I am huge fan of their services and amazing support.

    Key facts

    • It helps serving pages without cookies.
    • The process require deep technical understanding of CDN, Caching Policy and end result is worth it.
    • I use Cloudflare only as DNS not proxy.
    • My all pages score 90+ at PageSpeed Insight
    • I use WordPress just as CMS in backend but end user interact with HTML pages.

    By converting WordPress to HTML you can make your website faster than 99% of the world.

    How to check either my domain/subdomain cookiesless or not?

    Check at Network Tab of Chrome Developer tool or using GTmetrix.

    Final words: I have tried my best to explain this tutorial to you. If you have any questions in mind, or couldn’t understand this tutorial at any part. Please feel free to write to me at prospeedguy@gmail.com. I would be happy to reply to your queries.

  • 14 Tools We Use to Audit Performance of a WordPress site

    14 Tools We Use to Audit Performance of a WordPress site

    Performance is not just about “my site loads under x seconds”. There are several other factors you need to look into.

    Here is a list of tools and services I use to audit or test the performance of a WordPress site. Not just WordPress, these can be used for any site.

    1. Your Eyes – The Eye Test

    Don’t get me wrong.

    Let’s take an example,  Wp-Rocket WordPress plugin. It helps to prefetch inner pages in the background and loads pages instantly on user navigation. This gives a much better user experience.

    I haven’t seen any tools who can measure these.

    Whether your tools give you the perfect score or loads in a few hundred milliseconds, always test your site through naked eyes.

    2. Chrome Developer Tools

    Google Chrome Developer Tools comes with several handy tools to audit a website. Open developer tools by Ctrl+Shift+I or Ctrl+Opt+J.

    2.1 Network Monitor

    Network monitor gives a detailed view of what all requests are made by the browser, its response, timings etc.

    • Status – Easy to figure out if any resource is not available
    • Protocol – Checks HTTP1.1, HTTP2, Quic etc
    • Type – File type returned, easy to figure out WebP is working
    • Size – Amount of data transferred, with and without Gzip. ‘Disk Cache’ or ‘Memory Cache’ indicates browser caching is working
    • Priority – Priority of each file which browser requests. CSS, JS, Fonts have high priority, images – Low, SendBeacon (Google Analytics), prefetch (Wp-Rocket) have the lowest.
    • Waterfall – A waterfall of the data requested and received. Also, provide in-depth data of DNS lookup, TCP connection, SSL, TTFB, etc. Easy to debug lazy loading too

    2.2 Audits

    Test your site for performance, PWA, best practices, accessibility and SEO. You can also choose device and throttle network speed and CPU.

    You can use the ‘Lighthouse’ tool which I mentioned below to get the same results.

    2.3 Security


    How does security relate to performance?

    The version of TLS can dramatically affect the TTFB. The latest version is TLS 1.3.

    3. Google PageSpeed Insights

    Google PageSpeed Insights is one my favourite tool among all. What I like about it is, instead of just focussing on ‘load time’, it measures user experience up to a point.

    Some people complain that it doesn’t show fully loaded time. I believe Google doesn’t show it because it’s not a good way to measure a site.

    Google PSI is one of the best tools to analyze:

    • TTFB – Time to First Byte (server response time)
    • FCP – First Contentful Paint
    • FMP – First Meaningful Paint
    • TTI – Time to Interactive

    and more

    4. GTmetrix Analyzer

    GTmetrix will analyze your site and can recommend what all things are needed to be fixed. Also, give you some scores and fully loaded time. You can also choose the region for test, device, browser etc.

    GTmetrix provides a Waterfall of all the requests made from the website, which I found very useful.

    Most of the time people look into scores and fully loaded time. The factors that I mainly look into are in the ‘Timings’ tab.

    5. GTmetrix Monitor

    GTmetrix also comes with a monitor that will periodically check your site and send you a weekly digest. I no longer have to analyze my site again and again if I update something in my site.

    Their free plan (Basic plan) provides 3 URLs to monitor.

    6. Pingdom Speed Test

    Pingdom Speed Test is a free tool provided by the SolarWinds. It’s is very similar to GTmetrix, provide you with a report with scores and load time.

    But what I like about this tool is that it shows a breakdown of size and no. of requests per domain, file type etc. This gives a quick view of where to optimize.

    7. Pingdom Monitoring

    What if your server is going down occasionally or your site is inaccessible to some users on heavy traffic?

    Pingdom is a ‘Website Performance and Availability Monitoring’ company. Pingdom monitor will continuously monitor (say every 5 mins or 30 secs) and will alert you if something goes wrong.

    There is no free plan. Paid plan starts at $14.95/month.

    8. WebPageTest

    WebPageTest is one of the oldest and reliable tools. Test your website multiple times from the same device. It’s very useful to see how effectively “browser caching” is working. Also provide some key metrics like TTFB, keep-alive, compression, browser caching, cdn etc.

    I’m not a big fan of their UI 😉 so I don’t use it that often.

    9. KeyCDN Performance Test

    Most of the tools I listed above will test TTFB (time to first byte or server response time) from a single location. KeyCDN Performance Test will analyze your site from 14 locations with just a button click and provide a report of DNS lookup time, connection, TLS and TTFB.

    10. Uptime Robot

    Similar to Pingdom Monitoring, Uptime Robot monitors your site for the downtime and will alert you.

    The free plan allows 5 mins of monitoring intervals.

    It’s highly recommended to monitor your hosting/server, especially if you’re on a shared hosting

    11. Google Analytics Site Speed

    Google Analytics uses HTML5 Navigation Timing API to collect performance metrics from 1% of your users (configurable). You can view it under Behaviour -> Site Speed.

    What’s so special about GA Site Speed is that data is collected from real-world usage. All other tools use the high-performance network or an emulated network to do the test, which might be different from real users. What if most of your users are still on 3G?

    12. Loader.io

    What if one of your blog posts went viral? Are you sure that your server/hosting provider could handle it? You might be losing a good amount of users and affecting SEO badly without your knowledge.

    Don’t assume and believe in “unlimited” traffic. Better do a load test and figure out how many visitors you can handle.

    Loader.io makes it easy to send 10k requests/second to your site and see how it performs.

    13. dotcom-tools

    dotcom-tools tests your site from 25 locations, both first and repeat first. I also use this tool to prebuild cache of CDN after a purge.

    14. Lighthouse

    Lighthouse is another tool provided by Google. It’s built inside Google Chrome.

    Lighthouse tests Performance, Accessibility, Best Practices and SEO. The ‘Performance’ report will be the same as in Google PageSPeed Insights. But in a single tool, you can test all of them.

    You can test it directly from your Chrome Browser’s ‘Audits’ tab in developers tools or go to https://web.dev/measure

  • How to avoid an excessive dom size in wordpress

    How to avoid an excessive dom size in wordpress

    If you’re reading this article, chances are you’ve run into an “Avoid an excessive DOM size” warning from Google Lighthouse.

    Part of selecting a good theme choice in WordPress is to avoid an excessive DOM size. Before you install the theme on your website, do some research on other websites that utilize it. Verify the performance of those websites with Google PageSpeed Insights.

    The loading performance of a web page is one of the factors that influence getting good SEO positioning. And this is a topic where the DOM size of a page is critical.

    When a website is assessed using page speed tools such as Google Page Speed or GTmetrix, the error ‘Avoid an excessive DOM size’ displays. If you’re unfamiliar with the word and want to learn more about it, you’ve come to the correct spot. This post will cover everything you need to know about avoiding an excessive DOM size in WordPress.

    What is the DOM?

    Your browser creates a tree structure of the objects called DOM (Document Object Model) every time it loads a web page.

    DOM is a tree diagram of objects in your HTML. It shows each HTML element such as the body or h1 with its own node.

    DOM represents the hierarchical nature of different objects which may or may not depend on each other. As mentioned earlier, it displays the webpage’s HTML structure as a tree, composed of a series of tags.

    Here’s how it works: when your web browser starts preparing a page to display it, it generates an object tree diagram of all the page elements according to its HTML structure.

    As a result, whenever it receives an HTML file, it begins by converting it into a tree-structured form called DOM or DOM tree. You can access the DOM and modify it using JavaScript.

    Here are some key terms related to DOM:

    • Nodes. Each element or tag in the DOM is called a node or leaf in the DOM tree.
    • Depth. The number of elements in a branch of a DOM is called depth.
    • Child element. The last node which doesn’t branch any further is called a child element.

    When analyzing your site through Google PageSpeed Insights you might have seen an error like “Avoid an excessive DOM size”:

    Or in GTmetrix “Reduce the number of DOM elements”:

    How DOM Size Impact Performance?

    Excessive DOM size can impact performance in different ways.

    • Higher parse and render time (FCP) – A large DOM tree and complicated style rules make a huge work for the browser. The browser has to parse the HTML, construct a render tree, etc. Every time user interacts or something in HTML changes, the browser has to compute this again.
    • Increases memory usage – Your JavaScript code might have functions to access DOM elements. A larger DOM tree causes JavaScript to use higher memory to process these. An example would be a query selector like document.querySelectorAll('img') which lists all images, commonly used by lazy loading libraries.
    • Increases TTFB – As your DOM size increases, the size of the HTML document increases (in KBs). Since more data has to be transferred over the network, this increases TTFB.

    How to avoid an excessive dom size Technically?

    For example, technically reducing DOM size is simple as:

    use:

    <ul id="navigation-main">
    etc..
</ul>

    instead of:

    <div id="navigation-main">
    <ul>
        etc..
    </ul>
</div>

    Basically, get rid of every possible HTML element. You can also use Flexbox or Grid to further reduce DOM size.

    But since you’re using WordPress, this isn’t gonna help you much!

    How to avoid an excessive DOM size in WordPress?

    Lazy Render below-fold contents

    You can tell the browser to lazy render the contents (or elements) if it’s not required for the above fold. It’s just like lazy loading images, but for HTML elements.

    Split large pages into multiple pages

    Do you have a page with everything you got on the site? Like services, contact forms, products, blog posts, testimonials, etc?

    Try to split them into multiple pages and link to them from the header/navbar.

    Lazy load and Paginate everything possible

    Lazy load every possible element. Some examples could be:

    • Lazy load YouTube videos – use WP YouTube Lyte or Lazy Load by WP Rocket.
    • Limit number of blog posts/products per page – I usually try to keep a maximum of 10 blog posts per page and paginate rest of them.
    • Lazy load blog posts/products – Add “load more” button or infinite scroll to load more blog posts or products.
    • Lazy load comments – I lazy load comments section using Disqus Conditional Load since I use Disqus. If you’re using native comments, use plugins like Lazy Load for Comments.
    • Paginate comments – If you have hundreds of comments, this can also affect DOM size. Paginate comments by going to Settings -> Discussion -> Break comments into pages.
    • Limit related posts count – Try to limit the related posts count to 3 or 4.

    Note: Lazy loading images won’t reduce DOM size

    Don’t hide unwanted elements using CSS

    Sometimes you might need to remove elements injected by the theme/builder. For example, add to cart button in product pages, rating button, author info, published date, etc.

    A quick solution is to hide them using CSS:

    .cart-button {
  display:none;
}

    Even though this solution looks easy, you’re serving unwanted code to users (which includes both HTML markup and CSS styles).

    Check your theme/plugin settings to see if there is an option to remove it. Otherwise, find the respective PHP code and remove/comment on them.

    Use well-coded themes and page builders

    A good theme has a major role in DOM size. Use well-coded themes like GeneratePress or Astra.

    Page builders also inject too many divs. Use builders like Oxygen that doesn’t inject unwanted divs and have more control over the HTML structure.

    If you’re new to Oxygen, watch Building a Website in Oxygen from Scratch.

    Conclusion

    There might be more plugins or theme settings that inject too many divs. An example can be “mega menu” plugins like UberMenu.

    Sometimes these are crucial for your website’s user experience. But sometimes these are never used by users.

    Maybe your footer links are never clicked because most of the visitors are only scrolling up to 75%.

    Use tools like HotJar or Google Analytics events to see what visitors are actually using and not using. Analyze, measure, and iterate.

    Hope this helps! 🙂


    WordPress Speed Optimization Service

  • 9 Tips to Improve First Contentful Paint in WordPress- FCP

    9 Tips to Improve First Contentful Paint in WordPress- FCP

    In early 2019, Google announced that they would evaluate a website’s speed ranking by focusing on two performance metrics: First Contentful Paint (FCP) and First Input Delay (FID).

    Over time, the performance scenario has evolved. For instance, Google announced the three Core Web Vitals: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID).

    Nonetheless, the First Contentful Paint metric has continued to play an important role as a Lighthouse (and user experience) metric. It accounts for 10% of the overall performance score.

    Your website may load under 2 seconds in a speed test, but if that’s not the case for a majority of your audience, then Google will still penalize you.

    In this article, you’ll learn what’s FCP and why it’s important. Next, we’ll move on to various ways you can improve FCP on your WordPress site.

    Sounds exciting? Let’s dive in!

    What is First Contentful Paint (FCP)?

    First Contentful Paint (FCP) is a user-centric metric for measuring perceived page load speed. FCP measures how users perceive the performance of a website, rather than what a speed test tool measures.

    First Contentful Paint differs from First Paint, which is a point in the page load timeline where any type of render is detected on the browser. On the other hand, FCP requires some content to be rendered. This content could be text, images (including background images, logos), or non-white <canvas> elements.

    First Contentful Paint also differs from the Largest Contentful Pain (LCP), one of the Core Web Vitals measuring how long it takes for the largest element to become visible in the viewport.

    To keep it simple, you can think of FCP as the time it takes for the user to see any content on their browser. Thus, a fast FCP reassures the user that something is happening and keeps them glued to the site.

    Google recently made an announcement that they’re ranking websites based on FCP and FID.

    They categorize websites into Slow, Moderate and Fast

    This is now visible in Google Search Console‘s ‘Speed’ menu.

    This is also visible in Google PageSpeed Insights as ‘Field Data’.

    “But my website loads in 2s” Why does this matter?

    The Field Data is the data collected from the Chrome User Experience Report (Crux). Chrome collects data from real users.

    Your testing tools might say your website loads in 2s or less. But your audience might be from different locations, with different devices and network speed.

    Field Data tells the actual speed that your users are experiencing.

    So if you’re trying to figure out how to reduce FCP, here are some tips:

    1. Reduce TTFB

    FCP = TTFB + render time.

    So you’ve to reduce TTFB to reduce FCP.

    There are several techniques to reduce TTFB in WordPress. The easiest one is to use a good cache plugin like WP Rocket and a good hosting provider like Cloudways.

    2. Remove Render-blocking resources

    Once the browser receives the HTML content, it may have to download extra resources in order to start rendering.

    They’re usually CSS and JavaScript.

    For JavaScript, you’ve to add a defer attribute to the script tag. The defer attribute tells the browser to only execute the script file once the HTML document has been fully parsed.

    For CSS, we’ve to load them at the bottom, asynchronously.

    Almost all cache plugins can do both. What I usually recommend is WP Rocket since it can generate critical CSS too.

    Generate Critical CSS

    When you load CSS asynchronously, the browser doesn’t have the necessary styles required. This will create Flash of Unstyled Content of FOUC.

    To prevent this, we’ve to generate Critical CSS.

    Critical CSS is the CSS that is required to render the above fold contents. It’s inlined in the HTML so that no resources need to be downloaded and the browser can immediately render the content.

    3. Use well-coded themes and page builders

    A good theme has a major role in reducing FCP. Use well-coded themes like GeneratePress or Astra.

    Page builders also inject too many divs and unwanted CSS. Use builders like Oxygen that doesn’t inject unwanted divs and has more control over everything.

    If you’re new to Oxygen, watch Building a Website in Oxygen from Scratch.

    4. Avoid JS dependent elements in Above Fold

    Anything that requires JavaScript to be executed to render can harm First Contentful Paint.

    So as a thumb rule, avoid elements that require JavaScript to render in the above fold, like these:

    • Sliders like Revolution slider
    • Google Ads
    • Mega Menu plugins
    • Animations

    5. Preload Pages in the Background

    By preloading pages in the background, whenever a user navigates to a page, the page is loaded instantly without any delay.

    Link prefetching is a browser mechanism, which utilizes browser idle time to download or prefetch documents that the user might visit in the near future.

    Mozilla Docs

    Note that this will not help for the initial page load, only for the inner pages.

    The code looks like this:

    <link rel=”prefetch” href=”URL_TO_PAGE”>

    6. Exclude ‘Above Fold’ Images from Lazy Loading

    Lazy loading usually requires JavaScript to be executed before displaying images. This can delay rendering images in the above fold.

    Always exclude images in the above fold from lazy loading. Most of the lazy loading plugins have this feature.

    7. Inline ‘Critical’ Images

    Inlining images mean the browser doesn’t have to make another HTTP request to download the image. The content of the image is already inside the HTML.

    A normal image in HTML:

    <img src=”https://yout-site.com/logo.png”/>

    A base64 image in HTML (inlined):

    <img src=”data:image/png;base64,…[content]…”/>

    8. Reduce DOM Size

    When your browser receives an HTML document, it has to be converted to a tree-like structure which is used for rendering and painting with the help of CSS and JavaScript.

    This ‘tree’ like structure is called DOM or Document Object Model.

    The more elements you add into a page, render time and First Contentful Paint increases.

    9. Ensure Text Remains Visible during webfont load

    You may have seen an error like this in Google PageSpeed Insights:

    Font files are usually added in the CSS files.

    For a browser to get the fonts ready, it has to parse HTML, download CSS files, parse them, and download fonts files.

    Until these all are done, the text is invisible! Also called Flash of Invisible Text (FOIT).

    You can fix this by adding a display:swap to CSS (@font-face). This tells the browser to use a default font until the actual one is downloaded.

    Conclusion

    As Google has started to put more focus on site speed, improving FCP is no longer a ‘good to have’, it’s a ‘necessity’.

    Not just Google, FCP and FMP are the metrics which says when a site is ‘visible’ to the user. Measuring fully loaded time is not always enough.

  • How To Speed Up & Optimize WordPress database connection

    Let’s Optimize WordPress database connection

    In this post, we’re going to break down and share how we optimize the WordPress database connection and database queries when working on site speed.
    A slow WordPress database connection or slow queries will typically manifest in areas in WordPress that aren’t cached like the WordPress backend, checkout pages in WooCommerce, or membership pages on a membership site.

    How To Speed Up & Optimize WordPress Database Queries

    There’s no magic when it comes to website speed optimization and speeding up the database end of WordPress is the same. Ultimately, the way in which you can speed up WordPress database connection & queries could be summarized as:

    1. Use better hosting;
    2. Use object caching powered by Redis or Memcached (memory based database caching);
    3. Reduce the load on the site and database;
    4. Configure the database in a best practices fashion.

    How to Speed Up WordPress Database Connection & Queries

    The recommendations below can be a bit technical, so if you have a question or need anything clarified, please post in the comments.

    1. Use a Good Host That Ideally Has Memcached or Redis Caching
      Having a high quality, reliable hosting provider that supports Memcached or Redis caching is of crucial importance. Memcached and Redis are types of memory caches that can be used for Object Caching – basically WordPress database caching.

    Redis is probably faster in most cases but Memcached is generally more widely available. These are applications installed on the server or hosting itself.

    How To Speed Up & Optimize WordPress Database Queries 2

    If you have a VPS that you’re in control of you should be able to install one of these apps on it.
    If you have a site that is heavy on database queries it’s worth looking at a host with object caching capability. Here’s three we regularly recommend that check this box:

    Siteground – Siteground is a solid mid-range host and they support Memcached and have a tutorial on how to configure it.
    Cloudways – has its VPS servers located in more than 60 places worldwide. These guys offer truly affordable hosting plans starting at $10/month. Cloudways supports both Memcached and Redis.
    *Kinsta – is a managed WordPress host and offers Redis as an addon option.

    1. Use Object Caching
      Object caching is a type of database caching that can dramatically speed up sites that have database heavy operations. Woocommerce checkout and cart operations, order management on the backend and almost everything that happens behind the logon on a membership site are all database heavy operations that will benefit from Object Caching.

    The object cache sits in front of the database and can answer previous database queries (if in the cache) without talking to the database.

    How To Speed Up & Optimize WordPress Database Queries 3

    Your host will need to support Redis or Memcached in order to use object caching and we typically use the Redis Object Cache plugin from Till Kruss inside WordPress to power the caching.

    Broadly, the steps to get this up and running are:

    Install Redis or Memcached or check with your host whether they support it;
    Add a cache salt key in wpconfig.php (important because without this, caches may jump between sites);
    Install and enable the Redis Object Cache plugin.

    1. Use the Highest Version of PHP the Site Supports
      PHP is the programming language WordPress is built on. New versions of PHP get released regularly (every 6-12 months), and each version is typically 10-30% faster than the previous version.

    Using the highest version of PHP that your site supports can dramatically speed up database-related operations.

    1. Reduce the Load by Using Page Caching
      You pretty much can’t run a WordPress site without Page Caching. With Page Caching in place, pages are pre-built before the visitor hits the website, which is a great way to speed up WordPress data queries.

    All the PHP processing and database lookups required to generate the HTML file are all done in advance and stored in the page cache. When the visitor hits the website the server provides the HTML file immediately so the user experiences a faster site and the load on the server is dramatically reduced. Typically it’ll take 1-4 seconds to generate a page from scratch whereas a cached page is available in a few hundred milliseconds (0.2-0.5 seconds)

    How To Speed Up & Optimize WordPress Database Queries 4

    WP Rocket is one of the best caching plugins on the market. It includes lots of prominent features, so it stands out as the plugin we highly recommend to everyone who wants to speed up WordPress data queries and improve their website’s performance.

    • 5. Reduce the Load by Using Cloudflare CDN

    Even if you are using a low-quality host, Cloudflare can greatly decrease your site’s load times even on the free plan.

    Cloudflare offers several speed optimizations and speed benefits such as:

    How To Speed Up & Optimize WordPress Database Queries 5

    Fast DNS (Domain Name System) hosting – Cloudflare is typically one of the fastest DNS hosts in the world, see https://dnsperf.com for real time rankings
    Security & Firewall even on the free plan Cloudflare can filter a lot of the garbage traffic hitting your site. There’s some custom rules we typically add to boost speed further, see this article.
    The $5/month plan includes Cloudflare’s APO service that does edge caching. With edge caching, entire pages from your site are stored on Cloudflare’s servers (aka “edge”) which removes most of the impact of geography on site speed AND can increase the volume of traffic your site can handle from 2-50x
    On the $20/month plan (which we recommend for bigger sites) Cloudflare also provides a full firewall, image optimization and bunch of other site speed optimizations.
    If you can’t use Cloudflare, at least use a CDN service (one that has image optimization built-in like Bunny CDN). CDN is very useful in speeding up the response of static assets such as CSS, JS, images, and fonts.

    1. Make Sure Your Database Is Using the Innodb Storage Engine for All Tables
      InnoDB and MyISAM are “storage engines” used by MySQL – essentially the format the database stores its database. MyISAM was a default table type until MySQL 5.5.5 was introduced in 2010. Innodb tables are faster than MyISAM so ensuring the tables are using the Innodb storage engine can dramatically speed up queries.

    MyISAM Table

    There are several differences between the two but in simple terms, MyISAM tables will lock a database table while it’s being written to. This means that on a busy site these database write operations start to queue and cause delays in processing which manifest as slower loading to the user.

    Think of the database table as an Excel spreadsheet where if one person has it open, another person can’t make any edits.

    Innodb tables only lock the row in the database table that’s being written to, so there’s little to no database queuing. It’s like using a shared Google Sheet that multiple users can work on at once.

    Converting from MyIsam tables to Innodb tables can give you a solid speed boost particularly in the backend and on higher traffic sites.

    InnoDB Table
    For most affiliate sites, the database will be a few hundred megabytes at most, so we use a plugin called Servebolt Optimizer (https://wordpress.org/plugins/servebolt-optimizer/ ) to do the conversion. If your database is over 1 GB in size, you might need to run the convert operation a couple of times.

    If the database is big, e.g. several GB, don’t do this during peak times, and probably not a good idea to do the conversion using this plugin as you’ll wind up knocking over the server for a reasonably long period of time. Better to do this at the database level itself in PHPMyAdmin and probably wise to get a developer to do this for you.

    1. Disable Any Plugins and Tools You’re Not Using
      Unused plugins and tools might be another reason for slow WordPress database queries, especially when it comes to older websites. Go through all plugins and tools your site uses, and delete or disable those that are no longer used.

    From a speed point of view, cutting the number of plugins should improve your site’s performance.

    1. Delete Expired Transients for Your Database
      The transients API in WordPress makes way for developers to store temporary information in the WordPress database and assign it an expiration time, after which it will be deleted. This eases server load and improves WordPress performance.

    Sometimes, transients expire or disappear before their set timeframe, or don’t have the expiring time. Old and expired transients can increase the site load and negatively influence its performance. There’s a number of different plugins that can delete expired transients, like WP Rocket as well as WP Optimize.

    1. Use the Query Monitor Plugin to Identify Database Hogs
      Query Monitor is a WordPress plugin that allows debugging WordPress’ slow database queries, hooks and actions, PHP errors, editor blocks, HTTP API calls, enqueued scripts and stylesheets, and more. It also helps you to efficiently find out if plugins, themes, or functions perform poorly. Query Monitor comes with some advanced features that are extremely useful with debugging Ajax calls, REST API calls, and user capability checks.

    Query monitor home page
    Installing the Query Monitor plugin and performing operations on the frontend and backend of the site will identify slow pages, large database queries and memory hogs.

    Query Monitor is free – https://wordpress.org/plugins/query-monitor/

    1. Update All Plugins to the Latest Versions
      This is yet another way to speed up WordPress data queries. Quite often older plugins have minor incompatibilities with the current WordPress version or PHP version being used. Usually these issues will appear in Query Monitor but occasionally not. Making sure all plugins are up to date can eliminate these problems.

    Pay special attention here to paid plugins that come from Themeforest/Envato or a third party where there may be several updates available but the plugin itself does not show any updates available.

    1. Analyze Server Logs to Identify Any Resources Getting Hammered
      Sometimes looking at server log files can help identify particular resources that are getting hammered or errors happening under the bonnet.

    Again the Query Monitor plugin will usually unearth errors that would show up in the server log but occasionally not.

    Often we find SEO crawlers hammer Woocommerce sites adding and removing thing to the cart and wishlist rapidly over the course of a few seconds chewing up a huge volume of server resources so blocking these crawlers can be useful. Likewise brute-force attacks on the WordPress backend login screen can have a similar effect.

    1. Reduce Load Further by Using Wordfence or Another Security Tool
      As per the previous point, using security tools can help reduce the volume of scrapers, crawlers and otherwise nefarious visitors chewing up server resources.

    Typically we recommend using the $20/month version of Cloudflare which has a true stateful firewall built into it so it can intelligently block traffic as well as the free version of Wordfence which will help reduce brute force attacks and anything that slips through Cloudflare.

    Further help….
    I hope you found this post useful. If you’re looking for help specifically with high database load, our Consult Services is probably the service that can help you. If you’re unsure, head to the homepage and submit a free site speed audit request.

    Want to go faster, rank higher in Google & get more customers?
    Sign up now and join 1000s of other subscribers and get cutting edge tactics & techniques we’ve learnt after optimizing 4000+ websites