10 Tips of Reducing Page Load Time to Your Website

It's since 3 years when Google first announced that it had begun factoring page speed into site's ranking algorithm. Now page speed algorithm is one of the most trending concerns to both webmasters and bloggers when it comes to search engine optimization. Yet, regardless of the algorithm weight page speed has on rankings, we do know that it has a significant impact on site conversions. Page speed plays a vital role of any website when it comes to proven loss in sales whether visitors have to wait for a page to load every second. So we do understand well how significant the page speed to proven any business, company blog, forums even social media on the web.

To blogspot users page speed is a great concern because blogger templates consist of XML format which creates a combination of XHTML(a complex language of HTML and XML) and it supports hardly some features that can fix errors (up to 3 problems could be fixed and fetched) of Google Page Speed Insights reported to a Blogspot Template.

Today we'd discuss some basics and advanced modules that i think could fix blogger templates error and help your blog to retain a good page speed according to Google PageSpeed Insights reports.

#1 Optimize Images:

To increase page speed even with the slower internet connection images are required to be optimized in proper formats that most of the internet browsers support. This rule triggers when Google PageSpeed Insights detects that the images which are compressed can create a certain quantity of reduction of pageload also badly needed to optimize to reduce their size without significantly impacting their visual quality.

To help the users load your pages on slow connections and save money on limited data plans your site constructive feature should be simple, optimized with a real professional outlook. That's why your site images should be kept minimum in size to reduce the amount of time a user is waiting for resources to load. The images are properly formatting and compressing can save may bytes of data.

Here are some recommendations we consider to keep your images proper in format and browser friendly

#1.a Tools To Optimize Images:

There are two types of optimizations on all images, one is basic and another is advanced. Basic optimization includes cropping unnecessary spaces from an image, reducing depth of colors to the lowest acceptable level, removing comments from image, and saving the file to an appropriate format. You can perform basic image optimization with any image editing program, such as Adobe Photoshop, Grant, GIMP. Advanced optimization only involves further (lossless) compression of JPEG and PNG files. You can perform advanced optimization with lossless compression on JPEG and PNG files using following tools

For JPEG We Recommend:

• jpegmini – lossy (30-50% reduction)
• jpegcrush – same as jpegrescan) is lossless (5-10% reduction)
• jpegtran or jpegoptim – available on Linux only

For PNG We Recommend:

• pngquant ~ recommended
• pngnq 
• OptiPNG or PNGOUT.

For Gif We Recommend:

• gifsicle ~ recommended

#1.b Output The Image On Appropriate Format:

PNGs: Almost the best format to produce sizes (smaller, medium and average) with no less in quantity. PNG files are usually smaller than TIFFs. PNG also supports alpha transparency (soft edges) and was developed to be a Web graphics replacement for GIF.  

Gifs: If you need images less than 10x10 pixels in sizes, or a color palette of less than 3 colors then Gif is the best format for you. Generally we use this format to produce website favicon.

JPGs: This format is for all types of photographic - styles animation.

Note: We don't recommend using BMPs or TIFFs format to produce your image.

#2 Host Images on Secured and Reliable Server

We learnt how to reshape images with lower compression and crop images in a proper format that can be supported by every major browsers even the older versions. Now in this term we'd learn how to host images on a secured and reliable server so that they can be used in blogger template development issues. Generally blogger supports a free image hosting service in collaboration with Picasaweb(Fast and easy photo sharing from Google). Also Picasa gives you a larger storage of 1 Gigabyte disc space for image hosting and the uploaded images are also available in Google Image Searches. Images that are uploaded on Picaseweb and the delivered url locations are used in Blogger templates will make your template resources loading faster than any other third party photo sharing service providers since Picasa uses a specific format http://1.bp.blogspot.com to deliver images that helps blogger templates load any image about 4 times faster. You can also use Yahoo's free photo sharing service Flickr to upload images and use in blogger templates since Flickr gives your a massive storage of 1 Terabyte disc space and supports photos, videos, audios, and any other rich media format to share on the web. The delivered url location from Flickr is smart, browser friendly and length is less than Picasa's image url also the images are available on Yahoo Image Searches, see a comparison

Image Hosted on Picasaweb:

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQirrIcdVYC0cEwtFQHxwuZL9bTD4bkNrMHFXTg-GQi_IOh2mtU0dIZZ2EBroJE8P7-m24-4CN7eYEkUDVdtnxDMS7KTzfihbO9Q-JahvMrA3jti4aKAEddPUp26vnQ2P8STqLMIW-EI0/s1600/navbar1.png [likely to be bigger in length]

Image Hosted on Flickr:

