Fix Above the Fold, Render Blocking & Defer CSS & JavaScript WordPressAntonio DimitrovskiBlockedUnblockFollowFollowingFeb 3Fixing above the fold, render blocking and async or defer load of CSS and JavaScript is easy following this tutorial.
WordPress optimization everyone should do after installation.
Even though is the best CMS it’s suffering from slow website loading without optimization.
Slow website leads to losing visitors and more importantly losing potential customers.
Start with choosing web hosting my top 3 are:SiteGroundA2 HostingiPage (saving you a lot of money — annual plan)I’ll show you how to optimize WordPress, so the website can load time under 1 sec which is great for ranking to Google as well.
This is what you will get after optimization:myhostingfacts gtmetrix scoreThese are the optimization needs to be done:Create a child themeAbove the fold (critical) CSS, combine, minify and load asynchronouslyMinify, combine and defer JavaScriptChange size, compress and lazy load imagesFiles expiration date or leverage browser cachingCaching solutionChoose web hostingOptimizing WordPress will lead to more users, less bounce rate, better Google rank and it’s something you must do to your website.
testmysite.
withgoogle.
com speed.
myhostingfacts testmysite.
withgoogle.
com speedHow to optimize above the fold CSS, combine, minify and load asynchronouslyCompressing, minifying, combine and use critical CSS for above the fold is ¼ of optimizing a website for speed.
Using WordPress means working with multiple CSS files not just from the theme but also from plugins (ex.
Jetpack).
You want those CSS files combined into one, minified and compressed.
Create a child themeCreating child theme in WordPress is so easy.
Use child theme configurator plugin to create a child theme with files that you need following this steps:From WordPress dashboard->Tools->child themes.
Tick create a new child theme.
Select a parent themeClick AnalyzeGive the child theme directory nameSelect primary stylesheetDo not add any parent stylesheet handlingShow hide attributes if you want to change child theme name or description (this will change name and description in Appearance->Themes)If you already made changes to the parent theme or you’ve been working with parent theme you can replace menus, widgets and customize settings.
Click create new child themeIgnore This child theme does not load a Configurator stylesheet.
Now click on the files button from child theme generator menu, here you can find all parent theme files, function.
php and CSS are already created.
I don’t recommend including other files but sometimes, someone maybe needs to import header.
php or footer.
php or another file.
Finally, go to Appearance->Themes and activate your child theme.
Minify, combine and defer JavaScriptMinifying JavaScript is also about ¼ of site optimization and it’s as important as a CSS.
Keep in mind, you can’t fix render-blocking JavaScript from third-party apps (ex.
Google fonts) or you should host them on your website, render blocking fonts won’t be a problem because they are cached by a big number of websites.
Paid and best solution right nowThere a few ways to optimize JavaScript but the easiest is to use WP Rocket.
Recently I’ve started using WP Rocket because of how he creates critical CSS for every page, post, archive, author, portfolio, etc.
even for custom post types.
WP Rocket features:Minify/combine HTMLMinify/combine CSSMinify/combine JSLazyLoad for imagesLazyLoad for iframes/videosOptimize CSS delivery (critical CSS)Defer JSAll of this above can be turned on/off for every page/post etc…This is the settings I’m using:wp-rocket-settings-2018–12–07–5c0a61bf09179 unzip JSON file, go WP Rocket tools upload file and import settings I’m using or do it step by step by enabling settings (see images below).
WP Rocket File OptimizationWP Rocket MediaWP Rocket Preload (WP Rocket will show other SEO plugin sitemaps generators if you have custom sitemap specify the URL), also you can prefetch DNS from the third party files/domains (I’m prefretching Google Fonts).
Advanced Caching Rules: If you have cookies, login, logout, shop, check out you can finetuning to exclude cache or specify on/off cache for query strings(I don’t have any of these so left it default).
Make database backup before use database optimization (just to be on the safe side if something goes wrong)WP Rocket CDN (the best CDN integration by far, you can choose multiple CDNs[if you have more than one CDN account] for diffrent files)WP Rocket Heartbeat (if you hit resources on your hosting you might want to reduce[all three have dropdown] or turn off[untick Controlheartbeat] heartbeat)WP Rocket Add-Ons (turn on Google Analytics, Facebook or Varnish cache[hosting that uses it ex.
WP Engine] to host the files locally[this wont give you speed boost but satisfy Google Page insights, GTMetrix etc…])Free solutionAbove the fold (critical) CSSI’ll recommend using plugin Autoptimize for combining all CSS files.
Follow this steps:After installing Autoptimize go to WordPress dashboard Settings ->AutoptimzeClick on show advanced settings (top right).
You will see an image like this one, tick the box optimize CSS code and the box Inline and Defer CSS.
Go to critical path generator and paste your URL and click GENERATE CRITICAL PATH CSS.
Copy everything without <style> and </style> at the end and paste it in Autoptimize.
From more than 1 000 000 characters it’s reduced to 15 500 (~1.
5% CSS used) characters that above the fold needs to load and after it’s finished the full CSS file will be loaded asynchronously and will not render block.
With Autoptimize we combined, minified, and fixed above the fold error from Google Page Insights, the compressing which is left will be finished by enabling Gzip compression with the caching plugin.
Check Gtmetrix, Pingdom or Google page insights and see the CSS results.
Image optimizationImage optimization can be done with plugins or with Photoshop.
True image optimization starts with size, you need to know what image size you need to your website I recommend about 1600×1200.
Limit image size to your needs.
Great plugins for image optimization(from my test they work only under 2MB, some warn you about that, some don’t):ImagifyKraken.
ioWP SmushShortPixelEWWW Image OptimizerIf you have a small to medium website free version will be enough, however, they all have premium plans for unlimited1usage.
1 They have limits depend on the plan but for one website the cheapest plan should be enough.
Photoshop can be used to reduce image size under 2MB and then you can use some of the plugins mentioned above.
Using only Photoshop isn’t enough, you will end up with images too big for web usage.
Export images for web legacy with photoshop.
Worth mentioning is compress image toolur.
They have good options.
At last lazy load images.
I recommend using a3 lazy load plugin, try to load it trough footer, if your theme doesn’t use wp_footer() use header option and defer JavaScript with Speed Booster Option or paste this code at the end of Appearance->Editor->function.
php.
Defer JavaScript manuallyfunction defer_parsing_of_js ( $url ) {if ( FALSE === strpos( $url, ‘.
js’ ) ) return $url;if ( strpos( $url, ‘jquery.
js’ ) ) return $url; return “$url’ defer “;}add_filter( ‘clean_url’, ‘defer_parsing_of_js’, 11, 1 );After you can move jQuery to footer if you don’t need load in the header(check if everything is loading as should):add_action(‘wp_enqueue_scripts’, ‘move_jquery_to_footer’);function move_jquery_to_footer() {wp_deregister_script(‘jquery’);wp_register_script(‘jquery’, includes_url(‘/js/jquery/jquery.
js’), false, null, true);wp_enqueue_script(‘jquery’);}File expiration date (Leverage browser caching)Can be done by a plugin or manually with .
htaccess.
Keep in mind you can’t control leverage browser caching to third-party files (ex.
analytics), testing pages like Gtmetrix, Pingdom and Google page insights shouldn’t be a problem for third-party files like analytics or Google fonts because they are cached by many websites in the world.
Use far future expiry header.
WordPress dashboard -> settings -> far future expiry header and enter 365 days as you can see in the picture below.
Personally, I always use the manual method .
htaccess.
Go to your web hosting file manager and go to the root of your website, there will be a file .
htaccess right-click opens it with editor (depend on your web hosting you may need to select and or from right to click edit).
If you can’t find .
htaccess you need to unhide system files.
Copy this and paste last (should be after caching and WordPress):<IfModule mod_expires.
c>ExpiresActive onExpiresDefault “access plus 1 month”ExpiresByType text/xml “access plus 0 seconds”ExpiresByType application/xml “access plus 0 seconds”ExpiresByType application/json “access plus 0 seconds”ExpiresByType image/x-icon “access plus 1 week”ExpiresByType image/gif “access plus 1 month”ExpiresByType image/png “access plus 1 month”ExpiresByType image/jpeg “access plus 1 month”ExpiresByType video/ogg “access plus 1 month”ExpiresByType audio/ogg “access plus 1 month”ExpiresByType video/mp4 “access plus 1 month”ExpiresByType video/webm “access plus 1 month”ExpiresByType application/x-font-ttf “access plus 1 month”ExpiresByType font/opentype “access plus 1 month”ExpiresByType application/x-font-woff “access plus 1 month”ExpiresByType image/svg+xml “access plus 1 month”ExpiresByType application/vnd.
ms-fontobject “access plus 1 month”ExpiresByType text/css “access plus 1 year”ExpiresByType application/javascript “access plus 1 year”</IfModule>Caching solutionThere are three best plugins that you should choose from:WP RocketWP Fastest CacheW3 Total CacheOriginally published at www.
myhostingfacts.
com on February 3, 2019.
.