The first impression of a websites is often a lingering one. It is vital for both the website designers as well as the business owners to be aware of this fact. At times there may be an issue with the design being hard figure out straight away. This is usually to do with the navigation. Other times it could that the functionality is not quite there yet. However it is also possible that you have got everything right but the website performance is not up to the mark.

This is often to do with the loading time of the website. If a website takes too long to load it is likely to create a bad impression on the visitors especially those visiting for the first time.

Hence the obvious questions that might pop up are:

• How to speed up website load time?
• How to speed up network?
• How to optimize the image for the web?

That is exactly what this article is about. This articles goes on to explain what does the browser pre-loader do and how to optimize images for web as well.

Why is website load time important?

The visitors these days usually have a fast internet connection so it is you may be mistaken into thinking that there is nothing like a slow loading website anymore. But that is absolutely wrong. Though the internet connection speeds are higher than before, the loading time of a website is still cause of concern and should be kept tabs on.

This is even more true this year (2015) as we expect the number of mobile internet users to exceed those using the internet from other platforms.

Here a few statistics collected that explain quite a lot:

• 57% of the visitors online will abandon the website if it takes more than 3 seconds to load the page.
• Off those 57%, 80% will never return to the website again.
• Additionally 50% of those will share their bad experience with their friends via social media and verbally.

So if you though that just because you have spent a fortune on building a website it is going to be popular overnight, then think again. The visitors these days have a low tolerance when it comes to the loading times of a website and will certainly not tolerate a slow loading website. Besides which even Google will penalize a slow loading website when it comes to listing the search results.

How can it be measured?

There are several tools around that can tells us what exactly is the loading time of your website. But that is not all, these tools are quite good at what they do, since they can even detect which are the sections taking long to load and provide a list of corrections or changes.

This is only a recommendation made by the website which you can use to make the suitable changes. A few of such tools are listed here:

• Pingdom – http://tools.pingdom.com/fpt/
• Google – https://developers.google.com/speed/pagespeed/insights/

Introduction Browser Pre-loaders

Preloading is a technique that some of the browsers use to improve the performance of a website page. The browsers already work pretty hard to make sure that a page load up in the least amount of time. In addition to which there is also a browser preloading feature which is often called look-ahead or speculative parser.

A pre-loader has the ability to improve the rendering of the page. In fact a study by Google Chrome showed that preloading improved the loading time by about 20 per cent.

How does a Browser load a page?

The browser starts to parse the HTML when the HTML page is loaded. At the same time it start the process of building the DOM. The DOM (Document Object Model) is an application programming interface (API) for HTML documents. It is used to define the logical structures of documents and the method in which the document is referenced and manipulated.

While parsing the HTML the browser it will discover several other resources like the style sheets, scripts and images as well as any other elements that is required to completely load the page.

Once found it will download them.

JavaScript will special treatment since it can alter the DOM. Thus if the script is synchronous (without ‘’a sync’ or ‘defer’) it pause the construction of the DOM and wait till the script is executed. This script too may need to be downloaded if it has not been defined inline or it isn’t in the browser’s cache. Thus this script will first be downloaded and then executed after which the same process will continue for any other script that is found. This is one of the reasons that a page may take time to load.

The major factor that slows down the loading of a page is the retrieving of resources over the network. In fact while the script is being executed the DOM activity comes to a completed stop and it pauses construction of the page. Neither is the browser able to discover any remaining resources to be downloaded to complete the page. As a matter of fact even the network connection is almost idle. Hence there is most certainly a possibility to epitomize the process in some way.

Browser Pr-loaders

The modern browsers make use of browser per-loaders to help speed up the process of loading a page. The technique used by the per-loader is described here. In fact if you study this in detail, as a designer you may be able to design the HTML in a way that optimise’s the process of the per-loader and the normal browser process, resulting in even faster loading times.

• Pre-loader Speed up Method: The way the pre-loader speeds up the loading the pages is by searching for any remaining HTML elements using external resources that need to be downloaded. The advantage of the pre-loader is that it can start the download process for these external resources while the browser is waiting for the script to execute. Hence the faster the download process starts the faster it finishes. Thus the pre-loader makes sure there is no downtime and the network connection is not left idle by making the most of bandwidth.
• Prioritizing the resource download: The pre-loader doesn’t prioritize the downloading of the resources based how you place the elements in the HTML code. The priority of the browser is more to do with what is required to render the page as fast as possible. For example if a CSS is necessary to render the page the scripts that are included prior to the content are delaying the process the pre-loader will prioritise the resources based on what makes the page load faster and never in order of their placement in the HTML code.

