Sunday, 24 August 2014

Make your Blogger Template load faster

| Sunday, August 24, 2014 | | | | |

A fast loading website is a good website. In terms of both SEO and user experience. Google PR algorithm take into consideration time spent in downloading a page. Also, the bounce rate, that is, how many users left your blog as soon as they visited, without navigating to another article on your blog.

When, page takes time to load user leave your page. Increasing bounce rate.

minify javascript and css to make website load faster

Minify JS and CSS in Blogger

Minified JS is must. In blogger platform, you have to play with codes to tweak your template's/theme's looks. But even in that case, you'll find yourself playing with HTML and CSS not with JavaScript.

After minifying JS it almost becomes unreadable. Still you don't have to worry about it, because you don't need to read them at all.

NOTE- Online JS Minifier(s) won't compress all of your JS or jQuery codes. Because Blogger replaces some special characters like " into equivalent HTML entity or codes like " which would throw errors like -

Unexpected operator &

If you are non-technical publisher then, all JavaScript are placed in-between script HTML tags.

<script type='text/javascript'>
//<![CDATA[
YOUR JS Codes are placed here
//]]>
</script>
So, now you know where your JS codes are.
  1. Cut all the codes in-between //<![CDATA[ and //]]>.
  2. Use any online JS minifier to generate minified code. 
  3. Copy minified code and paste it from where you took those codes (in-between //<![CDATA[ and //]]>).
There could be jQuery, that won't minify using the above tools. So, leave them for now. A lot of modern templates have JS minified already.

How to know if it is jQuery?

By the time you will minify some JS codes, you will realize that there are no $ signs in simple JavaScript code. In jQuery, the $ if the short hand of jQuery function used to select different tags and attributes from DOM or Document Object Model.

Also, some special characters are converted into equivalent HTML entities, like " sign will be converted into &quot; that's why the online minify tool will show an error.

Optimizing CSS

Similarly, CSS you can aslo minify CSS. There are a number of online tools available. CSS is placed in <style> and </style> tags. But remember when doing so, don't kill the sequence in which they appear.

Normally, I won't do that or else it will become very hard to tweak CSS. Other way round, is to copy your CSS into any file. If, you are not planning to tweak any style codes then feel free to minify CSS.

Optimizing Images in Blogger

Having low size images would help your blog load faster. But reducing the size of images all way down will kill the quality of the image. So, first crop the image and then work on quality reduction. Sometimes, the crop will reduce enough size.

How to know time spent during downloading a page?

time spent in downloading a page blogger
time spent in downloading a page

Google Webmaster tools lets you see the time spent downloading a page. Because you are on Blogger platform, so you will get the webmaster data without even verifying you blog.
Related Posts with Thumbnails

No comments:

Post a comment