Website performance generally revolves round how quickly a Web page downloads and renders completely, and a number of factors affect this. These include too many requests to the Web server, too many media objects (especially images), media objects that are too large, and large quantity of codes. While making too many requests to the server may be a less common practice, the use of large media objects, too many media objects, and large volume of codes is common. Quick page download and quick rendering times are crucial because they can determine whether or not visitors decide to stay and look at a website or whether they have good user-experience if, due to some circumstances, they must look at it. In other words, the success of a website can depend on it.
The main way to minimize page download time is to optimize the assets used in creating the page. These assets largely fall under text-based, image-based, and font-based assets. Their optimization involves, in the main, minimizing their size, which is achieved mainly through data compression, mentioned in Chapters 6 and 7. As you might have gathered from these chapters, compression is the process of encoding data using fewer bits and there are many compression techniques and algorithms. Also, the types used depend on type of asset, and different ones can be combined to achieve best compression. This section presents some guidelines that are based on Google’s recommendations.
1. Optimizing Text-Based Assets
Text-based assets cover both the codes used to create pages and the textual content of the pages. The optimization of codes involves first minimizing their volume through a process known as minification, after which text compression is applied to the minified output and also textual contents. Minification is the principle of reducing by as much as possible the volume of codes, while still retaining their meaning. This is done by removing data that are unnecessary for codes to run, such as white spaces (spaces and tabs), comments, and structure. Figures 22.19 and 22.20 show the same code before and after it has been minified, in which the volume of the code is significantly reduced from about 400 to about 125 characters.
Although minification can be achieved manually, it is best automated and there are various tools, called minifiers, available on the Web that specialize in minifying different
Web languages like HTML, CSS, and JavaScript, and they can be quite easy to use. Because minified codes are difficult to read, the usual practice is to not minify until the final stage of development when everything is working as intended and no further debugging is necessary. It is also recommended practice to keep the original unminified readable copies, in case changes are required later.
Applying compression to minified codes and normal textual content is typically done using GZIP compression, which can reduce text by up to 80%. All modern browsers support it and will automatically ask servers to use it on the resources it serves. A server usually needs to be configured to enable the use of GZIP. Your Web hosting company can duly advise you on the procedure.
2. Optimizing Image-Based Assets
There is no single best standard for optimizing all images, because different situations require different levels of optimization. For example, a quality that is acceptable for an icon is generally not for full-screen display. Also, there are multiple factors to consider, each of which might have more than one acceptable solution. For example, there are many different image file formats, each of which offers different capabilities, produces different levels of quality, and is suitable for different types of image contents. The following are some of the guidelines to keep in mind:
- Use vector instead of raster images wherever possible. This is because the quality of vector images is not affected by different resolutions and scaling (zoom) factors. This makes them suitable for situation in which an image needs to be delivered on different devices and different screen resolutions. Ideally, vector images should be produced (saved) using SVG and CSS, as this means, for example, that they can also be minified to further reduce their sizes.
- Minify and compress SVG and CSS: Because SVG and CSS images are produced using codes, they can be minified and also compressed using GZIP as described earlier in the text.
- Use the most suitable raster image format: Different raster image formats have different characteristics that make them suitable for different situations. For example, some degrade image quality when they compress images while others do not. Similarly, some produce smaller file sizes than others at similar quality level. Some are also better for some types of image content than others. Most image editing programs allow you to choose from multiple formats and apply varying compression settings. You should reduce image size as much as possible without visible signs of degradation for optimum size.
- Deliver images at the size they will appear on a page instead of using HTML attributes or CSS properties to reduce them to the required size. This minimizes the amount of unnecessary pixels. For example, if you intend for an image to be displayed at 250 x 250 and you create it at 300 x 300, you will end up with 27,000 (i.e., 300 x 300 – 250 x 250) unnecessary pixels.
3. Optimizing Web Font
The use of Web fonts in Web design is an increasingly standard practice because they largely eliminate the need for fonts to be installed in users’ computers and provide a wide range of font options. The following are some guidelines for optimizing them: problem” or “Flash of Invisible Text” (FOIT), where the browser renders a page briefly without the text, or “Flash of unstyled content” (FOUC), where a page appears briefly with the browser’s default or fallback font before loading the external stylesheet and rendering the text in the correct fonts. Various ways of solving these problems are available on the Web and commonly involve scripting.
- Be conscious of font use: Minimize the number of fonts and the number of variants of each font used on your pages to help faster download.
- Breakdown your font resources: To minimize the size of font files for a page and aid faster download of the page, large font families should be broken into subsets, so that only the glyphs necessary for the page are delivered. For example, if you have a page that uses multiple styles and weights from a font family, each can be specified separately. This can be done, as shown in Chapter 13, through using unicode-range with the @font-face at-rule and subsetting, based on Unicode scripts (e.g., Latin, Greek, and Cyrillic scripts).
- Serve optimized font formats: Provide each font used in WOFF2, WOFF, EOT, and TTF formats (again, as shown in Chapter 13), and ensure that EOT and TTF, which are not compressed by default, are GZIP-compressed.
- Ensure the reuse of fonts between pages: Make sure that font resources are cached for long enough to allow reuse. This is typically achieved through ensuring that the server is configured to instruct the browser correctly to do this when it serves its resources. This is usually done through: (1) using the Cache- Control HTTP response header to specify browser caching behavior, and (2) using the cache response directive, max-age, to specify for how long resources should be cached. Additionally, the ETag HTTP header is used to ensure that even if the time for which to keep a resource has expired, if it is the same as the browser is requesting, it is used and not downloaded again.
- Give font loading high priority: Typical browsers’ default behavior is to delay the download of fonts until other critical resources for a page have been downloaded. This is known as the lazy loading of fonts can lead to the “blank- text
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.