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.
Very helpful,Thank you so much sir.