Improving page speed: prioritizing content

Every web developer knows how important it is to optimize his websites' performances to offer the best user experience to our visitors. And probably almost every web developer knows what Google PageSpeed Insights is and how many aspects of our website we have to monitor and adjust to get the maximum loading speed from our server. This is the first of a series of articles where I want to explain you in detail how to improve your page performance. In this first article we'll see how to increase the page loading speed prioritizing content.

When you test your web page with PageSpeed Insigths, you're likely to get the following suggestion:

Reduce the size of the above-the-fold content

What does this mean? You can read this page to know what exactly Google means, but essentially it means that you have to change the way your html is rendered. In other words, you have to load first what the user see first and defer the download of the any other resource. If you want a step-by-step how-to, go on reading.

Identifying the above-the-fold content

The first thing we have to do is to identify the section of your page which is rendered first. Personally, I do this using a resolution of 1920 x 1080 in order to be sure to involve in optimizing process the major part of the users (if what I mean is not clear, I explain: in a monitor has a resolution of 1366 x 768, as the majority of notebook has, it will display a certain section of your page; but if the monitor resolution is higher, the section of rendered page will be larger so if you have optimized your page at a low resolution, in larger monitors will be present non optimized elements and this will slow down the rendering speed).

So, set your monitor resolution to the maximum value available, open your browser and navigate to your web page. Once the page is fully loaded, press F12 to open the developer tools and undock it.

Once developer tools are undocked, you can see the full page section rendered by the browser and identify all that parts that are immediately available. The next step is to give the browser all the necessary information to render that content the right way, that is the css rules that must be applied.

Identifying the necessary css rules

Be sure to set the Elements tab active in Google Developer Tools window (the same in Edge, whereas in Firefox the right tab to use here is called 'Inspector'). This tab is splitted into 2 panels: at the left side you see the html markup of your document and at the rioght side the css rules that apply to the selected element. Just select each visible element of the page and be sure to copy all the rules that apply and paste them in a new css file. It doesn't matter the name you give this file, it's just a temporary file we use to collect all css rules we need to render the above the fold content.

Keep in mind that if in the visible section of the page you are using some icon (such as FontAwesome icons or Foundation icons) you have to get even the rules required to display those icons!

Minifying css in the head section

Once you have all the rules required to render the above the fold content, you need to minify them, that is delete any superfluous space or blank line you have in your temporary css file. To do this you can use a plugin of yout code editor of choice, a stand-alone program or even some online service. Personally, I have used this Css minifier: it's very easy to use and it doesn't require any installation. Just copy all the content of your temporary css file (Ctrl + A, Ctrl + C) and paste it in the left side box (Ctrl + V) called "Input CSS", then click the blue Minify button and in the right side box the minified css will appear almost instantly. Copy it and paste it in the head section of your page, immediately after the last meta tag, wrapping it with the <style> tag.

Deferring the download of other resources

Now we have to deal with the rest of the css we use in our web page. First, create a new css file and call it style.css. In this file we're going to past all and every css rule used in our web page. To be sure our new file preserve the right sort order of teh css rules, we'll use the sequence of the link to css files we have in our web page. If you use Bootstrap, you're likey to have the link to bootsrap before the links to any other css file, isn't it? Good, open your bootstrap.min.css, copy the whole content and paste it in your styles.css. Do the same with any other stylesheet you are using and be sure to delete the link to that file from your <head> section. If some of you css files is not minified yet, use the css minifier to minify its content and paste in your styles.css the minified version.

Once done, you should end up with a huge, unreadable css file: what to do with that? We'll write a small piece of Javascript to ensure that file will be downloaded only after the entire document has been loaded. Let's do it.

In the footer of your web page, immediately before the </body> closing tag, add this:

<script type="text/javascript">
    function downloadCssAtOnload(){
        var d=document.head, n=document.createElement("link");
        n.type="text/css", n.rel="stylesheet",n.href="css/styles.css",d.appendChild(n)
    }
    if (window.addEventListener){
        window.addEventListener("load", downloadCssAtOnload, false);
    }else if (window.attachEvent){
        window.attachEvent("onload", downloadCssAtOnload);
    }else{ 
        window.onload = downloadCssAtOnload;    
    }
</script>

Let's analyze it. First we have the function downloadCssAtOnload(). This function is simple indeed: it just create a <script> element and sets all its attribute to the desired values, then it appends it to the document. Practically, when this function will be called, the following lines of code will be written in the <head> section of our document:

<link type="text/css" rel="stylesheet" href="css/styles.css">

The rest of the code just sets how to call the function downloadCssAtOnload() when the document has been loaded: accordingly to the user's browser features, we'll use the window.addEventListener() method, the window.attachEvent() method or the window.onload() method.

What about the javascript?

Good point! You can do exactly the same with your javascript. First create a new javascript file which holds all the javascript your web page uses (don't forget to minify it). Then remove alll script elements from your document footer except our small snippet above. Finally add similar code to defer the loading of the javascript. The final result should look like this:

<script type="text/javascript">
    function downloadCssAtOnload(){
        var d=document.head, n=document.createElement("link");
        n.type="text/css", n.rel="stylesheet",n.href="css/styles.css",d.appendChild(n)
    }
    function downloadJSAtOnload(){
        var d=document.createElement("script");
        d.src="js/javascript.js",document.body.appendChild(d)
    }
    if (window.addEventListener){
        window.addEventListener("load", downloadJSAtOnload, false);
        window.addEventListener("load", downloadCssAtOnload, false);
    }else if (window.attachEvent){
        window.attachEvent("onload", downloadJSAtOnload);
        window.attachEvent("onload", downloadCssAtOnload);
    }else{ 
        window.onload = downloadJSAtOnload; 
        window.onload = downloadCssAtOnload;    
    }
</script>

The new code will append following line in the footer of your document:

<script src="js/javascript.js"></script>

That's all. Now retry to test your page with PageSpeed Insights and you should be able to see a relevant improvement of your score.

What else?

To further improve our page performance we have still a lot of work to do but for the moment just take a break. In the next articles of this mini-series we'll see how to optimize our images and how to setup the .htaccess.

If you have some comment, feel free to write it down here: I'll be happy to hear your thoughts :)

The post Improving page speed: prioritizing content appeared first on codingfix.