What is Page Speed ?
Page Speed is the amount of time it takes to load a web page. Most of the users expect to load websites below 2 seconds or less. If it takes more than 3 seconds, the site tends to have higher bounce rates and lower average time on page.
Why does the website become slow ?
There could be many reasons for the low page speed. It might be because of server load time, image size, a number of redirects, page weight.
What factors affect the Page Speed ?
- Prioritize Visible Content
- Minify Resources
- Optimize Images
- Optimize CSS
- Optimize Scripts
- Use Asynchronous Scripts
- Avoid Redirects
- Leverage Browser Caching
- Enable GZIP Compression
1. Prioritize Visible Content :
2. Minify Resources :
Minification of resources means removing the unnecessary or redundant code which is present in the file. Minification can be done to HTML, CSS, JS. There are many online minifiers.
3. Optimize Images :
Make sure to optimize the images. Large image size makes the page heavy and page speed high.
4. Optimize CSS :
Combine all the CSS and make it a single stylesheet and minify the file.
5. Optimize Scripts :
7. Use Asynchronous Scripts :
8. Avoid Redirects :
9. Leverage Browser Caching :
Leverage Browser Caching means how long the web browser should keep CSS, images, JS stored locally. By doing so, the browser will download less data while navigating through the pages, which will improve the loading speed of the website.
Add this piece of code in .htaccess file
## EXPIRES CACHING ##
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 application/pdf "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
## EXPIRES CACHING ##
10. Enable gZip Compression :
GZip is the method of compressing files to make pages smaller to improve loading speed.
How to enable gZip Compression :
Compression is enabled via web server configuration.
Different web servers have different instructions. Here are the most common ways to enable compression including .htaccess, Apache and Nginx web servers.
Enabling gzip compression via .htaccess file :
Add this code in .htaccess file to enable compression
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_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
Enabling gzip compression on Apache Web Server :
The above code will work for the Apache webserver as well. If in case that doesn’t work, remove that code and add the below code to .htaccess file
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
Enabling gzip compression on Nginx Web Server :
To enable compression in Nginx you will need to add the following code to your config file
gzip_buffers 16 8k;
# Disable for IE < 6 because there are some known problems
gzip_disable "MSIE [1-6].(?!.*SV1)";
# Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6
Before Optimization for Mobile Version
After Optimization for Mobile Version
Before Optimization for Desktop Version
After Optimization for Desktop Version