The search engine giant, Google, now consider the page load performance as a part of SEO. Internet surfers leave the site quickly when the page load time is higher. In addition, slow websites will not attract advertisers since visitor traffic is little.
Users are easily satisfied with faster sites and are more likely to visit the site again. Don’t be lightheaded in this matter! Webmasters or SEO analyst should be careful and should take into account the page load times.
Page load time! What is it?
According to google the definition of page load time is “It is the total time from the moment the user clicks on a link to your page until the time the entire page is loaded and displayed in a browser”
So, what are the things that makes web pages slow?
Well, there could be several reasons. The most common problem behind the slow loading time are:
1. Whitespace between the code (html, css, javscript etc)
2. Too much comments in a page
3. Unnecessary character in the code.
4. Too much query in a site.
5. Large size images.
6. Pop ups
7. Animated GIFs
SOLUTION:
If your blog is self-hosted and powered by WordPress blogging platform then using some simple plugin will speed up your site greatly.
Follow the post, Hyper Cache + DB Cache Reloaded + Wp Minify = The SuperWordPress !
Removing whitespace and compressing the code:
Every single whitespace takes up one byte. It doesn’t sounds much but when adding all the whitespace in a code could contribute to a large space. Sometimes it is useful to remove whitespace which can reduce the page load time significantly by about 10%. Do remember that you have to edit the page later so removing whitespace can make it more problematic because it makes the code difficult to read. I would suggest to remove whitespace and compress the code after you have designed your site completely or if you are an expert in coding stuff.
In my case I designed my page completely ensuring that I don’t need to edit the page later and after that I did my whitespace removing and compressing stuff.
White space can be removed manually or you can take advantage of variety of online tools.
JavaScript Compressor and Comparison Utility. http://compressorrater.thruhere.net
Online Javascript compressor http://javascriptcompressor.com
Make your code faster for free http://compressor.ebiene.de
Clean CSS http://www.cleancss.com (my favourite)
HTML code compressor: http://www.textfixer.com/html
Closure Compiler (A java optimizer from Google) http://closure-compiler.appspot.com/home
Removing comments:
It has been suggested by various webmasters that removing comments (if there are many) can speed up a webpage
Use shorthand CSS to combine multiple rules into one rule (recommended for CSS expert):
For example, the below code can be combined into single rule.
From:
h1 { color: black; }
p { color: black; }
To:
h1, p { color: black; }
Another example:
From:
h1, h2, h3 { font-weight: normal; }
a strong { font-weight: normal !important; }
strong { font-style: italic; font-weight: normal; }
#nav { font-style: italic; }
.note { font-style: italic; }
To:
h1, h2, h3, strong { font-weight: normal; }
a strong { font-weight: normal !important; }
strong, #nav, .note { font-style: italic; }
You can learn and get more example on CSS shorthand on http://www.dustindiaz.com/css-shorthand/ and http://www.webcredible.co.uk/user-friendly-resources/css/css-shorthand-properties.shtml
Embeding CSS in external style sheets:
You can move the CSS from HTML to a separete css file and calling that file through HTML code. To query CSS from an external site use:
<link href="filename.css" rel="stylesheet" type="text/css"></link>
If you have CSS on several pages then you can combine all those CSS to put into one CSS file. This greatly reduces the number of HTTP requests.
Using external javascript files to decrease the page load time:
Like external CSS, using external javascript can decrease your page load time. And similarly combining all the JS from various pages into one JS file will result in improved performance. To call javacript from an external source use:
<script language="JavaScript" src="filename.js" type="text/javascript"> </script>
The important part is both external CSS and JS can be cached by your browser so when you visit any site for the second time it will load faster.
Don’t rely on free web hosting:
Free hosting might save your pocket but in the long run it will bring loss in your business! Majority of the free web hosting have poor uptime rate and comparing to paid hosting they are very slow.
Use / at the end of directory links:
Avoid this:
<a href="http://www.URL.com/directoryname">
Use this instead:
<a href="http://www.URL.com/directoryname/">
Why?!
Without slash at the end it makes the server confuse that whether it is pointing to a file or to a directory. To resolve this problem use slash at the end which will make the server to know quickly that the link is pointing to directory. In this way the server doesn’t need to waste time in figuring out.
WordPress Plugins
If you use wordpress then avoid unnecessary plugins. Less plugins, less query. Use plugins which are really needed for your site. Remove any unactivated plugin from the directory.
Lastly
Image optimization
is the most important part in enhancing web speed from my experience
Using the right image format for your website:
A website with no image would make your webpage damn fast but it’s not possible to avoid images on your website. A good illustration on your website not only makes you website look elegance, it helps the reader to understand the content quickly.
For webpage development both JPEG and PNG format are preferred rather than BMP or GIF because they are highly compressed. But sometimes we feel confuse as to which format to use.
For clipart, images with text, webcomics, graphs, logos, images having more whitespace; PNG format is suitable. JPEGs are for any realistic images especially photograph images.
lbrandy.com gave a nice illustration which clears the confusion.
You can see above that the part on the left side which shows how a JPEG format looks, is not clear whereas the part on the right (the PNG) is clear and more sharper.
For colorful images or realistic images, the difference in not much noticeable so JPEG is more desirable since the compression rate is higher than PNG.
Modify images to an optimize one:
You can remove excess white space from an image which reduces its size to an appreciable amount.
Or either way you can make the white space transparent.
Lastly you can compress images to a smaller size without loss in image quality with various online tools and software. I would prefer to use RIOT which is my favourite image compresstion tool.
About Nasif
