In the first part of the article series, we barely touched upon why you should increase website download speed and convert to CSS. In the following article, we'll review more ways of designing fast-loading websites.
What else to redesign?
Earlier, we came to a conclusion to convert a site to CSS to reduce website size, increase download speed and conversions. Now, we need to analyze how else we make our site load faster.
One of the main website design elements is graphics and they usually occupy from 10% to 90% of page size. But how much of the graphics is truly essential for a website? How much of it does not convey any meaning or could be reduced in size? How much of those graphics can be optimized to reduce their size? Let's analyze and see how we can improve this.
Removing extra graphics
The most effective way to make a site load faster is to remove any graphics that do not contribute to the site. Such graphics usually include images that convey no ideas, do not invoke any emotions, are not noticeable by the visitor or make the page load signicificantly slower. Just removing extra graphics can make a page load faster by about 20% -30%.
Converting images to text
Often, images are simply used to display text. Why use images if we can display text as text? We simply can use text and style it with CSS to achieve the same effect. An example of these graphics can be top navigation buttons, which can be replaced with styled text. This also makes a website load faster by 10-20%, depending on the amount of convertible images.
Yet another way of making a page load faster is to optimize what remained of our graphics. This should (probably) speed up our website by about 1-15%, depending on the graphics you used and how you optimized them. Some images can be converted from .jpeg to .gif format, some images simpy need to be optimized for the web, without reducing their quality, some simply need to be presented correctly.
And the total speed increase is ..
How our website loads faster after optimizing images largely depends on their amount. If every image conveys a certain important idea to the visitor, uses website real estate wisely and is already optimized, there is not much left to optimize. However, if the entire site is made up of images, showing text (or background), you can make it load much faster by handling the graphics in the ways described above.
Depending on the amount of graphics, total download speed increase should be about 20-60% and 10-50% more if you convert your site to CSS. The exact effect of download speed on conversions is yet to be defined, which should be in one of our future articles.