Aug
03
One main reason that readers are not interested in your blog is slower loading of an article. Readers are often frustrated for waiting indefinite time to load contents also, search engine spiders consider your site as a low quality site.
In this post, I will be discussing various ways to speedup your site loading on client side.
The primary reason for slower loading is large HTML page size. The HTML we write is often not well indented also, it might contain comments which developer write to understand code at later time. But, HTML comments unnecessarily increase page size and also, they might introduce privacy issues if developer have specified his personal information (Ex. Name, company) there, as user can view HTML comments by view source option in browser.
HTML Optimizers:
An award winning HTML compressor tool which, optimizes the web page by reducing the file size. It provides various extra features over other like if in your existing code you have a table with following code
Then it will be converted to
which reduces the file size by removing unnecessary quotes in your code.
If you are Apple fan and use Mac OS then Alentum won’t be a useful utility for you as it supports only Windows platform. The Apple also have it’s own version of HTML optimizer. Apple HTML optimizer features include Smart Handling, supports XML, and can handle web pages with any text encoding. Moreover, it can check your web pages for dangling tags, missing attributes, and broken links.
The online utility where one can copy paste code from HTML file and then it will reduce size of code by removing extra spaces and comments.
CSS (Cascaded Style Sheets):
The inline CSS styles might increase size of code and might sound redundant. The better approach is to aggregate all CSS in one file and reference it in HTML code, which will reduce page’s file size. To optimize CSS files, there are various tools available in market such as CSS drive compressor. CSS drive compressor reduces the file size by removing redundant and unused CSS. The advance options provide more flexibility with features such as comment handling, new lines handling, compressing color codes etc.
JavaScript:
A lot of JavaScript defined in tags will cause a delay in page load. This kind of JavaScript can be optimized by compressing and removing indentation ans spacing with help of tools like jsCompress, YUI compressor or Dynamic tools JavaScript compressor.
Further, optimization can be done by loading content before JavaScript using various techniques discussed in “Load JavaScript after Pageload” article.
Images:
Large size and high quality images often make site look more elegant but, they affect loading time of pages. Specifying width and height attributes will make browser aware of space needed to load image and while loading image, meantime browser can load another content.
If someone like to display photo albums on page then s/he should use JPEG images. For background purposes PNG or GIFs are preferred. But, better approach than loading multiple images at background is use of CSS sprites.
The tools like dynamic drive image optimizer and image optimizer by geeks are available for optimizing images.
Tables Vs Divs:
Well, as a web developer you might know this one but, still I would like to include it here. If page is structured using tables then your page will not render till all contents in table are loaded. Instead, if you use divs the contents will be rendered as they are loaded on client side browser. One major drawback of using tables is search engines like Google will not index your contents from table so, better use divs than tables.
Here, I’ve listed some important tools and tips for faster loading of website pages. If you know any other or you know some better techniques then comment them down.
Related posts: