Hello, today I am going to describe how we can measure page speed and how we solve some issue that causes effect on page speed.
For measuring page speed there are various sites available. But we use gtmetrix for measuring page speed. Now just follow the following steps to test your page speed using gtmetrix.com
Step-1:
Go to gtmetrix.com
Step-2:
Login with your id if you have account or signup to create new account.
Step-3:
After login input your site url on the field “Analyze Performance of” and press go button to analyze your page speed.
Step-4:
gtmetrix then take few seconds and generate an report about your page speed.
From report I got page speed 98%. Now just focus only red boxes. For those problem I can not get 100% speed. Now I am trying to solve those issues.
First problem is leverage browser caching.
Now the question is what is leverage browser caching
The point of using browser caching and expiry headers is to reduce the number of HTTP request which improve the performance for your returning visitors. The first time someone visits your site their browser will fetch all your image, css files, javascript files etc. Normally that happens every time the same visitors come back to your site.
With expiry headers you tell your website visitor’s browser that the files you specify are not changing until after a certain time, for example a month.
This means that the browser does not have to re-fetch images, css, javascript etc every time your visitor comes back to your site.
How to add Expires headers
First look at your results in gtmetrix- what type of files do you have listed under “leverage browser caching” and “add expires headers”. I had the following files
Images, css, javascript.
Think about how often you change your different files and then decide for how long the can be cached in your visitors browser. Your option is:
Years, months, weeks, days, hours, minutes, seconds.
Now follow the following steps
Step-1:
Open a file named .htaccess
Step-2:
Add this line to your .htaccess file.
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
</IfModule>
It might be useful to add a “Default Directive” for a default expiry date, so add the following 2 lines also to your .htaccess file.
<IfModule mod_expires.c>
#Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”
</IfModule>
That’s the base. Now add all the lines for each of your file types.
Suppose for css add code to your .htaccess file
<IfModule mod_expires.c>
#Enable expirations
ExpiresActive On
#Default directive
ExpiresDefault “access plus 1 month”
#CSS
ExpiresByType text/css “access 1 month”
</IfModule>
Step-3:
Now upload this .htaccess file in your server in the same location besides your code.
Step-4:
Now test again your page speed using gtmetrix. And see the report
Focus on red marker. It becomes 100% now.
I will discuss about the rest of the issue in my next tutorial
Thank you…