⚡️ Speed up Wordpress by Eliminating Render-Blocking Resources On-The-Fly!

dailydose

#1

What is render blocking resources?

<link rel='stylesheet' id='xyz-theme-css'  href='https://example.com/wp-content/themes/xyz-themes/style.css?ver=2.2.3' type='text/css' media='all' />
<link rel='stylesheet' id='wp-block-library-css'  href='https://example.com/wp-includes/css/dist/block-library/style.min.css?ver=5.0.2' type='text/css' media='all' />
<script type='text/javascript' src='https://example.com/wp-includes/js/jquery/jquery.js?ver=1.12.4'></script>
<script type='text/javascript' src='https://example.com/wp-content/themes/xyz-themes/js/responsive-menu.js?ver=1.0.0'></script>
  • By default as CSS and JS are loaded in the old-fashion cause significant delay in rendering of the web page. The page start appearing in the browser when all CSS and JS of head complete loading. This is not cool.

Test at https://developers.google.com/speed/pagespeed/insights/

To improve the time to interaction, it’s better to load critical css (a part of CSS that comes in the above the fold of the HTML Document) first and rest later.

Steps to Eliminate render-blocking resources in WordPress

  1. Take backup and deactivate the feature of CSS and JS minifcation in your previous plugin.

  2. Install and activate PhastPress. This plugin deserves 5/5 rating, developed by Kibo IT.

  3. Purge your cache.

That’s it.


Finally, no more complaint render-blocking resources from PageSpeed insight of Google.

Before

After


What to not expect?

  • Removing unused CSS.

Conclusion

  • :100: Amazing! Outstanding work of the developer of this plugin. :pray:

  • Free, install and forget, just keep remember to purge full cache for the first time.

  • I am not sure either it will work with all caching plugins or not. The author recommends WP Super Cache, but I tried over W3TC + Varnish caching. Works flawlessly. I found noticeable difference in the performance.

  • By improving Document onload time, GTmetrix also didn’t failed to impress!

which was before like this … :arrow_down_small:

I hope this helps.

Edit: Added an example of render-blocking resources on the top.

Thanks & Regards,
Gulshan


#4

#6

Can we use Autoptimize with this or not ?
what about this option in Autoptimize

Force JavaScript in <head>? Load JavaScript early, this can potentially fix some JS-errors, but makes the JS render blocking.

can you please tell me, Which Javascript options & CSS options, we should select in Autoptimize settings ?


#7

No. You cannot use two similar plugin at one time. This is a basic guideline of WordPress to prevent slowness, error 500.


#8

This is awesome, thanks alot for sharing


#9

You’re welcome!


#10

is it better than autoptimize for speeding up website ? should i use this instead of autoptimize ?


#11
  • For fixing render blocking issue, Autoptimize requires its free add-on with another third party paid monthly subscription where this plugin is totally free. This is a difference.

If cost is not an issue, I would first prefer AO because I know that plugin since long.

This plugin I am still testing so far it’s good. It would take time to build trust.

AO has more functionality with hooks. It can be adjusted in many ways.


#12

The test is under progress. I will update as soon as possible. Please feel free to ping me!


#13

Thanks for the article but I have noticed, it stops lazy loading of some images. Actually it starts loading it from some other path of phastpress and that issue starts showing in google page speed insights.

Otherwise this is really a great plugin :slight_smile:


#14

Wow sir great …Can I use it with wo rocket?


#17

Sir cache is now doing negative things. I am not getting analytics updates. It showing less page views.


#18

It was loading some resources from phastpress URL for me, there were two URLs for the same files. So I removed it.


#19

Yeah, same for me.


#20

An update: I would not recommend PhastPress plugin any more. It appears multiple issues with this plugin. This topic will be deleted or updated with new method within 1-2 days.