Optimizing Loading Time

The loading time of a webpage is often underestimated by web developers. It's true that network speeds are getting faster, while bandwidth capacities grow exponentially as well. But it is also true that users find it very frustrating to have to wait just because the webpage was not sufficiently optimized. This waiting time affects users' trust in your website and in the brand that it represents. Equally, a long loading time is a negative point in the eyes of main search engines.

Recent studies show that most users tolerate a waiting time between 2 to 4 seconds (for small commercial websites or travel resellers) before they abandon a webpage.

Developers often recur to increases of bandwidth when confronted with a slow website, while in reality the key to improving the situation is to optimize the website itself.

Here we are going to offer some advice about how to achieve an optimized website and thereby reduce loading time.

Decrease the amount of elements external to the page that need to be loaded: combine JS files as well as CSS files. It is a good practice to put <script> labels at the end of the webpage, before the closing of the </body> label, because the javascript files are loaded immediately that appears referenced, thereby blocking the loading process of the rest of the files until they are completely downloaded. The reference to the style files must be placed in the header of the webpage <head>…</head>, so that they load properly when the page is shown.
It is important to make adequate use of browsers' cache, - this way we avoid constant loading of the files that do not vary with time, which is the case of the style files, javascripts, images and static pages of your website. This is achieved through expiry headers on your web pages.
The correct use of eTags in a webpage's header indicates if the file has been modified or not, comparing its value in the browser to the eTag of the file on the server, avoiding a page download from the server if it was not updated on user's computer. The use of eTags decreases the loading time of a webpage in a browser.
Compacting JS and CSS files also decreases loading time of webpages; the compacting algorithm used is GZIP, which is interpreted by all modern browsers.
Eliminate blank spaces as well as unnecessary line changes in JS and CSS files.
Use of images of a size larger than the one is truly needed and that are scaled using the attributes of the <img> label, affects the loading speed negatively. The correct approach is to optimize the quality of your images using image editing software before inserting them into a web page.

The WordPress developers have many plugins that allow you create websites very optimized. One of them is the Loading Page.

Loading Page with Loading Screen plugin performs a pre-loading of image on your website and displays a loading progress screen with percentage of completion. Once everything is loaded, the screen disappears.

The web developers that use Dreamweaver can use the Loading Page extension.

Simplify the HTML code that you're using in your web page. If we review the HTML codes of hundreds of webpages, we'll find out that they present styles in a line, that a large amount of labels is repeated on the page, or styles in the headers of a page (<style>…</style>) that are repeated in various pages of the same website. The correct approach in these cases is to define a class that will be assigned to all the elements that share the same visual characteristics. If styles are shared by several pages within a website, unify them in a CSS file that will be stored easily in your browser's cache and you will have to download every time just parts of the webpage that will be visited.
Avoid loading resources from different domains on the same webpage, this requires resolving IP numbers of the domains with respective time load.
Avoid redirecting webpages, this takes time to resolve the destination URL.

There is a set of tools that allow to detect problems in your webpage performance and suggestions to resolve them. One of these tools is a Firefox add-on, called PageSpeed, developed by Google. Page Speed realizes several tests on the web server configuration of a website and in its code. These tests are based on a series of good practices to improve a webpage performance. Webmasters who run PageSpeed on their pages will obtain a series of punctuations for each page, as well as useful tips to improve their performance. As you develop your website, do use tools like PageSpeed and follow its suggestions: eventually, your website will be fully optimized for both users and search engines.