This is probably my first post about HTML. To be honest I am not really those webmaster that can create a webpage using Notepad because I don’t take the initiative to memorize all the HTML codes. Whenever I needed anything, I simply need to refer to guides and tutorials that is available online or books. Recently Google has announced that website speed is one of the factor for better ranking in search results and like many other webmasters, I too have done some improvements so that the blog and forum loads faster. The first thing I did was to analyze the webpage using the free online page speed analyzer provided by WebsiteOptimization.com and Pingdom.
The report shows that one of the factor that might be causing the page to load slowly is the huge amount image objects being loaded on the page. The translator plugin for WordPress loads 42 small flag images at the sidebar and at first I thought nothing can be done because the plugin is encrypted and asking Taragana to improve on this will surely cost money. Then I remembered that there is a way to make a single image with multiple links on it. After spending some time researching, this is called image map.
Image map has been around for a very long time but it is not being used frequently. Basically what image map does is you can specify multiple links on a single image using coordinates. All I needed to do was to take a screenshot of the 42 maps and save it as a single image. Then I measured all the coordinates for each flags and assigned permalink + language letter. As a result, from 42 images with 23.5KB to load, it became only 4.72KB with only 1 image. The result file is now 80% smaller and an improvement of 8.2 seconds because of delays due to round-trip latency with an average of 0.2 seconds per object. I also get to save at least few hundred megabytes of bandwidth daily by implementing this one small technique.
Before using Image Map
After using Image Map
As for SEO, many people would question if the Google bot will still crawl on image map links and many answers I got from searching was positive. Google bot will definitely discover the links but may not be for link juice as this is one method on how spammers can create hidden links. If the links are not that important, then you should use image map.
There are tons of tutorials on how to create an image map that you can find online and I don’t think it is necessary for me to rewrite it again. For demo and examples on image map, you can check out the excellent complete tutorial from OneExtraPixel. That is where I learned how to create image map.
Related posts: