CrazyEngineers Archive
Old, but evergreen and popular discussions on CrazyEngineers, presented to you in read-only mode.
@Ankita Katdare • 04 Oct, 2013 • 2 likes
If you are running a Google PageSpeed test on your website, chances are that you have landed up on a suggestion from Google that you need to eliminate render blocking javascript and CSS in above the field content on your Wordpress website.
The error will say something like - Your page has 3 blocking script resources and 4 blocking CSS resources. This causes a delay in rendering your page.
You desperately need to fix this issue and improve the loading speed of your webpage. So, how do you go about it? Read on to find out -

The best way to tackle this issue is by installing the W3 Total Cache plug-in ( https://wordpress.org/plugins/w3-total-cache/installation/ ) on your wordpress blog.

The following steps below will show you how to minify and inline render-blocking JS and CSS files on your WordPress site to improve its speed.

1. To get started with - You need to keep a list of all resources render-blocking JS and CSS on your WordPress site by running a PageSpeed test. So run the test and use every single URL listed there.

2. After installing the W3 Total Cache Plugin, Go To Minify Settings.
Go to Performance – General Settings – Minify Section.
  • Check Enable box
  • Minify Mode - Enable
  • Minify Cache Method - Disk
  • HTML Minifier - Default
  • JS Minifier - JSMin
  • CSS Minifier - Default
Save the Settings.

3. Move in to HTML & XML Section -
  • Check Enable Box
  • Check Inline CSS minification
  • Check Inline JS minification.
4. In JS Section -
  • Check Enable box.
  • Select ‘Minify’ under Operations in areas.
  • Select ‘Non-blocking using “async”‘ as Embed Type in Before
  • Select the current theme of your WordPress site.
  • Click Add a Script button then paste the URL of the JS file that needs to be optimized. (Refer to the list that PageSpeed provided.)
  • Select All Templates, Embed in <head> then click Verify URI.
5. In CSS Section -
  • Check Enable box.
  • Select the current theme of your website in the drop-down list.
  • Click Add a Style Sheet button then paste the CSS file URI that needs to be optimized in the box provided. (Refer to the CSS file URIs that PageSpeed provided to you.)
Click Save all Settings.

6. Enable HTTP compression
  • Go to Performance – Browser Cache.
  • Check ‘Enable HTTP (gzip) compression’ in CSS & JS Section.
  • Click Save all Settings.
  • Now, empty all cache. To do that - Click Performance in the Admin Bar then select ‘Empty All Caches’
Now take the PageSpeed Test again and verify if there is an improvement in the results.
@tonytong • 09 Dec, 2015 i find a free online service to minify js and compress css , so it will reduce the size of web page.
5.3k views

Related Posts

@madhuri s · Sep 26, 2011

hello, i am madhuri...... i need latest topics for the technical seminar for 8th sem BE, computer sciance branch thank you
4.5k views

@SHRIKANT CRAZY · Feb 6, 2012

Hello all, I am Shrikant - a crazy electrinics engineer from Jalandhar. I want to know details about transition capacitance. can anyone please help me? Any kind of help is...
7.6k views

@Morningdot Hablu · Feb 11, 2010

i know that ram is a volatile memory ...but is it possible to store some data permanently in ram memory....???? i mean is it possible to use ram memory as...
7.4k views

@070790vivek · Feb 10, 2010

in a automobile every electrical equipment needs a earthing then how it provides? is there any common wire which remains in touch with the ground or automobile body? but in...
6k views

@Sanyam Khurana · Jun 3, 2014

I want to know if a website can be displayed inside an android app... Of course, app needs to run only that particular website, so no need to enter url...
4.9k views