Tips for Better Website Performance

Imagine you are surfing the Internet and want to book your next vacation online, but the website is being displayed to you slowly, piece by piece. You wait, scroll, wait and finally leave the site after 10 seconds slightly annoyed, to look for another online travel agency.

According to this study by Akamai slow loading time of a website can adversely affect the visitor behavior and deter potential customers. A total of 57% of searchers wait for three seconds or less before leaving the site. Also, two-thirds of 18- to 24-year-olds expect a loading time of no more than two seconds, according to the study.

Why is the average loading time of websites today still at about 8 seconds?
(uxmag, 2014)

The answer: Today’s websites are larger and slower as compared to even just a year ago, an article by Webperformancetoday (2014) shows. A trend study by httparchive also confirms it, showing the increase in the average size of a web page from October 2014 to October 15.

Figure 1: Average size of a web page of October, 2014 to October, 2015

What is website performance and why is it important?

Performance is defined as processing power of a computer. It is usually measured in MIPS, million instructions per second, which is regarded as “a measure of the performance of the central processing unit” of a computer. It is also referred to as site speed which represents the loading time of a website.

Site speed is an important piece in the puzzle of Google’s ranking algorithm. Because Google judges based on user experience and website loading speed is part of that.

Walmart.com, for example, was able to achieve an increase of + 2% conversion rate and + 1% increase in sales for each second shaved off the loading time, according to a study by uxmag (2014).

Every second of loading time delay, on the other hand, had the following negative effects:

• -3.5% decline in conversion rate

• -2.1% decline in the shopping cart size

• -9.4% fewer page views

• -8.3% increased bounce rate

Reasons for poor site performance:

• Slow databases

• Too large amount of data on the web site

• Compression not activated

• Images too big

• Server too slow

The loading time of a website can be improved by reducing and optimizing the amount of data being displayed. Figure 1 shows the content of a current average website and the individual average sizes of the respective components.

Figure 2: Average bytes of website content (Source: httparchive, 2015)

4 Tips for better website performance

Tip # 1: Minimize CSS and JavaScript

To minimize CSS and JavaScript files, you can, for example, remove unnecessary white spaces. According to study by Yahoo, you could reduce the size of your website by up to 21%.

This is how it’s done:

CSS code sample with white spaces:

CSS code sample without white spaces:

Minimization tools can be utilized to minimize CSS and JavaScript files. To minimize CSS, you can use YUI compressor or cssmin.js. Closure Compiler or the YUI Compressor are both suitable for the minimization JSMin JavaScript.

A web page is only displayed in full once all JavaScripts and CSS files are loaded. If JavaScript files are placed at the beginning of a code in a slow-loading server, there is a chance that a blank page is displayed to users for the entire loading time.

Therefore, to achieve the best possible user experience, JavaScript files should be loaded last. That way the website content will be displayed within a short amount of time despite a slow-loading server.

Additional functions such as the call-to-action buttons, which are loaded last via JavaScript can be viewed later.

CSS should ideally be installed in the headers and JavaScript in the footers of the source code. A source code might look like the example in Figure 3.

Example source code with CSS file in the Header and JavaScript files
in the footer:

Tip # 2: Outsource CSS and JavaScript

CSS and JavaScript make up a large part of the source code. If it has to be read by the search engine each time to load fully, it can take a long time.

A good way to decrease the size of the source code is outsourcing the CSS and JavaScript files. Ideally, the CSS and JavaScript files would each be merged into a single document.

Moreover, if the browser has cached the external file (which means loading it only once), additional loading time can be saved.

In order for caching to work well, Expires or Cache-Control headers (or max-age) should be inserted. That would include the date up to which the file should be cached, and thus serves the browser for data validation. Google recommends using the Expires header and setting the expiration date at least one week to one year.

How to do it:

Example of an outsourced JavaScript

Cut the JavaScript files from the HTML code and paste it into an external text editor (WordPad or Simple Text) in a new document. Save this document as “main.js” in the folder in which all other HTML documents are stored.
Then remove the following commands in the HTML code:

and

Insert the following command instead:

Tip # 3: Minimizing HTTP requests

The front-end of the website with its components such as images, style sheets, scripts, Flash, etc., takes up 80% of the total loading time. Minimizing the number of HTTP requests can make the website faster.

HTTP requests are communication paths from the browser to the server. A request may be a document, image or video that the browser should display on the website.

This can be done through a simplified design, for example by deleting single image files from the code.

If you are confident about your design and do not wish to change anything on it, you still have another option: the creation of CSS sprites.

Multiple background images can be combined into one image using CSS sprites. The position of each image section can be precisely defined in the CSS settings. It lets the browser know where and on what subpage the CSS sprite is to be displayed.

How to do it:

Combine all background images into one CSS sprite. The resulting overall picture might look somewhat like this one here for Xing.

Figure 3: CSS sprite example XING

In order for the browser to be able to read the exact position of the individual image parts and display them on the web page, the respective horizontal and vertical alignments need to be added in the CSS settings.

The CSS code may look like this:

The CSS code with information on horizontal and vertical position:

Tip # 4: Optimizing images

Images are among the elements that make up the greater part of a web page. In Figure 1 it can be seen that the image files at 1054 kB account for almost 62% of the average page size, 1710 kB.

Image files can be optimized for the web page when you are processing them with Photoshop by saving them in web page format. The images will thus have a reduced data size and load faster.

If a page has a lot of images as part of the content, their loading time can also be reduced through the use of a Content Delivery Network (CDN). In other words, the images are outsourced to an external server and thus made available more quickly.

Furthermore, in image size optimization it is important to select the correct file format.

A recent study by http archives (2014) shows the average size of each file format:

Figure 4: HTTP Archive

According to the graph from HTTP Archive, HTML has the smallest file size with an average of 6 kB. GIF at 8 kB, is also a small file format which can be used for image optimization.

However, small quantity could mean also low quality in this case. Therefore, it is best to use JPEG for high-resolution images (uxmag, 2014).

Tools such as jpegtran, jpegoptim (for JPEG files) or OptiPNG, PNGOUT (for PNG files) can be helpful in picture size optimization.

The file format generally depends on the image.

Accordingly, the following applies:

• Avoid BMP and TIFF

• GIF only for small and simple graphics (less than 10 x 10 px or a color palette with less than 3 colors) and use for animations

• Use JPEG for lifelike images

• PNG files are preferable (Yahoo)

How to do it:

In order for the browser not to have to calculate the image dimensions, you should always specify the size in the code, in which the image is to be displayed later.

The original size should be the same as what has been specified in the code, so that the browser does not load the image in its original size first and then downscale it.

Conclusion

Nowadays, users expect a web page to be fully loaded within 2 seconds. If this is not met, user satisfaction may suffer. For eCommerce sites it can adversely affect the conversion rate and result in lost revenue.

To optimize the loading time of a website, optimization of the code is of particular importance as it contains all the information that the browser needs for the correct page to display. Even just a few optimization steps can lead to a reduction in loading time.

Website speed can be monitored regularly, through certain tools, such as Google Analytics, Google Page Speed or special SEO analysis tools.