http://farm4.staticflickr.com/3747/11510753774_e82d538a13_o.png [much smaller in length]

#3 Give Properties to All Images

Every resource that is used in website or template development should have property. What is property in this term i mean? Let me discuss.

In the language of web development property means the condition of any element that we use in web development such as property of internal, external links, videos, audios, images, texts, sitemaps, archives, pages and lots of resources that we use to design our blog or website. So images are required to give properties such that Alt, Title, Rel etc. attributes. Hence Rel and Title attributes are not much important but the most important is Alt tag since there are some older versions of browsers can't load image that doesn't include Alt tag or shows error when a visitor land on a page. So we can say in a word Alt gives the address of any image and robots also track images that include Alt tag

In blogger you can easily give property of any image using default post editor. Once you upload an image hold you cursor on the image and click once (now twice) → You could see a light blue tab blow the image that has some several options including Property → Click on that link and you'll be allowed to provide both Title and Alt attributes → Now give an appropriate Title and Alt and hit Ok → You're done!

You can also attach Title and Alt tag manually with your blogger template when customizing, use the following format once adding an image url on your template with code

<img alt="Your Alt Text Here" src="Your Image URL Here" title="Your Image Title Here"/>

#4 Make Your Template Structure Simple

Blogger templates are structured in .XML(extensible markup language) format which features including both CSS, HTML and addition Scripts in just one file. A regular blogspot template is about 60Kb – 80Kb in size and all the elements load asynchronously by browsers. To make a blogspot template that includes the most major options to be a professional outlook of a blog also covers up to 80% of page speed (According to Google PageSpeed Insights) is very complex and harder for any developer since to characterize a template with all elements require additional scripts like jQuery, JavaScript even advanced programming code CSS3 and HTML5 but these codes will create Render-Blocking Resources by browsers and your page speed will get slower automatically. 

But i'm fortunate because i prepared my template such way that i load all the snippets within one .XML format and it gives me up to 85% PageSpeed on Desktop and 71% on Mobile although i load lots of elements in my template.

Below some of my recommendations to create a simple structure of blogspot template

• Add CSS code on a baseline [line after line method] this helps browsers render pages faster
• Try to use only colors to design your blog without using image url
• Don't use repeated code within css part
• Keep your site length less than 1000px and remove extra more spaces between sidebar and post-body
• Don't use images in footer background because it makes browsers extra loaded when readers try to faster scroll down your pages but it will render slowly
• Try to eliminate using footer tab
• Don't use extra third party plugin although they create more design but this will make your blog extra loaded
• And lots other things related to make a simple and professional structure of blogger template

If you need any professional blogger template you may contact us or you may browse our free template resource all these are simple in structure and professional outlook

#5 Eliminate Render-Blocking JavaScript

In blogger there is a default added widget bundle css which you can't find on your template and it is being attached by blogger as default once the resources are loaded by browsers. Google PageSpeed Insights detects it and reports blogger users to remove that rendered-blocking widget bundle css since it creates a reduction of 61% of your entire pageload. Read the following tutorial and learn how to fix this error

• Read: Remove Blogger Default Widget Bundle CSS

#6 Eliminate Unnecessary Scripts from Your Template

Blogger templates are coded in such way that all the elements are arranged in one XML folder. So when we come to develop any template sometimes we add extra code but we don't make sure the script is absolutely used whereas all the codes are loaded and unnecessary scripts make the browsers load extra time, that's really bad news for any blogger! Sometimes we add multiple jQuery plugins but we don't care about this, again using only one jQuery version can drive many of our widgets so we need not add more. 

For example i run two widgets (Notification Bar and Blogger+Google Comments Widgets) using one jQuery version (jQuery ver 1.4.0) so i need not add multiple jQuery plugins. Similarly we add more widgets with different css code and at a certain time we remove the widget but we don't remember removing the css code also(which is an unnecessary code) so these codes make your blog to load slower. So be careful and use the optimum coding that are needed for your template and eliminate unnecessary scripts.

NB: We add multiple widgets using Blogger default third party functionality(HTML/JavaScript) so we must be careful using optimum code if we have jQuery plugin installed already we must not add further. Also be careful using Google Apis, Google Plus Plugin, Twitter Plugin, and other social plugins only one time and try to install them on your template source code between <head....</head> tag

#7 Proper Uses of JavaScript, Custom CSS and Google Hosted Libraries

Now come to my main point of this entire discussions. Many a time we use custom css snippet using link such that

<link href='Your CSS Snippet Link' rel='stylesheet' type='text/css'/>

