What you should do to optimize your website loading speed?

First of all to before knowing the main factors of website loading, we need to know How the website is loaded….make sense?

In the web optimization we spend a lot of time just monitoring what we are requesting from the server and what we are receiving and the duration of receiving the content from the server wether it’s ( html, css, assets including graphics, videos, fonts or embedded content like youtube videos or any forms or other tracking libraries included in our websites)

To make it simple, it’s all about what you are requesting and receiving from the server:

client server response

And to get into details what exactly your server is responding to your clients with, you need to analysis your network loading you can use the chrome dev tools for that and this is how it looks like:

Now we will deep dive into the main 4 factors that will boom your website loading speed:

1- Minifying the css files.

All your css should be minified you need to remove :

  • White space characters
  • New line characters
  • Comments
  • Block delimiters

You can do it manually by using this awesome minifier

or automate it using another application like CodeKit

2- Minifying the js files.

The same we did with css files we need to do with the js files, we need to remove:

  • White space characters
  • New line characters
  • Comments
  • Block delimiters

And we need to make sure our libraries didn’t have any conflict with each other. As I saw in many case studies sometimes we use different big libraries to do small functionality that we can replace the whole library with 1 or 2 jQuery lines.

3- asynchronous loading for js libraries.

This is the magic of the loading the javascript instead of keeping our website waiting the responses from the server, we started to make sure the content above the fold is loaded and load the other js lib in asynchronous load by adding the word async  to our js files.

By example:

if you are calling you js file in this way:

Normal Js loading: <script src=”script.js”>

Call it in this way: <script async src=”script.js”>

yes it’s that easy and this is how it will look like in your network analysis.

4- optimizing images:

it’s very staring forward and it’s one of the most important factors and every time I’m optmizing a website I found this factor is totally broken, before uploading any images into your files you should optimize it first using any online optimization tools like Optimizilla or Kraken.io 

And for wordpress we can use some tools that will optimize all the images assets into your website like wp-smush-pro  plugin.

5- selecting the right hosting plan:

This step you should have a prerequisites of dealing server and hosting and select the write server that will serve your number of vistores with a high speed.

Ofcourse, depending in the could hosting like google cloud or amazon web services is super powerful but sometimes I have clients who don’t like to use the cloud services and at this time I ask them about the average number of the site visitors and based on that I provide them with suitable hosting package and my favourite 3 hosting are Bluehost, Siteground, and wpengine ‘for wordpress projects’

One last thing about the hosting, you should enable the Gzip compression in your hosting it will affect the transferring time for your files between the server and the clients.

And at the end if you Applied the previous steps into your website I can guarantee the best loading speed for your website.

Case Study

Case for optimized website, the site that you are reading the blog on it is already optimized:

Request a premium service to optimize your website: My services on Fiver

Author

Write A Comment