Post
Ask Question

Site Speed Parameters

Improving the site performance is very tricky and getting a high score in it is even more difficult and on top of CMS frameworks as many plugins, tools, third-party services are used.
 
Still, we can consider some of the points of the performance on which we can work and get the performance score to an adequate level.
 

Optimize the images

 
I will not be suggesting the plugins for image optimization as almost all the free plugins providing these services do not optimize the images to the fullest. Only the paid plugins would give us the best results, but not every project can afford to have a paid plugin.
 
It is a great practice to keep optimizing the images along with the site work before we upload the images so at the end of the site it does not get a burden to do all at a time.
 
These are some great sites that provide the best optimization of images without compromising on the qualities.
  • https://tinypng.com/
  • https://compresspng.com/
  • https://compressjpeg.com/

Leverage Browser Caching

 
When the site is accessed in the browser by the user the server requests and all the files are called and requested separately. If the files are less then no issue but what if the sizes are more and there are a lot of files then the size gets big and the site slows.
 
So Browser caching comes there, the files are stored in the user’s browser so when the user next visits the same site it does not take a long time to load.
 
When we give the code for this browser caching then we give the expiry time so when that expiry time is finished it loads the specific files again until then it loads from the browser itself. If the time given is 7 days then the file will be requested anew after the time is expired.
 
We have to update the code for this caching in our site’s .htaccess file.
 
This is the sample code,
  1. <IfModule mod_expires.c>  
  2. ExpiresActive On  
  3.   
  4. # Images  
  5. ExpiresByType image/jpeg "access plus 1 year"  
  6. ExpiresByType image/gif "access plus 1 year"  
  7. ExpiresByType image/png "access plus 1 year"  
  8. ExpiresByType image/webp "access plus 1 year"  
  9. ExpiresByType image/svg+xml "access plus 1 year"  
  10. ExpiresByType image/x-icon "access plus 1 year"  
  11.   
  12. # Video  
  13. ExpiresByType video/webm "access plus 1 year"  
  14. ExpiresByType video/mp4 "access plus 1 year"  
  15. ExpiresByType video/mpeg "access plus 1 year"  
  16.   
  17. # Fonts  
  18. ExpiresByType font/ttf "access plus 1 year"  
  19. ExpiresByType font/otf "access plus 1 year"  
  20. ExpiresByType font/woff "access plus 1 year"  
  21. ExpiresByType font/woff2 "access plus 1 year"  
  22. ExpiresByType application/font-woff "access plus 1 year"  
  23.   
  24. # CSS, JavaScript  
  25. ExpiresByType text/css "access plus 1 month"  
  26. ExpiresByType text/javascript "access plus 1 month"  
  27. ExpiresByType application/javascript "access plus 1 month"  
  28.   
  29. # Others  
  30. ExpiresByType application/pdf "access plus 1 month"  
  31. ExpiresByType image/vnd.microsoft.icon "access plus 1 year"  
  32. </IfModule>  

Scaled Images and Sprite

 
If there is an image of 400 x 400 and we load it in the site but the size is 200 x 200 set.
 
We have reduced the size of the image to 200 with CSS. That is where this point comes. It asks us to use the exact size that we would use on the site.
 
It is difficult to manage but we can for some images where it is possible.
 
The sprite images are the ones with many multiple icons and using the CSS we show only the specific icons. So we can avoid loading all the icons separately and just load 1 file. That is a sprite image file.
 
Inline CSS and JS
 
If we create the JS and CSS files separately even for the small code lines then the server would request each file as a new request. So it is a good practice if there are the smaller code snippets then we can store them inline in a file to avoid request Or we can store all the codes in a JS file and load them.
 

JS and CSS minify

 
For this point, we can simply use the plugin which would minify all the files for us and improve the speed significantly.
 

Avoiding bad links and redirects

 
The links result in 404 pages or other broken pages and the redirects to other sites, if we avoid them the server does not spend extra time requesting the links which are not useful.
 

Enable Compression

 
When the request is made for the web page then the server makes a request for the files so if the files are big then it would take an equal amount of time loading them and show them in a browser so if we compress the files and send them over to server then the whole process gets smooth and gets the site speed fast.
 
We have to update the .htaccess file for compressing the contents of the site. gZip compression is the most used and simple.
 
This is the code we have to update in the file,
  1. <IfModule mod_deflate.c>  
  2. # Compress HTML, CSS, JavaScript, Text, XML and fonts  
  3. AddOutputFilterByType DEFLATE application/javascript  
  4. AddOutputFilterByType DEFLATE application/rss+xml  
  5. AddOutputFilterByType DEFLATE application/vnd.ms-fontobject  
  6. AddOutputFilterByType DEFLATE application/x-font  
  7. AddOutputFilterByType DEFLATE application/x-font-opentype  
  8. AddOutputFilterByType DEFLATE application/x-font-otf  
  9. AddOutputFilterByType DEFLATE application/x-font-truetype  
  10. AddOutputFilterByType DEFLATE application/x-font-ttf  
  11. AddOutputFilterByType DEFLATE application/x-javascript  
  12. AddOutputFilterByType DEFLATE application/xhtml+xml  
  13. AddOutputFilterByType DEFLATE application/xml  
  14. AddOutputFilterByType DEFLATE font/opentype  
  15. AddOutputFilterByType DEFLATE font/otf  
  16. AddOutputFilterByType DEFLATE font/ttf  
  17. AddOutputFilterByType DEFLATE image/svg+xml  
  18. AddOutputFilterByType DEFLATE image/x-icon  
  19. AddOutputFilterByType DEFLATE text/css  
  20. AddOutputFilterByType DEFLATE text/html  
  21. AddOutputFilterByType DEFLATE text/javascript  
  22. AddOutputFilterByType DEFLATE text/plain  
  23. AddOutputFilterByType DEFLATE text/xml  
  24. # Remove browser bugs (only needed for really old browsers)  
  25. BrowserMatch ^Mozilla/4 gzip-only-text/html  
  26. BrowserMatch ^Mozilla/4\.0[678] no-gzip  
  27. BrowserMatch \bMSIE !no-gzip !gzip-only-text/html  
  28. Header append Vary User-Agent  
  29. </IfModule>  

Summary

 
In this article, we have learned Site Speed Parameters.
 
I hope that you found this tutorial easy to follow and understand.


Similar Articles