But i strongly recommend not to use custom css in this approach but using the entire source code on your template would be right better since this custom link creates Render-Blocking by browsers and finally your PageSpeed gets reduced more than 40% according to Google PageSpeed Insights reports. You must add the custom css code right before closing </b:skin tag of your template and save your template, that's it!

Similarly when use custom JavaScript not add the following format

<script src='Your JS Snippet Link' type='text/javascript'/>

even the source code is very bigger in size you should add the entire code right before closing </head> tag using the following format

<script language='JavaScript'>
//<![CDATA[

Your JavaScript Code Here

//]]>
</script>

Or using following format you can add JavaScript code on your template

<script type="text/javascript">
/* <![CDATA[ */

Content of Your JavaScript Goes Here

/* ]]> */
</script>

#7.a Why We Use CDATA Tag:

A CDATA(character data) section is required if you need your document to parse as XML (e.g. when an XHTML page is interpreted as XML) and you want to be able to write literal i<10 and a && b instead of i&lt;10 and a &amp;&amp; b, as XHTML will parse the JavaScript code as parsed character data(PCDATA) as opposed to character data by default. This is not an issue with scripts that are stored in external source files, but for any inline JavaScript in XHTML you will probably want to use a CDATA section.

Note that many XHTML(A combination of the flexibility of HTML with the extensibility of XML) pages were never intended to be parsed as XML in which case this will not be an issue.

For a good writeup on the subject, see http://javascript.about.com/library/blxhtml.htm

Even you can add bigger scripts like jQuery Plugin using this method without using the script link. This will safe your template structure and helps browsers load resources very faster without creating any Render-Blocking issues

#8 Uses of Default and Custom Fonts

If you use custom blogger template, then i recommend to set any of the windows default font as your body font (i.e. Arial, Helvetica, Tahoma, Verdana etc.) since these fonts load very faster and all the webkit browsers (older and newer versions) support it. But if you wish to use custom font (i.e. Google fonts) then i recommend you using the source code of the font on your template so that it will load asynchronously and keep your PageSpeed up nevertheless using custom font. Use the following technique to load Google fonts asynchronously

@font-face {
  font-family: 'Droid Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Droid Sans'), local('DroidSans'), url(http://themes.googleusercontent.com/static/fonts/droidsans/v3/s-BiyweUPV0v-yRb-cjciBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}

Add the above snippet on your template right before closing </b:skin tag as a normal css and enjoy the custom font without slowing your PageSpeed.

You can get the location using following format copy the yellow highlighted code

<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400' rel='stylesheet' type='text/css'/>

Now open your browser and load the link and you should see the snippet starting at @font-face

Copy it and use on your template, that's it!

#9 Content Representation of Frontpage

One of the main points still i feel important to negotiate with you all. In this term we'd discuss how you can represent your content from frontpage so that it can help browsers to load widgets properly. Follow the instructions below i think it will help to represent browser friendly content

• Keep 7 posts default on your frontpage, even a lower number than this will help browsers load your blog frontpage faster
• Don't keep more than 3 banner ads on sidebar try to use post-body space to place different ad layouts
• Summarize your posts using Read More link; recommended article
• Try to use limited social sharing buttons on front page (I recommend using Addthis vertical sharing buttons rather using custom, even you can run addthis script asynchronously on your template)
• Keep limited widgets on footer section this will help your pages scroll down/up faster and satisfy readers when reading posts
• Try to use only header background color code not any image url (this will make your site more faster)

I think this will help you to do more.

#10 Avoid Landing Page Redirects

This rule triggers when PageSpeed Insights detects that you have more than one redirect from the given url to the final landing page. In blogger this is not any serious trouble because blogger uses a default url format like this

http://abc.blogspot.com

sometimes this happen that you migrated your blog from blogger to wordpress(or any other blogging platform) but your old blogspot url is still remaining on the search engines so when people will access your site using previous url then they will get a landing page redirection and this will cause pagespeed slower.

#10.a How to Fix It

You can either delete your sitemap url or completely remove the site from Google Webmaster Tools and wait for 2/3 months your all the pages containing old blogspot url will be completely removed and this trouble will be fixed properly.

Final Words:

Here i've enlisted a few more elaborate things so that you can understand the basics of pagespeed and related other threads. It's seriously true that overall 50% of your pagespeed depends on the site constructive feature, so when you develop a site you must follow the recommendations of experts and professional web designers. Here i've offered a few ways that you can exploit to design blogspot templates, and this is by no means an exhaustive list.

Now let my know how you enjoyed this article, if you find it helpful don't forget to share with your preferred social media. If you have more considerations you can suggest me throughout our comment form. 

Your feedback is always appreciated :)