{"id":2007,"date":"2021-01-06T08:05:04","date_gmt":"2021-01-06T08:05:04","guid":{"rendered":"https:\/\/loadfocus.com\/blog\/?p=2007"},"modified":"2021-01-20T06:00:18","modified_gmt":"2021-01-20T06:00:18","slug":"how-to-improve-your-wordpress-performance-score","status":"publish","type":"post","link":"https:\/\/loadfocus.com\/blog\/2021\/01\/how-to-improve-your-wordpress-performance-score","title":{"rendered":"How to Improve your WordPress Performance Score"},"content":{"rendered":"<\/span> 3<\/span> minutes read<\/span><\/span>\n

We managed to get a 99\/100 Performance Score<\/strong> with Google Lighthouse<\/a>, check the details below how we did it.<\/p>\n\n\n\n

Read more on how to run a Google Lighthouse audit<\/a>.<\/p>\n\n\n\n

First of all, you’ll need to install a list of WordPress plugins, activate and configure them.<\/p>\n\n\n\n

WordPress Plugins for Optimization:<\/h2>\n\n\n\n
  1. Autoptimize<\/strong><\/a><\/li><\/ol>\n\n\n\n

    This will manage your JS, CSS assets and minify the HTML for all pages.<\/p>\n\n\n\n

    JavaScript Options<\/strong><\/p>\n\n\n\n

    \"Autoptimize
    Autoptimize JavaScript Options<\/figcaption><\/figure>\n\n\n\n

    We’ve only ticked the two options here:<\/p>\n\n\n\n

    Optimize JavaScript Code?<\/th>Yes<\/td><\/tr>
    Aggregate JS-files?<\/th> Aggregate all linked JS-files to have them loaded non-render blocking? If this option is off, the individual JS-files will remain in place but will be minified.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    CSS Options<\/strong><\/p>\n\n\n\n

    Optimize CSS Code?<\/th>Yes<\/td><\/tr>
    Aggregate CSS-files?<\/th> Aggregate all linked CSS-files? If this option is off, the individual CSS-files will remain in place but will be minified.<\/td><\/tr>
    Also aggregate inline CSS?<\/th> Check this option for Autoptimize to also aggregate CSS in the HTML.<\/td><\/tr>
    Generate data: URIs for images?<\/th> Enable this to include small background-images in the CSS itself instead of as separate downloads.<\/td><\/tr>
    Inline all CSS?<\/th> Inlining all CSS is an easy way to stop the CSS from being render-blocking, but is generally not recommended because the size of the HTML increases significantly. Additionally it might push meta-tags down to a position where e.g. Facebook and Whatsapp will not find them any more, breaking thumbnails when sharing.<\/td><\/tr>
    Exclude CSS from Autoptimize:<\/th>
    A comma-separated list of CSS you want to exclude from being optimized. Important: excluded non-minified files are still minified by Autoptimize unless that option under “misc” is disabled.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    HTML Options<\/strong><\/p>\n\n\n\n

    Optimize HTML Code?<\/th>Yes<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    Misc Options<\/strong><\/p>\n\n\n\n

    Minify excluded CSS and JS files?<\/th> When aggregating JS or CSS, excluded files that are not minified (based on filename) are by default minified by Autoptimize despite being excluded. Uncheck this option if anything breaks despite excluding.<\/td><\/tr>
    Enable 404 fallbacks?<\/th> Sometimes Autoptimized JS\/ CSS is referenced in cached HTML but is already removed, resulting in broken sites. With this option on, Autoptimize will try to redirect those not-found files to “fallback”-versions, keeping the page\/ site somewhat intact. In some cases this will require extra web-server level configuration to ensure wp-content\/autoptimize_404_handler.php<\/code> is set to handle 404’s in wp-content\/cache\/autoptimize<\/code>.<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

    2. Lazy Load – Optimize Images<\/a><\/strong><\/p>\n\n\n\n

    Lazy Load displays images and\/or iframes on a page only when they are visible to the user. This reduces the number of HTTP requests mechanism and improves the loading time.<\/p>\n\n\n\n

    3. Heartbeat Control by WP Rocket<\/a><\/strong><\/p>\n\n\n\n

    Heartbeat Control by WP Rocket allows you to manage the frequency of the WordPress heartbeat API in a few clicks.<\/p>\n\n\n\n

    4. WP Super Cache<\/strong><\/a><\/p>\n\n\n\n

    This plugin generates static html files from your dynamic WordPress blog. After a html file is generated your webserver will serve that file instead of processing the comparatively heavier and more expensive WordPress PHP scripts.<\/p>\n\n\n\n

    \"WP<\/figure>\n\n\n\n

    The static html files will be served to the vast majority of your users:<\/p>\n\n\n\n