15 Oct 2011
Optimizing Your Blog's Load Time
Any Websites Load Time is a vital factor in its ability to engage its readers. Studies show that users leave a site if it hasn't loaded in 4 seconds. Knowing the above facts it becomes really important to optimize your blogs accordingly. The main services for this stuff are Google's Page Speed and Yahoo's YSlow but both are bit technical and not that graphical. Here comes the Service called GTmetrix.com ,it combines the results of the above services and is bit more easy to understand.Not only does it provide suggestions it also provides actionable recommendations to fix those.
To test Your Blog's Score
Go to GTmetrix.com and Enter the URL and Press Go, after a bit of time you will get a very detailed Report discussing all your Websites Parameters. Here a bit of information about some of them.
Now after this it will be a easy to follow ,as not only does GTmetrix suggests you what is wrong but it also gives the optimized versions of the things. For example they give the Losslessly compressed versions of images which are capable of being compressed .
Now some very important things to consider while optimizing your Score
- Optimizing Images: Make sure you loselessly compress all the images on your blog to reduce your Page Size
- Combine images using CSS sprites: This becomes very important if you have a lots of Social Media Icons on your blog, as it increases the Page Requests
- Specify image dimensions: Make sure you add a width and height tag to all your images, this is considered good for Search Engines as well
- Remove Unused CSS: Make sure you delete any CSS left out from any buttons or menus which you previously used
- Place CSS in Head :Any external CSS file should be placed in the head tag as it helps in fast rendering of the Page
Some of the suggestions will be out of your hands, as Blogger doesn't gives you any control over them , like
- Leverage browser caching: Blogger doesn't give you access to the .htaccess file where you have to set the expiry date for your resources, making them cacheable.
- Avoid CSS expressions: The main CSS of Blogger is dynamic in nature , for the Template Designer to work. This makes use of variables in CSS which is considered bad.
- Reduce DNS lookups: As Blogger doesn't give any custom CDN for your Blog, Images and JavaScript are loaded from various domains, increasing chances of failures
- Default CSS File: Blogger loads a CSS file namely bundle.css ,over which you have no control. This file has a lot of CSS which remains unused on any Given Page
Now some general suggestions for improving Page Load time:
- Put all JavaScript at the end of body tag , this lets the page's CSS and JavaScript to load in parallel.
- Remove all useless gadgets from your Blogs specailly the Traffic Gadget, if you want better insights try Google Analytics
- Go through your HTML and check out for any piece of code which is not being used but is still present.
- Remove Gadgets like FB LikeBox and Followers Gadget, as the images of members that are loaded ,very badly effect Load Times and Page Size.
- Use b:if tags .For example if you have share buttons on the Post page alone then make sure that the scripts related to these are loaded on Post Page only.
Even though there are lot of limitations in Blogger, you can still achieve a very good Scores by tweaking a little bit. Here is a Extreme Modification that can be done to Blogger for Better Scores: (Try This only if your a Pro in Blogger Templates )
This modification will render your Template Designer Completely useless, but on the other hand reduce your Page Size by atleast a 100-150KB.
1.Go to Design > Edit HTML (In New Blogger Interface Go to Template > Edit HTML).
2. Search for b:skin term using CTRL+F method and remove everything in between the B:skin tags so that it looks something like this
3. Now open your Blog in a New Tab and Right Click anywhere and Click on "View Page Source". Search for the term page-skin-1 . After finding it scroll down a till all you find the </Group> , now copy all the CSS code below this till the closing B:skin tag like this
4. Paste this code back into the Edit HTML and Save your Template.
Everybody has a different blog and the problems faced while optimizing would be wide ranging. Incase you are unable to solve them, please feel free to share. If you get frustrated at any stage stating Blogger Platform as the reason , then these are the score of SYB.
Til next time,
Prayag Verma
at 10:03
