In website, speed up page rendering is very important factor. Because if our page speed is fast then visitors can visit more pages on our site and can take a glance easily. We have to make our web pages fast but it’s not easy to optimize web pages at each and every scale. There are many factors that can slow down our web page speed. We are pointing out here some of the factors and some tips to achieve them.
1. Reduce server response time:
Server Response time is impacted by many factors but overall for this, we have to regular monitor and measure where our server is spending the most time.
In websites, some of the content on our pages could be rendered without waiting for the resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
The fewer requests to the server that the browser has to make, the faster the page will load.
There is an inherent overhead in each HTTP request. It takes substantially less time to serve one 60K file than it does three 20K files and a lot less than it does six 10K files.
Best way is that we have to
- Include small code to inline codes
3. Compressing the files:
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
There are plugin in WordPress which do the same thing like W3 Total Cache, WP Super Cache, which gives the option to compress the files.
Some Apache servers have this module already enabled (previously mod_gzip a 3rd party module in Apache 1, and now built-in in Apache 2 as mod_deflate)
In Apache, we can achieve the same by including below given code in .htaccss file:
# Insert filters
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
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0 no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
In these given types, we can add or remove the mime type which is creating us problem.
4. Leverage browser caching:
If we set an expiry date or a maximum age in the HTTP headers for static resources, it instructs the browser to load previously downloaded resources from local disk rather than over the network. Means if we load the data from local disk than from the server, it really increases the rendering speed.
In apache, we can achieve this by including few lines of code in .htaccss file:
# BEGIN Expire headers
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
# END Expire headers
# BEGIN Cache-Control Headers
Header set Cache-Control "max-age=2592000, public"
Header set Cache-Control "max-age=604800, public"
Header set Cache-Control "max-age=216000, public"
Header set Cache-Control "max-age=600, private, must-revalidate"
# END Cache-Control Headers
# BEGIN Turn ETags Off
Header unset ETag
# END Turn ETags Off
# BEGIN Remove Last-Modified Header
Header unset Last-Modified
# END Remove Last-Modified Header
5. Optimize images:
In most websites, content that has more images, often account for most of the downloaded bytes on a page. The images on the page can be optimized to reduce their file size without significantly impacting their visual quality. So optimizing images can often yield some of the largest byte savings and performance improvements.
The fewer bytes the browser has to download, the less use of client’s bandwidth and the content can be downloaded and rendered on screen more faster. We can get optimized images by using any optimizing tools like Google page speed extension to provide the optimized image.
By using these above given ways of speeding up the page rendering will really helps in your website performance and give us the benefit of coming in search criteria of search engines.