Page speed refers to the length of time at which website pages and media contents are being downloaded from the web servers and rendered onto the users’ web browser.
How important is it for a website to load faster?
A web page that loads anything slower than 400 milliseconds is already considered as slow. 1 in 5 visitors would likely to abandon the website if it takes more than 4 seconds to load the page. 40 percent of the user don’t revisit a poorly performing website. An ecommerce website as big as Amazon or eBay would lose more than a million dollars annually for every second that page load time is delayed.
Things to consider when Optimizing Website Pagespeed
Image optimization
Uploading raw or unoptimized images would lead to a slower website. An unoptimized image would have a file size more than 1mb. The bigger the file to download from the server, the slower the media content will be rendered in the web browsers. There are some aspects you need to know when optimizing images.
Image compression
There are ways to optimize your images, you can do it manually or you can automate the image compression using third party plugin or self-written code.
These are some online tools you can use for image compression
When automating an image compression, you need to decide where the optimization process will take place. Having the image optimization process run on the client side will decrease user experience, they may encounter some lagging on their devices especially when the user has a low-end device which is not optimized to cater the process for the image compression. Having the compression on the server-side can have some disadvantages too: you are putting loads of computations on your server which is not good for a high traffic website. The server can be down anytime if the code for optimizing the images is not well written.
There are lots of server side image optimization tools. Wordpress has plugins for image optimization like WP SMUSH.
Knowing where to use the image is also a key for optimizing pagespeed. Why upload an image that has a 1920x960px dimension if you are only going to use it as a thumbnail with a 400×400 dimension? Scaling and optimizing the image beforehand will decrease the load you give to the server.
JS and CSS minification
Reducing the file size of resources is a good example of pagespeed optimization. One can reduce the size of js and css file by minifying the codes. By minifying the codes you minimize the instructions you give to the browser to process at the same time you reduce the download length time of the file which is essential for pagespeed optimization.
CSS
- CSS can be minified using CSSNano, but it is important to know what options to choose when minifying your css code.
- Avoid using too many declarations when specifying an element in the DOM. Less declarations can increase the render of the style on the DOM.
- Concatenate css files into one css file, this one is not necessary if your server is HTTP/2.
JS
- JS can be minified using UglifyJS.
- Closure compiler is very helpful too. Closure compiler parses Javascript, analyzes it, removes dead code and rewrites and minimizes what’s left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls.
- Compiling all javascripts into one js file won’t have really much help when you are using HTTP/2
Using HTTP/2 over HTTP/1
HTTP/1 only allows one outstanding request per TCP connection. To bypass this limitation, the browsers implement multiple parallel TCP connections to every domain but this head-of-line blocking of HTTP/1.1 is a big blockage for faster loading.
With above shortcomings of HTTP/1.1, HTTP/2 or H2 was built over Google’s SPDY protocol. HTTP/2 allows multiple parallel requests on the same TCP connection. It reduces data redundancy. The server pushes the resources it believes would be required by the client instead of waiting for the resources to be called first, this avoids the waterfall effect of the resources to be downloaded on the browser.
How to check if you have HTTP/2 enabled
Some browsers already have a built-in dev tool you can use. One good practice is to take advantage of these dev tools in monitoring your website. You can access Chrome’s dev tools by pressing F12 or by right-clicking on the page and selecting “inspect” ( Ctrl + shift + I ). Chrome dev tools help you audit your website. You can run the audit by clicking the “Audit” tab in the dev tools menu.
Another way to monitor your web page is by using the Network tool in the dev tools. This helps you find and debug render-blocking scripts and resources which may slow down the page loading speed. In the waterfall column, you can see how long it takes for the resources to load.
Database Optimization
Your database also plays a part in page load time. An unoptimized database can slow down the loading time of your web pages. Consider using indexes and normalizing your database.
Normalizing a database
Sometimes developers neglect this procedure which would lead to a slower database query in the future. The purpose of normalization is to reduce and remove redundant data that may cause issues when creating, updating and deleting data in the database fields and to avoid queries on unwanted data.
Database indexes
Having database with data that doesn’t have an index can slow down the queries. Indexes are created for database columns so that queries don’t have to go through all the columns to search for a matching data, instead, it will only search through the indexes.
Website speed matters a lot!
Remember that saying about people having a shorter attention span than a goldfish? Well, if that is the case, then website speed can make or break the time people spend on your site! Just take into consideration all the factors I have mentioned above and try to access them on your own site. That way, you can minimize the risk of losing page visitors due to slow website speed and optimize your site for a better user experience!
