Who does not like blazing fast websites, that take no time to load and always serve great content. There are websites that have great design and content but tend to be slow due to many factors, for example loading images and other assets that are not optimized for the web.
I recently had issues with my internet connection, it was a 25 Mbps connection dropping below 500 Kbps, pages took ages to load, my own site felt slow.
Painful 4 hours, but an eye-opener, I felt the discomfort of a user with a slow connection who had to repeatedly refresh to prevent a (server) timeout or incorrect render of the page.
Since then, I have decided to do the highest level of optimization for personal and client projects.
When you have a fast internet connection, you don’t care about loading time, all the content renders in less than 3 seconds. The only time you feel pain is when the connection is slow.
PageSpeed Insights an industry standard performance testing tool used by programmers and non-programmers, what makes it so great tool is how it provides information in a simplified way and recommends changes that follow good standards and practices when the scores don’t turn out to be in the good zone(green) making it friendly to a non-programmer, plus it comes from a tech giant.
Waiting for a while, screen for too long and seeing the browser render the web page in pieces, imagine you visit a website on a fast internet and for 6 seconds there is just a white screen, most would quite and not everyone has a faster internet connection or time to see a web page load partially and render progressively, then you realize the web page has not loaded correctly because only one of the 6 stylesheets are loaded and you have 5 more to go, already feel the burn? right. I almost forget to mention about the high-quality image that has yet to load.
Later you know it was powered by WordPress and the admin installed all the plugins he desired off, without thinking about bloating of the front-end with unused and unnecessary stylesheets and scripts.
``` ..reset.css ..base.css ..layout.css .main.css ``` ``` At the end have a single. `````` main.css ``` ``` which will reduce the number of render block and load up time. With the pipeline process, we can also add another level of optimization which will reduce the file size drastically, this process is called minification, there is an example. Unminified(before) `````` body { font-family: sans-serif; background-color: #fff; margin: 0 auto; } .container { max-width:1200px; } ``` ``` Minified(after) `````` body{font-family: sans-serif;background-color: #fff;margin: 0 auto;}.container {max-width:1200px;} ``` ``` It is the removal of whitespace, but removing of whitespace will reduce the file size and number of blank space the browser has to render. Another optimization tip, I have seen developers ignore is removing unnecessary selectors,classes and attributes,declarations, once the project has reached a certain face of development there are a lot of changes that have taken place, in simple words there is a lot of unnecessary elements that have to be cleaned in project clean up face, for example, if you don’t use tables in any party of the page, it is recommended that you don’t have it in your stylesheet, it is unnecessary information that is not being used by the browser and only increasing the file size. A better workflow, use pre-processors like Sass, Less, Stylus, PostCss. If you are that dev who uses Bootstrap, then for the love of God, use pre-process and include only those partials/parts that are being used and minify the output. I have seen some websites that use Bootstrap 3 and include bootstrap.css and bootstrap.min.css, not sure why maybe the dev has reached next level. Compress scripts Minify JavaScript, there is an example Unminified. `````` var message = "Hello Web, I am the unminified script"; document.write(message); ``` ``` Minified. `````` var message = "Hello Web, I am minified script";document.write(message); ``` ``` If you use CoffeeScript and TypeScript as JavaScript pre-processor, you could set the output to be minified and have a pipeline similar to what I had mentioned about stylesheets. Frameworks To do simple tasks, always use vanilla JavaScript, don’t use frameworks for simple tasks. Async Morden browsers support async scripts, this means you can specify scripts to load async, however, you should use async only for scripts that don’t have dependencies. Don’t make dependencies async as the browser will throw console error and scripts depending on them will fail to render. You can achieve this by adding async to the script tag. `` Async does not work with inline JavaScript, so scripts (example below) don’t support async. `` Compress web page Minify HTML, this is not a common practice and majority of websites miss this part, as I have mentioned earlier, whitespace is extra space ignored by the browser and an increase in file size, minifying the HTML, should do a big impact. Compressed web page example `Example ` Pre-processors Pug/Jade is indent based HTML pre-processor, which by default uglifies/minifies the HTML. Pug/Jade example. `````` doctype html html(lang="en") head meta(charsett="utf-8)" link(rel="stylesheet" href="/css/main.css") title= Example body .container Ultimate optimization. After doing all of this you would score 90/100, which is a good score, but there would be still render blocking. Load the complete stylesheet inside the head with style minified tag, this will remove the stylesheet render block ``` ``` “` You could do the same with scripts, if they’re very important or if you have scripts after the opening tag or inside the head, move it to before the closing tag. Leverage browser caching. Leverage browser caching is a way to inform the browser to keep specific files on the client, so the next visit is much lighter and faster, these files are assets, stylesheets, and scripts that don’t frequently update. If you have access to the server you can set the header of the site to tell the browser how long and what to cache. If you are on a shared hosting that uses Apache2 and don’t have SSH access, you could do this by specifying it in the .htaccess, if you have access don’t use the .htaccess instead, edit the server config. Server Optimization This is to the folks who have server level control. If the site you are hosting is running WordPress or Drupal, update to the latest stable version and switch. Do a plugin check for CMS users and switch to PHP7, It is faster than PHP5 and currently latest stable version of PHP, before careful over plugins as production does not display errors and you don’t want to risk security and see the white screen of death. If you are an Apache2 user, SWITCH TO NGINX!!! Doing all of this optimization correctly should give a 100/100 on Google Page Speed Insights, if not or you are have an issue, drop me a line. We can work together.e. We can work together.