CrazyEngineers
  • 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 ( #-Link-Snipped-# ) 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 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.
    Replies
Howdy guest!
Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.
Replies
  • tonytong

    MemberDec 8, 2015

    i find a free online service to #-Link-Snipped-# and #-Link-Snipped-# , so it will reduce the size of web page.
    Are you sure? This action cannot be undone.
    Cancel
Home Channels Search Login Register