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 :)
Of course, a quick search on
how to improve page load time turns up so many techniques. Minify CSS? JavaScript at bottom? but no specific instructions for
blogger blogs BUT don't worry, I have prepared a list of ways for blogspot users, implementing these changes dramatically
improve your page load time, even if you aren’t a total technical programmer. In this article, we’ll use both basic and advanced techniques you can use to optimize your blogger page load time.
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 Widgets
Adding 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.
#4 - Minify JavaScripts and CSS
Compressing (Minify) your code is also useful for interpreted languages that run over the Internet, such as CSS and JavaScript. It reduces the the size of the file (code) without harming your code. SORRY to say again that "More page size = More page load time".
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 JavaScript to External JavaScript, then minify them and place at the end (same as #5).
- Convert inline CSS to External file, then compress the code.
Read: How to Convert Inline JavaScript to External file in bloggerTo minify CSS, try
CSScompressor. To minify Javascript, try
Javascript-Compressor.
How to Minify CSS and JavaScript:
1. Copy and paste your CSS or JavaScript in blank, input field.
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.
#5 - Move JavaScripts at the Bottom
Pages always load from top to bottom and the code placed first in the HTML document, run first and so on. JavaScripts take few seconds to get fully executed and thereby increases the
page load time, Therefore JavaScripts should be placed at the end of body so that important code can load first to display page faster.
Note: Don't move default, blogger JavaScripts.
Important! Backup your templates before applying these options
(If anything went wrong, you can revert it easily).
These options are only for custom features. For example:
Custom Search Box,
Custom Subscription box,
Custom Lightbox for blogger etc.
- Move the Inline JavaScript code above
</body> tag.
For Example:
<script> Your code </script>
or
<script type="text/javascript"> Your code </script>
- Also Place External JavaScript at the end.
For Example:
<script src="http://javascript.js"/>
or
<script src="http://javascript.js"></script>
or
<script type="text/javascript" src="http://javascript.js"/>
or
<script type="text/javascript" src="http://javascript.js"></script>
Steps: To move JavaScript at Bottom
1. Copy your JavaScript code with <script> ... </script> tag.
2. Login to blogger, then navigate to
Dashboard >
Template >
Edit HTML.
3. Use ctrl+f and find code
</body>.
4. Just above it place your JavaScript.
5. Click
Save.
Finally, its overNow, its time to check out the magic. Don't forget to share your experience below. Stay Updated, Browse Howbloggerz ! :)
