CiyaShop User Guide

The two factors involved in reducing load time of site are as below:

1. Limiting the scripts to minimum number of files as possible.

WordPress sites are especially susceptible to loading many scripts upon page load. This is because plugins and themes generally have their own scripts that need to be loaded in order to function. In some websites, developers would manually combine them to reduce the overhead upon page load.

2. Deferring the loading of “non-critical” scripts.

It includes moving scripts to the bottom of the page. When a browser is loading your page, it typically loads things in parallel until it encounters a script. And while working on a script browser load only scripts nothing else. Once the script is loaded, the website can continue rendering everything else. You can see how, especially if you have many scripts, this can affect your page load time.

Steps to Resolve the “Render-blocking JavaScript and CSS” PageSpeed Error:

Step 1. Resolve any render-blocking plugin scripts by adjusting plugin settings, if possible.

Google PageSpeed help you to determine which render-blocking scripts coming from a plugin you need to adjust. If you are able to identify any plugins from the list of scripts, go to each plugin’s settings, one by one, and search for a setting that will defer the JavaScript or load it asynchronously. If you are unable to identify any plugins from the list of scripts, or if you do not have any of these plugin settings available to you, continue on to step 2.

Revolution Slider settings :

Do the following :

1. Revolution Slider “Global Settings”:
– Include RevSlider libraries globally: ON.
– Insert JavaScript Into Footer: ON
– Defer JavaScript Loading: OFF.

2. After changing individual plugin settings, clear your cache and test properly.

3. Check PageSpeed insights. Making these changes to Slider Revolution helped reduce the number of render-blocking scripts your site had, but you still need help from other plugins to clean up everything else.

Step 2. Resolve the CSS file from render-blocking

Install the “Autoptimize” plugin and check the following settings:

• • Enable Optimize HTML code
  • Enable Optimize JavaScript code
  • Enable Optimize CSS Code
    • “Inline and Defer CSS”

These options help you to place “above the fold” CSS in the header so it is loaded first before loading the rest of the CSS script. This allows the above-the-fold content styling to load first so it will be rendered as quickly as possible for the visitor.

Following guide will help you to enable these options.

I. IDENTIFY All of Your Site’s CSS.

A.) Open Autoptimze (Settings –> Autoptimze), and tick the “Inline All CSS?, Remove Google Fonts? and Also aggregate inline CSS?” option (click all images below for a larger view):

B.) Then, click “Save Settings and Empty Cache” at the bottom of your Autoptimize dashboard.

C.) In another browser tab with an empty cache, open your homepage’s source code (right click –> open source).

D.) Your HTML will (likely) be huge now. Copy everything between the <style type=”text/css” media=”all”> and ending </style> tags.

II. EXTRACT the Critical CSS.

A.) Open this Critical Path CSS Generator and enter your site’s homepage URL into the field under #1 (“URL”).

B.) Paste the code you copied from your source into the field under #2 (Full CSS).

C.) Click the ‘Create Critical Path CSS’ button, and you’ll get something like:

D.) Copy the generated CSS code.

III. APPLY Critical CSS.

A.) Go back into Autoptimize, and tick the “Inline and Defer CSS?” option.

B.) Enter the code you copied from the Critical Path CSS Generator into the field under the Inline and Defer CSS option box. Like:

C.) Click “Save settings and Empty Cache” at the bottom of your Autoptimize dashboard.

And that’s it! You’re good to go.