What is Page Load time?
Website page load time is related to the loading time of your website page that loads in the browser after click on the page link.
It is an important SEO metric that Google Search engine take one of the aspects of search ranking in search result.
Benefits of reducing the page loading time :
Google always well take care of the customer's experience in their provided search and provide the best user experience. Page load time is one of the important on page optimization factors.
If page lading time is more than 2-3 sec, users are losing their attention and bounced to another search page.
So, Page load time is proportion to the bounce rate.
Page Load time is a vital part of user experience. Visitor's behavior changes on increase or decreases Page Load time.
Amazon have conducted a study on Page Load time with user experience shows user expect faster loading time and slower page load can lead a significant drop in revenue. the case study shows that 100ms page load time delay can drop 1% revenue.
A Infographic presents a stasistical Fact about Bounce rate and Page loading time.
The Infographic shows - How does page speed affect on user behaviour?
9.6% visitos bounced when page lead time is 2 sconds and 32.3% visitors bounced when Page load time is 7 seconds.
What is Google PageSpeed Insight?
Google pageSpeed insight is great tools for measuring and analysis your page load time and it analysis the web page and find the error or optimization factor that increase the page loading.
PageSpeed Tool test estimate your website's PageSpeed Insight Score and Page Load Time that uses Two indicators on Page Load Time - FSI and DCL.
PSI estimate the page and give you Optimization suggestion - Eliminate render-blocking Javascript and CSS, optimize images by reducing the image size and enable compression.
You follow step by step the PSI's recommendation and score high your PageSpeed Insight Score 100/100.
You can use the Pingdom PageSpeed Tool to analysis your website's page load time.
Pingdom: Pingdom is an online tool that analysis your website speed test and give all optimization tricks and suggestions.
1. Image Optimization
Image is an object in the article and you have to optimize the image that reduces the page load time. Image optimization factor lies on the image size and quality of the image.
Image compression is a tool that compress image without losing any image quality and reduce the image size up to 70-80% of the original image size.
There have many online image compression tools.
Compressnow is online image compression tool that compress images in various file formats.
2. Use WordPress Caching Plugin
What is cache in the browser?
Cache is a mechanism and data storage where store the data for future use the data that increases the webpage loading speed and it reduces the extra load in server.
For WordPress user, you should use WordPress Cache Plugin that will help to cache your web pages in the browser and it increase the webpage loading speed and reduce the webpage load time.
It saves time and bandwidth. It reduces the extra load of downloading webpage element from the server.
WordPress Cache plugins are:
W3 Total Cache is an excellent WordPress Cache plugin that cache your WordPress pages in the browser.
3. CSS minify
CSS minify is a tool and tricks to minimize the CSS code that don’t change the CSS design.
It minifies the redundant CSS code and it reduces the code size that increases the website loading speed.
CSS Minifier is an online CSS compression tool that compress the CSS code.
4. JavaScript Minify
JavaScript Minify is a tool which reduces the file size of the JavaScript code and finds the unwanted code which is eliminated the redundant code from source code.Redundant code is some the syntax or statements in the source code which does not affect the result. It only increases the code size or nothing. Whenever we write the code, then we declare some variable and statements which will help to understand human.
5. Enable GZIP Compression
Gzip compression is a tool that compresses the html file in zip file and reduces the file size up to 70%. It exceptionally reduces the loading time.How to enable the Gzip compression:
1. WordPress GZIP Compression
You can use WordPress GZIP compression plugin to enable automatically and it change and add the desired GZIP compression module in the .htaccess file.
2. Enable GZIP Compression in Apache
The simple way to enable the GZIP Compression is by editing .htaccess file. You just add the below code in .htaccess 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>
6. CSS Sprint
CSS Sprint is a method that combines multiple images in a single image. It cut down the all image requests in single image request.Single image contain more than one two images and get access the images using one image request.
How to use css sprint:
# CSS Sprint code for images
.content-before {
left: 0px;
width: 46px;
background: url('img_navsprites.gif') 0 0;
}
.content-middel {
left: 63px;
width: 43px;
background: url('img_navsprites.gif') -47px 0;
}
.content-after {
left: 127px;
width: 43px;
background: url('img_navsprites.gif') -91 0;
}
7. CDN Network
Content delivery network is the geographically distributed network that delivers web pages and content to the user based on the geographic location of the user
Benefit of CDN
CDN is a distributed server network that distributes the server load and it reduces the server response delay.
Comments
Post a Comment