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.
According to Google most users until 2020 will be using 3G, which is slow, but fast for developing countries.
If you score 100/100, you will have a wider audience, who would not want to have visitors from around the globe.
I will cover every area that will make your website/web app project score 100/100 but before we do that here is a list the advantages.
- Faster web page.
- Faster asset loading.
- Better search engine indexing.
- Better user experience.
The faster a web page will render that much better, content in text form will be read by the user much earlier, this will prevent the user to stare at a blank screen and wait for the content to load, instead, of quitting/exiting the page, he/she will head will other content is loading(slow connection).
Faster asset loading.
Assets like images, gifs, videos are very important parts of the web of today and aid the user with more visual content, instead of a wall of text, but these assets can be at times heavy and take a lot of time to load, due to various factors.
Better Search Engine indexing.
There are millions of web pages that a search engine bot has to index through and place in the right search tags, if a site is slow and takes the time to load, it might not index it well and some engines rate sites depending on the page speed.
Better user experience
Page loads fast, assets loads fast and the website is completely optimized for this device, what more does a user want, Once we have achieved every area of optimization we can completely focus on content.
The optimization level you can achieve depends on how much control you have on the site.
Image Optimization
As I have said before, images play a big role in our content, but using too many images can slow down the site and take large amounts of data. We have too many image formats, which is a good thing, we get a wider variety to choose from and work.
To the web, the best formats are JPG, PNG as they offer compression, and GIF, these are also common and widely used format. You must avoid TIFF and BMP(Bitmap) as their not web formats.
You can compress images using tools like Photoshop, GIMP and others, if you don’t already use any of these already or don’t prefer them for compression, I would highly recommend using ImageOptim, an image compressor for Mac, don’t use a Mac, that no problem, there are websites that compress images like Optimizilla and TinyPNG , that do the job well.
I personally recommend Optimizilla they have the smallest file size after compressing and do a great job and second is TinyPNG which supports APNG but has a slightly bigger file size when compared to Optimizilla, but that’s just a few KB. Go with what is available, as these are online services.
Compress Stylesheets
A lot of sites use multiple stylesheets, especially those that are powered by WordPress. Having multiple stylesheets in development can be considered fine, due to debug purposes, but in production, it is plain and render block for a web browser.
I would recommend using a pipeline to manage stylesheet, this way you can have something like this
..reset.css
..base.css
..layout.css
.main.css
Code language: CSS (css)At the end have a single.
main.css
Code language: CSS (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;
}
Code language: CSS (css)Minified(after)
body{font-family: sans-serif;background-color: #fff;margin: 0 auto;}.container {max-width:1200px;}
Code language: CSS (css)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);
Code language: JavaScript (javascript)Minified.
var message = "Hello Web, I am minified script";document.write(message);
Code language: JavaScript (javascript)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.
<script async src="/js/index.js"></script>
Async does not work with inline JavaScript, so scripts (example below) don’t support async.
<script> var message = "Hello Web, I am unminified script"; document.write(message); </script>
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
<meta charset="utf-8"/><title>Example</title><div class="container"></div>
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
Code language: JavaScript (javascript)“`
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.
