Factors impacting your website speed and how to optimize

Slow website speed

Most of the web designers/developers spend their time optimizing the website once it is completed and sometimes it’s frustrating to find the real reason for the website being slow. The optimization techniques need to be followed all along the designing process. I will explain the factors which impact website speed and how to put all things together to make websites faster.

In this blog post, I’m going to cover mostly the factors that impact static websites. I plan to do another post for dynamic/wordpress site’s optimization sometime later.

Factors impacting your website speed (in no particular order).

Internet speed 

Thanks to 4G (and soon enough, 5G), most of the users have good internet speed on their phones and users browse a lot of websites on their mobile devices (phones/tablets/iPads). You have no control over Internet speed so keep in mind that some users might be browsing websites on slow internet connection.

Server

Deciding the server or hosting for a website is one of the most important factors which designers and developers generally do not think about. If server response is not good, it will impact the website speed. 

Let me give you an example, when a user opens the website, the browser sends the request to the server and server responds to the user’s machine (browser). Server response time which refers to “Time To First Byte” TTFB should be faster. If TTFB is slow your website becomes slow. 

Server Location

You need to have an idea from where most of the  visitors will come to your website. If most of the visitors of your website are from the U.S. and your server is located in Europe, the response time might be longer than that of a server which is located in the US. It’s better to choose a server location that’s geographically near to your most of the visitors. 

File sizes

The larger the file size on your page, the longer it will take load. File size should be optimized. whenever you upload the file on the server, make sure the file size should be optimized and the less file you put on the page, the website will load faster.

Traffic 

Website traffic can also make your website slow. If you have heavy traffic and your server resources are not capable of serving requests up to the mark, it will definitely impact your website’s performance 

The Code

Poorly written code can impact the website negatively. You have to follow standard practice to code your website. It does not matter in which language you write your code, the code should follow the standard of the particular language.

Too many resources

Putting too many resources (CSS, JS) in your website will make your website slow. Try to make do with lesser resources or files.

Thankfully, you’re not left to fend for yourself and there are some great (free) tools available that can help you check the website performance.

Tools to check the website speed.

On your local machine

Always check the website on your local machine first. Developer options in the browser is your good friend. If you’re a chrome user, check the network tab in the developer tool, check the access time and total time under network tab, how much time it takes to download the resource.

Google page insight

You can check the google page insight to get ideas on how to improve your website. It gives you the points on which you need to focus.

You can also use Gtmetrix, Pingdom and webpagetest to measure your website speed. With help of these tools, you now know what are the problematic areas, now the next part is how to optimize it.

How to Optimize your website

1. Optimize Images

Optimise your images before using them. There are plenty of tools available to optimize the image. You can use online tools like –  image compressor, Imageoptim for mac, trimage and many more.

2. JS code in footer

Always try to put theJS code to the footer as it will block the loading of the page if it is in the header of the website.

3. Browser caching

Browser caching stores webpage resource files on a local computer when a user visits a web page, enabling browser caching can help to load web pages faster. You can enable browser caching in .htaccess file. Put below code to your .htaccess

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##

4. Enable gZip

Gzip is a method of compressing files (making them smaller) for faster network transfers. The code below can be added to your .htaccess file

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

5. Minification

Try to add js and css file in minified format, It will decrease the file size of the resource. You can use jscompress to compress JS files and css compressor to minify css.

6. Inline small resources

Try to merge a small css/js file into one file or put the small css/js inline to HTML code. It will decrease the resource size and will help to load web pages faster.

7. Avoid CSS @import

Importing css using @import in external css can add more delay in page load. Try to merge with external css or add a new css file that can load faster.

8. Scaling Image

One of the common problems with designers is they make one image with AxB size and use the same image at multiple locations with different sizes. Try to make a scaled image for every location.

Conclusion

There are hundreds of ways to optimize your website. I listed only a few, It will definitely help you to improve your website speed score.

1 reply added

  1. Prerna April 22, 2020 Reply

    Very helpful,Thank you so much sir.

Leave your comment