Page loading time or simply Page speed is an important factor considered by Google to rank a page. A fast loading page improves user experience and reduces bounce rate.
In this article, I'll be sharing 21 tested ways I implemented in my blog to speed up blog loading time. Note: This article is going to be lengthy, so please grab a coffee before starting.
Moreover, On April 2010, Google had announced that they are considering page speed time as a key factor for ranking. The faster a page loads, better it is. Also for eCommerce websites, page speed is very crucial. Below are some quick facts :
The impact of a second delay for eCommerce websites can be seen, but what about small website like ours? Does one second have huge impact for smaller websites? How precious is 1 second online exactly? Below are some most remarkable one second stats taken from Hostingtribunal.
Therefore, a reduction even in a millisecond have huge huge benefits to any websites.
Moreover, GTMetrix also keeps a record of past history scores and it helps a lot to keep track of historical data of website. I just love it !
Unlike other tools, GTMetrix not only shows factors like compression of images needed, but it also provides optimized images that are easily downloadable. Normally, I download those images and replace with the previous ones.
Hey, I forgot to mention that my homepage scores a whopping 99 Score !! :D Here is the proof.
It shows my page score for mobile and desktop version, along with different suggestions like Defer OffScreen Images, Remove unused CSS, Eliminate rendering resources and many more.
Here is a screenshot of my homepage score.
Therefore, a site must be optimized for new visitors so as to convert them into repeating ones. Have you heard of first impression? That very much applies to website as well.
Here is a screenshot of my homepage score on Light house testing. I'm trying my best to get a perfect score :P
While caching may sound too technical for some, the underlying principles of caching are pretty simple to understand. So, what is caching?
Caching is a small memory browsers use to store website contents files locally. Let me give you a scenario:
This is because browser stores files temporarily in a cache (given that you have provided caching time) and the second request is served without connecting to server, directly from a cache memory. This is like loading static HTML page.
So, how to set caching time in blogger?
Caching time is a duration about how long the page should be cached by browser. While browsers cache files by themselves and set a day (in most cases) as caching duration, sometimes you may need to manually set caching time. So, how do you achieve that in blogger? Well, I've already written an article on how to overcome favicon leverage browser caching issue in blogger, go check that out. Hope that helps. I recommend not to cache Google Analytics.
For instance, Google uses server located in Japan in response to the request made by a Japanese user.
So, how CDN helps in speeding up the loading time?
The number of requests are reduced when using a CDN. Let's say, in above scenario, if a Japanese user's request is served via Brazilian server, then that request has to be transmitted from Japan to Brazil (at minimum) whereas if it was served directly from Japan, no connection has to be made from Japan to Brazil.
CloudFlare is probably the most popular free CDN right now, and it is easy to use. You can learn more on how to setup Cloudflare account here...
More request = More loading time and vice versa.
We can use different techniques to minimize HTTP Requests. Some are explained below:
a) Use Data-URI for small images
Images are loaded in a website via HTTP Request. In order to avoid this, images should be converted to base64 codes, which looks something like this:
The above code is an image file in base64 format. If you copy and enter the above code in browser, you'll get following image, which is our favicon.
When the browser encounters a Data-URI in your code, it is able to decode the data and construct the file. Be careful not to remove any single character from base64 code.
And, use Data-URI for small images only because large-sized images will have more size when converted to Data-URI formats.
Currently, I have replaced all small images with Data-URI codes and saved some requests. Use it and let me know if it helped your website to load faster.
b) Combine external Scripts and CSS files
It is a good practice to combine small files into one. For every external file, an request is to be made. Try to reduce such requests.
Be careful to append scripts that need to be called earlier at the top. Doing so won't hamper page features and improves user experiences.
c) Use CSS Sprites
This is another cool technique to reduce no. of requests. CSS Sprites combine many images into a single sprite sheet. Then, CSS is used to show any specific image from the sheet using
CSS Sprite works best for small images like social media icons. Do not combine large images into one as the product image will have larger size.
A tool like CSS Sprites Generator can be used to create sprite sheet.
Redirections are calls or methods that take a user from one location to another. There are 5 types of redirections and each type hampers your web performance because it is a waste to go one place just to be redirected to another.
Let's consider a scenario: You ask someone where to find eggs and when you go there, you're told that there are no more eggs and you need to go another shop. It is just like that.
So, how to find out your website redirections?
A simple way to figure out redirections is to use a tool like Redirect Mapper by Varvy which detects and displays 301 and 302 redirects.
Type in your page address and hit enter. You'll be provided with a result something like this :
The above redirection is common among bloggers. Firstly a non-www is redirected to www and later to https. This results in a 2 redirection chain and it significantly impact loading speed.
The solution for this can be to redirect all non-www to https www in a single redirection. It is important to know that even if we remove a single redirection, it helps in faster loading of page.
Google recommends eliminating redirects by never linking to a page with a redirection in it. This happens when you had once entered an address, and that address is now redirected and you have not updated. Therefore, it is important to know whether your pointing addresses are valid or are 404 errors or are simply redirects.
You can use free tools like broken link checker or screaming frog to find 404 errors and redirections.
It is not that redirections are totally bad. There are many good and legitimate reasons to have redirections. Maybe you have changed your domain or maybe you've removed old article and written a similar one recently. The only thing to be aware is that they significantly increase page speed and performance issues.
DNS prefetching is another way to improve page performance of a website. With this, we can inform browser to resolve a DNS lookup for future usage.
According to W3C documentation,
An easy way to achieve DNS prefetch is to add a
The above link tag is saying "I want to resolve
Below is a list of some domains with prefetching. Don't forget to remove the domains you won't be using.
Fonts are integral part of web designing. A good font can enthrall visitors into going through contents. There are many ways to add a font in your website. A common practice is to install Google Fonts which are free and easy to use.
You just need to select fonts you want from Google Fonts and click on embed option.
The above is Open Sans Google Font. It looks amazing when you set height and size. However, have you bothered to open that file ?
The file loads Cryptic, Latin, Vietnamese and other versions of fonts. Do you even need them? A recent studied showed that adding a
You can do the compatibility test from caniuse.com.
What if browser or system doesn't support the font you have added? In that case, you can use a property
Here is the code to add Open Sans Google Font:
Most of the time in order to improve page speed, we focus on different aspects of website like CSS, HTML, Script, Requests etc. that we forget to focus on one of its integral part : Images. Images add value to a site. So, how do you optimize images to help in faster loading of page?
The very first option is to choose right image format. There are various image formats such as PNG, JPEG, GIF and so on. All of them have their respective properties and features.
Now, you know which image format to choose, the very next step is to compress those images. Here is a normal pattern I follow :
a) Compress PNG images at TinyPNG and JPEG at TinyJPEG
b) Save and upload them in article. Check for article's Page Score in GTMetrix.com and download new optimized images. Replace previous images with the new downloaded ones in the same article.
Now that we know how to optimize images, it is equally important to specify image dimensions. Image dimension in 2D defines the width and height attributes of an image.
According to Google,
In short, specifying image dimensions prevent browser from redrawing already downloaded images. This helps load a website faster.
You can easily specify image dimenions within
Or, you can use CSS:
Another important thing we do not pay attention to is the actual image dimensions. I used to upload high dimension images and re-size them by specifying width and height attributes in <img> tag. When I checked their weight, they were around 60kb or more which was not practical for speed optimization.
So, a good practice is to crop or re-size the images to needed dimensions via an image editor before uploading in the articles. Later, we can specify same width and height attributes.
Below I have used an online photo resizer to check the filesize for same image. You can notice the difference in file sizes.
You might have noticed I have used many images in this article, and they are not loaded all at once. Once the image is in viewport, it is getting loaded. That way I'm minimizing loading time initially and upgrading page speed. The mechanism I have used is commonly known as Lazy Loading Of Images or Deferring Off-screen images.
Lazy Load, as the name suggests, is loading files or images in a lazy pattern. That means they won't be loaded initially, but once they are in the fold region. As the user scrolls, the images are loaded.
The main advantage of lazy loading is page speed. Since HTTP requests are also minimized initially, the website loads fast. Saving even a second is precious which I've discussed at the beginning.
In lazy loading, we specify a very small sized image (probably in bytes) in src attribute of
So, how do you achieve lazy loading of images ? For that, I've written an article on how you can defer offscreen images in blogger. Read that out.
Do you accept adding a whole package for just a percentage usage? Definitely, No. It is not only case with font awesome, but other web font icons like icomoon also bear same drawback. Therefore, it is important to optimize them.
Below are some merits of optimizing font awesome icons:
Wooooohhhh, that was a lengthy one, right? This is the completion of part 1 for 21 tested ways to speed up page loading time. In the next part(published), I'll be covering remaining 11 techniques which includes Optimization of CSS, Compression and many more. Stick with TwistBlogg and Happy Blogging !
Update: 21 Tested Ways to decrease loading time - Part 2 has been publsihed. Don't forget to read them as well.
Please take a second to share this with everyone. Thank you !
In this article, I'll be sharing 21 tested ways I implemented in my blog to speed up blog loading time. Note: This article is going to be lengthy, so please grab a coffee before starting.
Why page speed is important?
There is no deny that a quick and fast loading page trumps a slower one. According to various studies conducted on website loading time, it was found that if an average page load time exceeds 3 seconds, users abandonment rate increases. This consequently rises bounce rate. A high bounce rate telegraphs search engine that a website is not useful for that specific keyword and hence reducing ranking. Therefore, it is important to have a fast page speed.Moreover, On April 2010, Google had announced that they are considering page speed time as a key factor for ranking. The faster a page loads, better it is. Also for eCommerce websites, page speed is very crucial. Below are some quick facts :
- A study by Walmart showed that every second of improvement in their website loading time would increase conversion by 2%.
- One second delay in loading cost for Amazon is $1.6B sales each year!
- In an average every second of delay in page loading time can result in 7% decrease in online sales.
The impact of a second delay for eCommerce websites can be seen, but what about small website like ours? Does one second have huge impact for smaller websites? How precious is 1 second online exactly? Below are some most remarkable one second stats taken from Hostingtribunal.
- 1 second delay reduces page views by 11%.
- 1-3 seconds in loading time see a very low bounce rate probability – only 32%. Add 1 second more to that and the chance for users to bounce triples, reaching 90%.
- 1 second delay decreases customer satisfaction by 16%.
Therefore, a reduction even in a millisecond have huge huge benefits to any websites.
How to test my page speed?
Now, you know the importance of page speed in ranking, its time to find out how fast your blogger blog loads. Below are my all time favorite page loading time testing tools.1) GTMetrix
GTMetrix is a page speed testing tool that provides a detail overview of how fast a page loads. This tool consider many factors like optimization of code, position of CSS & Javascript, number of requests, redirections, use of CDN etc., and append PageSpeed and YSlow Score based on those factors.Moreover, GTMetrix also keeps a record of past history scores and it helps a lot to keep track of historical data of website. I just love it !
Unlike other tools, GTMetrix not only shows factors like compression of images needed, but it also provides optimized images that are easily downloadable. Normally, I download those images and replace with the previous ones.
Hey, I forgot to mention that my homepage scores a whopping 99 Score !! :D Here is the proof.
2) Google PageSpeed Insight
Pagespeed insight is a free tool provided by Google. I prefer this because ultimately Google is the one who ranks my website based on their algorithms.It shows my page score for mobile and desktop version, along with different suggestions like Defer OffScreen Images, Remove unused CSS, Eliminate rendering resources and many more.
Here is a screenshot of my homepage score.
3) Web Page Test
Web Page Test is probably the best tool to figure out what's wrong with your website. It gives you details on First View and Repeat View. This is important because when a visitor visits your site for the first time, all required resources need to be downloaded, taking more time to load compared to repeating visitors.Therefore, a site must be optimized for new visitors so as to convert them into repeating ones. Have you heard of first impression? That very much applies to website as well.
4) Web Page Test - Light House Testing
LightHouse Testing is a powerful tool packed with factors like Performance, Accessibility, Best Practices and SEO. I rely heavily on this tool to make my site accessible to every single person and to guarantee that I'm using latest SEO trends.Here is a screenshot of my homepage score on Light house testing. I'm trying my best to get a perfect score :P
How to speed up my blog loading time?
Now that you have tested your blog loading time, see if you need optimization. If yes, this article is going to be a big gift. Stick with me, and I promise to deliberate something new that will surely help you speed up page loading time.1] Leverage Browser Caching
If someone asked me how to speed up page easily, my answer would be to enable caching. If you want a fast loading page, caching would probably be the first step.While caching may sound too technical for some, the underlying principles of caching are pretty simple to understand. So, what is caching?
Caching is a small memory browsers use to store website contents files locally. Let me give you a scenario:
Let's say, you have visited this article for the first time. The browser needs to download HTML, CSS, JS, images and other contents of this article causing a delay in loading. Now, refresh this page and notice the loading time. It must be less than the first visit (ignoring other factors). So, how come the same page is loading faster than before?
This is because browser stores files temporarily in a cache (given that you have provided caching time) and the second request is served without connecting to server, directly from a cache memory. This is like loading static HTML page.
So, how to set caching time in blogger?
Caching time is a duration about how long the page should be cached by browser. While browsers cache files by themselves and set a day (in most cases) as caching duration, sometimes you may need to manually set caching time. So, how do you achieve that in blogger? Well, I've already written an article on how to overcome favicon leverage browser caching issue in blogger, go check that out. Hope that helps. I recommend not to cache Google Analytics.
2] Use of Content Distribution Network (CDN)
Content Distribution Network delivers contents through a server that is close to the end users. In other words, users' request is served via a closest server in corresponding to that user.For instance, Google uses server located in Japan in response to the request made by a Japanese user.
So, how CDN helps in speeding up the loading time?
The number of requests are reduced when using a CDN. Let's say, in above scenario, if a Japanese user's request is served via Brazilian server, then that request has to be transmitted from Japan to Brazil (at minimum) whereas if it was served directly from Japan, no connection has to be made from Japan to Brazil.
CloudFlare is probably the most popular free CDN right now, and it is easy to use. You can learn more on how to setup Cloudflare account here...
3] Minimize HTTP Requests
Every request a webpage makes will add a considerable amount of time in establishing a connection and retrieving data.More request = More loading time and vice versa.
We can use different techniques to minimize HTTP Requests. Some are explained below:
a) Use Data-URI for small images
Images are loaded in a website via HTTP Request. In order to avoid this, images should be converted to base64 codes, which looks something like this:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABwElEQVQ4T53TQSjfYRzH8dfvj0lJiaVc7KClJGpODru4jOTg6Miy5DKHf3LjIrnYAcsobi5KLqyEzE1hOagtShxcHOSirfit5/f7G1OrzXN6ns/zfN/f5/N9vk/k0YhjDehBM17ktk+wjk9R5OvDkOhuEceK8AFvkXkMzq1vMYv3UeQ6aAkgF/wZr/8S+Fj+gjcBcgeYzl37H+OTY8HOuyh4vrmxm83KxPGf8ZkM3d3MzNzrJSV0dFBfL9h5FQBT19d619dZXmZ2lvx8FhcpKuLwkP5+CgpYWqK9ncJCTk8pL/cxAL7hZcjR1cXcHA0N7O+nWTs7WVigsZG1NcrKUv3sjMpK3wPgB54FsbY2zdjTw3SoCqqrOT6mpoaKCra2mJigry/Z/vkbcHVFaSm3t6mN4P3igufPU9DICNvbrK7S0sLKyj0gsbCxQXNoHRwcUFeXHm5tTbWjIyYnGR+nqoqT0FpSC1PoHR1lcJDiYi4vyctjeJihIULlNzdpa+P8nLExstkEkBQxtO7u/LzMzk5KHxhIswYre3vpPIpSi+FGTU2JlD5jmMWxpzdSDhD+wdNb+QHkaZ8pdZmO//3OvwAaHqExdfK/7gAAAABJRU5ErkJggg==The above code is an image file in base64 format. If you copy and enter the above code in browser, you'll get following image, which is our favicon.
When the browser encounters a Data-URI in your code, it is able to decode the data and construct the file. Be careful not to remove any single character from base64 code.
And, use Data-URI for small images only because large-sized images will have more size when converted to Data-URI formats.
Currently, I have replaced all small images with Data-URI codes and saved some requests. Use it and let me know if it helped your website to load faster.
b) Combine external Scripts and CSS files
It is a good practice to combine small files into one. For every external file, an request is to be made. Try to reduce such requests.
Be careful to append scripts that need to be called earlier at the top. Doing so won't hamper page features and improves user experiences.
c) Use CSS Sprites
This is another cool technique to reduce no. of requests. CSS Sprites combine many images into a single sprite sheet. Then, CSS is used to show any specific image from the sheet using
background-position property.CSS Sprite works best for small images like social media icons. Do not combine large images into one as the product image will have larger size.
A tool like CSS Sprites Generator can be used to create sprite sheet.
4] Reduce Redirections
Redirections are calls or methods that take a user from one location to another. There are 5 types of redirections and each type hampers your web performance because it is a waste to go one place just to be redirected to another.
Let's consider a scenario: You ask someone where to find eggs and when you go there, you're told that there are no more eggs and you need to go another shop. It is just like that.
So, how to find out your website redirections?
A simple way to figure out redirections is to use a tool like Redirect Mapper by Varvy which detects and displays 301 and 302 redirects.
Type in your page address and hit enter. You'll be provided with a result something like this :
The above redirection is common among bloggers. Firstly a non-www is redirected to www and later to https. This results in a 2 redirection chain and it significantly impact loading speed.
The solution for this can be to redirect all non-www to https www in a single redirection. It is important to know that even if we remove a single redirection, it helps in faster loading of page.
Google recommends eliminating redirects by never linking to a page with a redirection in it. This happens when you had once entered an address, and that address is now redirected and you have not updated. Therefore, it is important to know whether your pointing addresses are valid or are 404 errors or are simply redirects.
You can use free tools like broken link checker or screaming frog to find 404 errors and redirections.
It is not that redirections are totally bad. There are many good and legitimate reasons to have redirections. Maybe you have changed your domain or maybe you've removed old article and written a similar one recently. The only thing to be aware is that they significantly increase page speed and performance issues.
5] Use DNS prefetch
DNS prefetching is another way to improve page performance of a website. With this, we can inform browser to resolve a DNS lookup for future usage.
According to W3C documentation,
The dns-prefetch link relation type is used to indicate an origin that will be used to fetch required resources, and that the user agent SHOULD resolve as early as possible.When a web page contains assets that need to be loaded from external domains, DNS prefetching notifies that there are web resources like scripts, CSS etc. that will be required from specific domains. As a result, a browser resolves DNS lookup asynchronously while loading other contents.
An easy way to achieve DNS prefetch is to add a
<link>tag with rel="dns-prefetch" attribute within <head></head> section. The code looks like this:<link rel="dns-prefetch" href="//www.example.com"/> The above link tag is saying "I want to resolve
www.example.com domain before it is called."Note: Don't addhttp://orhttps://use//instead. That way, browser will resolve DNS no matter what the protocol is.
Below is a list of some domains with prefetching. Don't forget to remove the domains you won't be using.
<!-- Google CDN -->
<link rel="dns-prefetch" href="//ajax.googleapis.com">
<!-- Google API -->
<link rel="dns-prefetch" href="//apis.google.com">
<!-- Google Fonts -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<!-- Google Analytics -->
<link rel="dns-prefetch" href="//www.google-analytics.com">
<!-- Google Tag Manager -->
<link rel="dns-prefetch" href="//www.googletagmanager.com">
<!-- Google Publisher Tag -->
<link rel="dns-prefetch" href="//www.googletagservices.com">
<!-- Google AdSense -->
<link rel="dns-prefetch" href="//adservice.google.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="dns-prefetch" href="//tpc.googlesyndication.com">
<!-- Google Blogger -->
<link rel="dns-prefetch" href="//bp.blogspot.com">
<link rel="dns-prefetch" href="//1.bp.blogspot.com">
<link rel="dns-prefetch" href="//2.bp.blogspot.com">
<link rel="dns-prefetch" href="//3.bp.blogspot.com">
<link rel="dns-prefetch" href="//4.bp.blogspot.com">
<!-- Microsoft CDN -->
<link rel="dns-prefetch" href="//ajax.microsoft.com">
<link rel="dns-prefetch" href="//ajax.aspnetcdn.com">
<!-- Amazon S3 -->
<link rel="dns-prefetch" href="//s3.amazonaws.com">
<!-- Cloudflare CDN -->
<link rel="dns-prefetch" href="//cdnjs.cloudflare.com">
<!-- jQuery CDN -->
<link rel="dns-prefetch" href="//code.jquery.com">
<!-- Bootstrap CDN -->
<link rel="dns-prefetch" href="//stackpath.bootstrapcdn.com">
<!-- Font Awesome CDN -->
<link rel="dns-prefetch" href="//use.fontawesome.com">
<!-- Facebook -->
<link rel="dns-prefetch" href="//connect.facebook.net">
<!-- Twitter -->
<link rel="dns-prefetch" href="//platform.twitter.com">
<!-- Linkedin -->
<link rel="dns-prefetch" href="//platform.linkedin.com">
<!-- Vimeo -->
<link rel="dns-prefetch" href="//player.vimeo.com">
<!-- GitHub -->
<link rel="dns-prefetch" href="//github.githubassets.com">
<!-- Disqus -->
<link rel="dns-prefetch" href="//referrer.disqus.com">
<link rel="dns-prefetch" href="//c.disquscdn.com">
<!-- Gravatar -->
<link rel="dns-prefetch" href="//0.gravatar.com">
<link rel="dns-prefetch" href="//2.gravatar.com">
<link rel="dns-prefetch" href="//1.gravatar.com">
<!-- BuySellads -->
<link rel="dns-prefetch" href="//stats.buysellads.com">
<link rel="dns-prefetch" href="//s3.buysellads.com">
<!-- DoubleClick -->
<link rel="dns-prefetch" href="//ad.doubleclick.net">
<link rel="dns-prefetch" href="//googleads.g.doubleclick.net">
<link rel="dns-prefetch" href="//stats.g.doubleclick.net">
<link rel="dns-prefetch" href="//cm.g.doubleclick.net">
6] Request only required fonts
Fonts are integral part of web designing. A good font can enthrall visitors into going through contents. There are many ways to add a font in your website. A common practice is to install Google Fonts which are free and easy to use.
You just need to select fonts you want from Google Fonts and click on embed option.
<link href='https://fonts.googleapis.com/css?family=Open+Sans' id='google-fonts-css' media='all' rel='stylesheet' type='text/css'/>The above is Open Sans Google Font. It looks amazing when you set height and size. However, have you bothered to open that file ?
The file loads Cryptic, Latin, Vietnamese and other versions of fonts. Do you even need them? A recent studied showed that adding a
.woff version will be more than enough because all browsers support it. Woff2 is new version and most modern browsers support them too. I'm using .woff2 format for twistblogg.You can do the compatibility test from caniuse.com.
What if browser or system doesn't support the font you have added? In that case, you can use a property
font-display:swap to swap the font with default system font incase browser can't load it. Pretty simple, right?Here is the code to add Open Sans Google Font:
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2'); font-display: swap;}
7] Optimize Images
Most of the time in order to improve page speed, we focus on different aspects of website like CSS, HTML, Script, Requests etc. that we forget to focus on one of its integral part : Images. Images add value to a site. So, how do you optimize images to help in faster loading of page?
The very first option is to choose right image format. There are various image formats such as PNG, JPEG, GIF and so on. All of them have their respective properties and features.
The rule of thumb is to save images in PNG format if the number of colors used are less, choose JPEG if multiple colors are used and GIF if you're creating a short animated video. I've shared a detailed article comparing different image formats. Check that out too.
Now, you know which image format to choose, the very next step is to compress those images. Here is a normal pattern I follow :
a) Compress PNG images at TinyPNG and JPEG at TinyJPEG
b) Save and upload them in article. Check for article's Page Score in GTMetrix.com and download new optimized images. Replace previous images with the new downloaded ones in the same article.
8] Specify Image Dimensions
Now that we know how to optimize images, it is equally important to specify image dimensions. Image dimension in 2D defines the width and height attributes of an image.
According to Google,
When the browser lays out the page, it needs to be able to flow around replaceable elements such as images. It can begin to render a page even before images are downloaded, provided that it knows the dimensions to wrap non-replaceable elements around. If no dimensions are specified in the containing document, or if the dimensions specified don't match those of the actual images, the browser will require a reflow and repaint once the images are downloaded. To prevent reflows, specify the width and height of all images, either in the HTML <img> tag, or in CSS.In short, specifying image dimensions prevent browser from redrawing already downloaded images. This helps load a website faster.
You can easily specify image dimenions within
<img> tag as below:<img src="#" width="300px" height="300px"/>Or, you can use CSS:
img{width:300px; height:300px}Another important thing we do not pay attention to is the actual image dimensions. I used to upload high dimension images and re-size them by specifying width and height attributes in <img> tag. When I checked their weight, they were around 60kb or more which was not practical for speed optimization.
So, a good practice is to crop or re-size the images to needed dimensions via an image editor before uploading in the articles. Later, we can specify same width and height attributes.
Below I have used an online photo resizer to check the filesize for same image. You can notice the difference in file sizes.
9] Lazy Load Images
You might have noticed I have used many images in this article, and they are not loaded all at once. Once the image is in viewport, it is getting loaded. That way I'm minimizing loading time initially and upgrading page speed. The mechanism I have used is commonly known as Lazy Loading Of Images or Deferring Off-screen images.
Lazy Load, as the name suggests, is loading files or images in a lazy pattern. That means they won't be loaded initially, but once they are in the fold region. As the user scrolls, the images are loaded.
The main advantage of lazy loading is page speed. Since HTTP requests are also minimized initially, the website loads fast. Saving even a second is precious which I've discussed at the beginning.
In lazy loading, we specify a very small sized image (probably in bytes) in src attribute of
<img> tag. That image is loaded at the beginning. As the user scrolls down, the image is loaded and replaces the previous small image. The image to be lazy loaded is specified in data-src attribute of image tag.So, how do you achieve lazy loading of images ? For that, I've written an article on how you can defer offscreen images in blogger. Read that out.
10] Optimize Web Icon Fonts : Font Awesome
Font awesome icons make the task of web designing easier and faster as they are a package with more than 2000 in-built free icons set. However, most of us rarely use more than 20 icons.Do you accept adding a whole package for just a percentage usage? Definitely, No. It is not only case with font awesome, but other web font icons like icomoon also bear same drawback. Therefore, it is important to optimize them.
Below are some merits of optimizing font awesome icons:
- Improved pagespeed.
- Less DNS Look-up.
- Less HTTP Requests.
Wooooohhhh, that was a lengthy one, right? This is the completion of part 1 for 21 tested ways to speed up page loading time. In the next part(published), I'll be covering remaining 11 techniques which includes Optimization of CSS, Compression and many more. Stick with TwistBlogg and Happy Blogging !
Update: 21 Tested Ways to decrease loading time - Part 2 has been publsihed. Don't forget to read them as well.
Please take a second to share this with everyone. Thank you !