Blog

Read About What We Love: Web Development & Technologies

Website Performance Hacks: Tips to Score Above 90%

A site with good speed is always a milestone for the developer to stand out in the crowd. Strategies are getting better from time to time and simultaneously, experts are redefining methods to improve the website performance; all to get the best out of the processes.

We are happy to publish yet another blog talking about Web Optimization along with a few tips specific to WordPress CMS optimization. Now we will discuss some tips to overcome unsolved issues that occur even when one follows standard policy. Not resolving them will keep us from achieving the maximum score that a site can achieve. So here are some best practices that can help maximize your website performance.

For General Sites:

1)  Using Google fonts is common in websites these days. Just adding a link on the header will incorporate the font styles; but adding a link will always add a request too. Basic web optimization policy recommends to limit the requests.  So, instead of using Google font links directly on the header, copy the font URL and open it in the browser. Now you will see the list of corresponding Google font classes, copy it to the main stylesheet. This will improve the speed of the site.

2)  “Optimize CSS Delivery” is one of the major unsolved issues in optimization. Compressing, minifying or reducing the lines of code will not solve the CSS delivery issue. Traditional method of referencing the stylesheet at the header will always stop page rendering until the CSS request responds with the data.

To overcome this issue, use the following script to async the CSS request. It means it will render the page without stopping even when the CSS file has been requested. Once the request responds with the data, it will apply to the page accordingly.

<script>

var styleHTTP = new XMLHttpRequest();

styleHTTP.onreadystatechange = function() {

    if (styleHTTP.readyState == 4 && styleHTTP.status == 200) {

                                    // Action to be performed when the document is read;

copyStyle(styleHTTP.responseText);

}

};

styleHTTP.open("GET", "/css/style.css", true);

styleHTTP.send();

function copyStyle(styles){

var ce, ct, et, ht;

ce = document.createElement("style");

ct = document.createTextNode(styles);

et = ce.appendChild(ct);

ht = document.getElementsByTagName("head")[0].appendChild(ce);

}

</script>        

Notes: Maintain separate stylesheets for template and other styles will helps us initiate only the template related CSS file at first for quicker response.

3) Avoid bundling the main stylesheet with other style files. Bundling is a good practice to reduce the requests and increases the page speed. But ideally it delays the page rendering by bundling the main stylesheet as well. Basically, bundling request gets completed only after all the grouped files are responded to with data. Until that happens page rendering is stopped. To overcome this delay, at least dequeue (separate) the main stylesheet from bundling and include it as per seen in step 2.   

     

For WordPress Sites:

WordPress is the world’s most popular CMS. Its light weight theme and simple architecture make it among the topmost CMSes. While coming to WordPress’s website performance, along with the standard policies we have mentioned before in the previous article we also need some additional policies to increase the speed of the site.

Here are few additional tips for a WordPress site:

1) Everyone knows “Functions.php” is a key file in a WordPress theme. Making few corrections in functions.php file will increase the site’s score moderately. If you come across the following lines of code in functions.php, then comment on it, if it is not really used in the site.

    a. //wp_enqueue_style( 'twentyfourteen-lato', twentyfourteen_font_url(), array(), null );

Lato font from Google can be commented on if it is not used in the site.

    b. //wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.0.3' );

Genericons (Similar to fontawesome) are by default included in theme and it can be commented on if is not used.

    c. // wp_enqueue_style( 'twentyfourteen-style', get_stylesheet_uri() );

Calling the style.css file through functions.php will take time to respond and it causes render blocking issue. To overcome this issue, please follow step 2.

    d. //wp_enqueue_script( 'twentyfourteen-script', get_template_directory_uri() . '/js/functions.js', array( 'jquery' ), '20140616', true );

All theme related scripts are maintained under functions.js. Though you didn’t use some features of the theme, it still requests the file from client’s side. Comment the functions.js reference and include only the required libraries/files directly at footer. (Requires detailed analysis of the support files before doing this because it sometimes causes error)

2) Using multiple caching plugins doesn’t help us reach our site’s best potential. Try to limit the optimization plugins, also understand the plugin in depth for better control over it.

Here are few plugins which are used in the process

     a. BWP minify - This is to bundle the CSS files, enqueue/dequeue the files based on the dependency

     b. Gzip Ninja Speed - Global zipping

3) Using defer and async to the external script files without understanding the scripts will lead to functionality undefined. Also to avoid dependency issues, always reference the script files before "<?php wp_footer(); ?>".

Example:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js" type="text/javascript" async> </script>

<?php wp_footer(); ?>

Follow both web optimization tips we’ve shared in our previous blog as well as this current one and see the improvement of your site’s score to above 90%.

We encourage sharing best practices on technologies like Umbraco, NopCommerce and Zend with the community so all can benefit from it. If you have any doubts or enquiries, do feel free to contact us, our technology experts will be glad to help you.

Elizabeth Raj | Blogger

Naveen Kumar M | Senior UI developer

Leave A Comment

Bangalore – Paris – Aix-en-Provence – Geneva – Montreal

We love diversity and we work out of five fabulous cities, on 3 continents, and 3 time zones.


Contact us
We’ll get in touch with you ASAP!