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,
- <IfModule mod_expires.c>
- ExpiresActive On
-
- # Images
- ExpiresByType image/jpeg "access plus 1 year"
- ExpiresByType image/gif "access plus 1 year"
- ExpiresByType image/png "access plus 1 year"
- ExpiresByType image/webp "access plus 1 year"
- ExpiresByType image/svg+xml "access plus 1 year"
- ExpiresByType image/x-icon "access plus 1 year"
-
- # Video
- ExpiresByType video/webm "access plus 1 year"
- ExpiresByType video/mp4 "access plus 1 year"
- ExpiresByType video/mpeg "access plus 1 year"
-
- # Fonts
- ExpiresByType font/ttf "access plus 1 year"
- ExpiresByType font/otf "access plus 1 year"
- ExpiresByType font/woff "access plus 1 year"
- ExpiresByType font/woff2 "access plus 1 year"
- ExpiresByType application/font-woff "access plus 1 year"
-
- # CSS, JavaScript
- ExpiresByType text/css "access plus 1 month"
- ExpiresByType text/javascript "access plus 1 month"
- ExpiresByType application/javascript "access plus 1 month"
-
- # Others
- ExpiresByType application/pdf "access plus 1 month"
- ExpiresByType image/vnd.microsoft.icon "access plus 1 year"
- </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,
- <IfModule mod_deflate.c>
- # Compress HTML, CSS, JavaScript, Text, XML and fonts
- AddOutputFilterByType DEFLATE application/javascript
- AddOutputFilterByType DEFLATE application/rss+xml
- AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
- AddOutputFilterByType DEFLATE application/x-font
- AddOutputFilterByType DEFLATE application/x-font-opentype
- AddOutputFilterByType DEFLATE application/x-font-otf
- AddOutputFilterByType DEFLATE application/x-font-truetype
- AddOutputFilterByType DEFLATE application/x-font-ttf
- AddOutputFilterByType DEFLATE application/x-javascript
- AddOutputFilterByType DEFLATE application/xhtml+xml
- AddOutputFilterByType DEFLATE application/xml
- AddOutputFilterByType DEFLATE font/opentype
- AddOutputFilterByType DEFLATE font/otf
- AddOutputFilterByType DEFLATE font/ttf
- AddOutputFilterByType DEFLATE image/svg+xml
- AddOutputFilterByType DEFLATE image/x-icon
- AddOutputFilterByType DEFLATE text/css
- AddOutputFilterByType DEFLATE text/html
- AddOutputFilterByType DEFLATE text/javascript
- AddOutputFilterByType DEFLATE text/plain
- AddOutputFilterByType DEFLATE text/xml
- # Remove browser bugs (only needed for really old browsers)
- BrowserMatch ^Mozilla/4 gzip-only-text/html
- BrowserMatch ^Mozilla/4\.0[678] no-gzip
- BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
- Header append Vary User-Agent
- </IfModule>
Summary
In this article, we have learned Site Speed Parameters.
I hope that you found this tutorial easy to follow and understand.