I have mentioned this specially since many designers and developers fret and fume over where to place their JavaScript codes or other resources to be included in order to speed up the loading of the page. But the fact of the matter is that their effort doesn’t count for much since it is the browser per-loader that does all the work. However there is something that the designers and developers can do to speed up the loading times. To really make a noticeable difference to the loading time the first place to look at is the images.

Do images slow you down?

The deal with images is that you cannot do without them.

You can have all text you require and that too really smashing text, but it still cannot replace an image.

An image is more effective that any amount of text any day. But including images has the following issues in general:

• The images constitute approximately 64 per cent of an average web page.
• The size of the average image is usually 2MB. This is the average size of the image that hasn’t been optimized. This is in fact on the lower side of an average page. If you have a page that is a photo gallery or makes use of more images instead of content then the size of an image can be as large as 4 – 5 MB.
• An optimized image size is usually lower and that means the size of the entire page goes down, since the size of the other elements is not usually very high.
• The process to optimize an image is a very simple one and usually doesn’t require any special skills.
• Most of the images can usually be optimized in such a way that there is minimal to no loss in the quality of the image.

Hence reducing size of images can go a long way in improving the performance of a website.

Optimizing Images for Websites

There are several ways in which you can optimize the image for a web page as listed here:

• Using a special software: Optimizing an image is easier than you can imagine; in fact it happens itself with the help of a special software that is available. There are two softwares available, File Optimizer for the Windows and Linux platform and Image Optimize for the Mac OS Platform that are able to optimize an image. Hence all that needs to be done is to drag the images to be optimized to the software are then hit optimize; it couldn’t be simpler.

• Image dimensions: Although fewer number of people make the mistake of using larger image than required on the website it is worth mentioning the fact that if a small size image is to be used on the website that it is pays to take the extra effort to resize the image. This can make a considerable difference. The designers usually do practice this however this will act as a reminder to them and help those new to the field.

• Images made for the Web: There are several softwares that can be used to tweak images, Photoshop being one of them. When you do save a file there are usually a few options to choose from. For example while saving a JPEG image you can pick a value on the slider between 0 to 100. This happens to be the quality gauge and the larger the value you select the larger the file will be. Choosing an option like 70 can make a difference too. Another way to optimize the image using such software is to zoom in on section that is important, thus pushing up the resolution as well. This may not be always possible since it depends on the type of the image and where it is being placed.

• Doing a review: One the web page is done or the entire website, it is a good idea to review the pages. This review should be done with the aim to remove any unnecessary images.

• PNGs: Images that use PNG file format are usually smaller than the other formats. GIF was the other format that was popular and still is with animated images. But if the image is a simple and without animation it is a good idea to go with PNG file format.

• Bits and Bytes: PNG images are likely to be saved as 24-bit images however you can opt to save them as 8-bit images making it easier for the browsers to load.

• Image File format for every occasion: There are three popular formats PNG, JPEG and GIF and here is when to choose what:
  • PNG
    • If a transparency is required then pick PNG
    • Use the 8 bit PNG for general images as long as it looks good if not switch to JPG
  • GIF: An animated images is best kept a GIF
  • JPEG: A photo (image) should ideally be a JPEG
• Progressive JPEGs: If you have used an image editor you have likely to come across the a few options while saving a JPEG image. You basically have a choice to save as a progressive image or as a baseline image. The difference is quite subtle. A baseline image will load from top row of pixels down to the bottom and hence it will be a while before the entire image loads. As for the progressive JPEGs they will load completely however the image will be highly pixelated and as it loads fully the image will sharpen. In general many designer opt to go with the progressive image since it serves their purpose better than the other one.

Conclusion:

The job of a web designer is not easy since they usually base their design choices on what is current, the client’s preferences and what is relevant according to the theme of the website.

Alakmalak is web development company that has witnessed several trends changes in website design.

The designers are thus not only experienced but also well aware of current trends and requirements. Thus it is not surprising that they crossed the magical figure of having developed 2000 websites a long time ago. Besides which those clients which happen to be from all across the globe really appreciate the design and development work and continue to remain our clients

• how to improve website loading speed
• how to optimize a website
• how to optimize website loading time
• how to speed up website load time
• Optimizing Website loading time