The adage “patience is a virtue” doesn’t apply online. Even a one-second delay can drastically reduce pageviews, customer satisfaction and ...
The adage “patience is a virtue” doesn’t apply online. Even a one-second delay can drastically reduce pageviews, customer satisfaction and your lovely revenue. Actually, it’s not a secret at all, Page load time have long played a role in search engine rankings. Since 2010, Google has been accounting for a site speed in its algorithm for ranking. So what’s the biggest factor contributing to your page speed? - It takes browsers time to download the resource code that makes up your page. It has to download your HTML, your stylesheets, your scripts and your images. Each new feature weighs down your blogger blog just a little more.
Did you know that if an e-commerce site is making $100,000 per day, a delay of 1 second in page load time can cost it an annual loss of $2.5 million. Research also shows that 47% of the readers expect that the websites should load within 2 seconds while a delay of more than 3 seconds can make 40% of your readers to abandon your site and I know you don't want to lose your users - that's why you're here :)
Ways To Improve Blogger Page Load Time
#1 - Optimize your images:Others ways may help you to reduce the page size in bytes, but image size can dramatically increase or decrease your page size in kilobytes (KB) and we have already discussed that More Page size = More page load time. Therefore Image size was the most important factor in page load time. Many times we upload images to increase the visual appeal of the posts, therefore its become important to optimize the images. As Blogger by default doesn't optimize the images we upload, so we have to optimize the images before uploading.
- Use online image compressing tool like Tingpng, ImageOptimizer to optimize images without compromising with image quality.
- Crop your images to the correct size. For Example: If your main page width is 600px, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”600”). This slows your page load time and creates a bad user experience.
Recommended: Use JPEG or PNG Image format, though all browsers fully support them.
#2 - Reduce numbers of posts on your homepage:Homepage was the most important page in the blog, it's like first impression and we know "First impression matters". Homepage itself speak all about your blog, most of the users use your homepage for navigation purpose. According to a study, 90% of the visitor consider homepage as important factor for blog quality. If your homepage is visually appealing but slow in loading, 55% of the user may abondon your blog. Even if your writing quality content. Therefore by reducing the numbers of posts per page, we can dramatically improve homepage load time of our blogspot blog.
- Goto Settings > Posts, comments and sharing > Change "Show at most" value.
- Click Save.
Recommended: show at most 6-8 posts on homepage.
Read: Stylish Search Boxes with limited number of posts per page.
#3 - Reduce numbers of WidgetsAdding widgets was a cool feature in blogger and blogger lets you add as many widgets as you want. But remember, adding too many widgets can increase HTTP requests which effects your page load time very badly. Therefore always use limited numbers of widgets on your blog.
- Remove unwanted and non-essential widgets.
- Use at max 5 widgets on a page.
- Create page instead of widget (but should be relevant). For Example: You can create contact page instead of adding contact widget.
- Show or Hide widgets on Specific page.
Before we move further, its important to learn more about the benefits of External source code. If the code is External, it can easier be cached by browsers. (Cached means: Your file will be downloaded once and can be executed many time, through out the blog without downloading again and again). Of course this will optimize your page load time :)
- Convert inline CSS to External file, then compress the code.
2. Click Compress.
3. Again copy and paste your output code in your file, and save the file.
Note: Don't move CSS file at the end of body. (Optional) You can place CSS file above </head> tag.
These options are only for custom features. For example: Custom Search Box, Custom Subscription box, Custom Lightbox for blogger etc.
<script> Your code </script>
2. Login to blogger, then navigate to Dashboard > Template > Edit HTML.
3. Use ctrl+f and find code </body>.
5. Click Save.
Finally, its over
Now, its time to check out the magic. Don't forget to share your experience below. Stay Updated, Browse Howbloggerz ! :)