How To Boost Your WordPress Website's PageSpeed Score: A step by step reference guide on how to pass every Google LighthousePageSpeed Performance Audit. by LePage James

Author:LePage, James [LePage, James]
Language: eng
Format: azw3, pdf
Publisher: Isotropic, LLC
Published: 2020-05-08T16:00:00+00:00

Normal JavaScript Execution. HTML Parsing paused for script fetching and execution.

Asynchronous JavaScript Execution. HTML parsing is paused only for the script execution.

Deferred JavaScript Execution. HTML parsing is never paused. Script execution happens after parsing is completed.

These graphics were sourced from BitsOfCo .

How do you actually implement the loading styles? It's just a simple addition to your existing code:

<script [defer]OR[async] src="script.js">

There's no "best" choice for loading style -- everything really depends on your situation.

Also -- You can also move the script in the actual HTML source of the page. For example, scripts essential to the page are typically loaded in the header, while scripts that are needed, but not immediately are loaded in the footer.

● If the script is below the content that's needed immediately, then it may be best to leave it as it is.

● If the script isn't dependent on other files and/or doesn't have any dependencies, async may be a good choice.

● Does it have a dependency on something in the page and isn't immediately required? It may be best to move it to the footer.

● Does it have a dependency on something in the page, needs to stay where it is, and impacts the initial loading of the webpage? Deferring it is probably your best bet.

Now that you understand how to fix this, here's some good news. With Wordpress, there are dozens of plugins that automatically implement the fixes mentioned above, while determining which strategy is best for your specific website. All you need to do is install, configure, and run it.

Wordpress has some amazing plugins (both free and paid) that can address your PageSpeed issues - specifically render blocking resources. We'll list some plugins that we use (both with SpeedOpp and designing custom websites with Isotropic , our parent company and digital agency) here to point you in the right direction. You can browse our blog to see tutorials regarding the implementation and setup of some of them.

WPRocket

WPRocket is our current favorite Wordpress speed plugin. It's paid, but extremely powerful - the price to value ratio is off the charts. It'll allow you to do a lot, but specific to this post, you can load Javascript deferred, exclude some files from this optimization (the important ones that are required immediately) and run the deferral in "safe mode" which attempts to automatically exclude essential scripts from the deferral. On the CSS side, you can automatically determine which CSS should be loaded asynchronously on your site, and apply that loading style (all as a background process). We love this plugin because it's super powerful (and easy ) for both developers and less-technical website owners.

WP Fastest Cache

WP Fastest Cache is a full PageSpeed plugin that included CSS and Javascript tools. It'll allow you to defer the loading of most scripts and styles, fixing the render blocking issue. Best of all its free and used by hundreds of thousands.

There are many, many more that can be found by searching Google or Wordpress.org for caching and render-blocking optimization plugins.

Plugins may fall short in some regards.

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.