You can do this by inserting the following code into your WordPress’s functions. They define how your site looks after all! But for the moment, we’re interested in using the “preload” attribute value to defer our external stylesheets. Basically, it tells the browser that the resources marked in this manner can be downloaded simultaneously in the background and that they’re not terribly important for page loading. To solve this problem, browsers have started supporting the “preload” attribute for resources like scripts. If you plug your page into a tool like Google’s PageSpeed insights for example, it’ll complain that a lot of stuff is preventing the page from displaying – and those tools will be right. This will place a element in the head that looks like this:Īs mentioned earlier, this CSS stylesheet is render blocking. Most CSS in WordPress is (and should be) enqueued properly using the “wp_enqueue_style” function. The tool will scan your website and eventually give you a blob of text like this:Ĭopy this and keep it safe. Speed up your Wordpress by loading 3rd party scripts on interaction by Miroslav lapka Nerd For Tech Medium 500 Apologies, but something went wrong on our end. For now, just visit a site like like, enter your site’s URL or page, and click “Generate Critical Path CSS”. The importance of this step will become evident after step 2. Unfortunately, this has some side effects that we need to take care of. So it’s a best practice to defer them ( not the same “defer” as with Javascript though). Which means that the browser doesn’t proceed until they’ve been downloaded. Normally, all externally linked CSS stylesheets are render-blocking. While it doesn’t improve your page load time, it makes a huge difference to how the user perceives the page to load. Knowing how to inline and defer CSS on your WordPress site is a vital part of improving the viewer experience.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |