With just a few changes you can increase your website performance. Exactly what those changes are, how you should ideally go about it, and what you should pay attention to has been condensed into four tips below.
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?
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
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:
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)
This is how it’s done:
CSS code sample with white spaces:
CSS code sample without white spaces:
in the footer:
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:
Then remove the following commands in the HTML code:
Insert the following command instead:
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:
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:
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.
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.
Published on 10/30/2015 by Irina Hey.
Irina Hey is a keynote speaker and an expert in the field of customer acquisition, lead generation and data driven marketing. Until April 2018 she worked as a Product Owner of Acquisitions and coordinated all strategic marketing activities at Ryte.Become a guest author »