Introduction
Page loading consists of 3 key steps:
- Download HTML code.
- Loading CSS, JavaScript, fonts.
- Downloading everything that can be downloaded is delayed: images not visible on the first screen, widgets of social networks and ad blocks, videos, online consultants, etc.
At the second stage, the page frame and the appearance of the interface are formed. The page becomes available for interaction, that is, interactive. Everything, with the exception of heavy media files and third-party widgets, is already displayed in its final form.
It is at the end of the second stage that the user begins to study the content. The sooner this stage is completed, the better.
Fonts in compressed form in woff2 format can occupy from 10% to 25% of the size of all page files loaded in the first two stages. We take into account the created load on the network. For example, HTML, CSS, JavaScript code is compressed 4-5 times using gzip technology before transmission over the network. That is, 10%-25% is exactly the proportion of the amount of data transmitted.
Thus, by reducing font sizes by 2 times, you can achieve an acceleration of 5%-12%, which is very significant. Moreover, the optimization work will take no more than an hour. How to do this, we will tell you in this article.
Ways to speed up
We leave only the characters used
The first thing to do is to remove all unused characters from font files. A font file can contain thousands of characters, but a page uses one and a half hundred.
For example, only 160 characters are enough for this page, they include:
- Cyrillic letters in upper and lower case — 66 letters.
- 10 digits.
- Letters of the Latin alphabet in upper and lower case — 42 letters. They are often used to indicate the names of products and brands.
- 42 punctuation marks, including rarely used. Here they are “”“”“”“₽!@#%^&*()[]{}:;”|,.~…/<>’?=+-–—_.
Everything else needs to be removed. The most convenient way to do this is in the service “[Font Optimization] (/tools/web-font-optimizer “Font optimization service”)”.
An example of optimizing popular fonts. The Russian alphabet (not extended), regular style, downloaded from fonts.google.com a file in ttf format, a woff2 file from a CSS CDN service file of the form 4iCs6KVjbNBYlgoKcg72j00.woff2 and optimized in the [Font Optimization] service (/tools/web-font-optimizer “Service for font optimization”) woff2:
| google’s original ttf | Syrillic woff2 google | Our woff2 file | |
|---|---|---|---|
| Roboto-Regular | 164.32 KB | 9.89 | 5.80 |
| OpenSans-Regular | 127.77 KB | 10.86 | 6.60 |
| Ubuntu-Regular | 292.66 KB | 20.37 | 6.59 |
The use of the google fonts CDN service is compared with files optimized in the service on a regular page with Russian and English text. The Woff2 format.
| File size | Number of files | |
|---|---|---|
| CDN service | CSS file 1.29 KB Roboto cyrillic regular 9.89 KB Roboto latin regular 18.10 KB Total 29.28 KB |
2 fonts + 1 CSS = 3 files |
| Font Optimization service | Combined Cyrillic and Latin file together 7.15 KB | 1 font |
Use the most up-to-date file formats
It’s simple: use the woff2 format, not ttf, otf or woff. In order for the browser to use it, it must come first in the list of font files.
Font glyph reduction
If you use a font file with glyph icons like Font Awesome, Typicons, Iconic and others, we recommend replacing them with SVG versions and inserting them into your CSS code. [this service] will help you translate SVG code to CSS(https://bloggerpilot.com/en/tools/svg-to-css /).
This is the most modern and efficient way to store glyph icons for the following reasons:
- By placing SVG icons in a CSS file, you save 1 request for uploading a separate font file.
- Icons saved in CSS can contain more than 1 color. When using a font file, you need to go to tricks to use multi-color icons.
- SVG icon code is compressed together with CSS code, which provides a high degree of compression. After all, the larger the file, the better gzip technology works.
If using the SVG icon format causes difficulties for you, then try to simply remove all unused icons from your glyph font files. You can create such a file in the services [fontello.com ](https://fontello.com /) and [icomoon.io ](https://icomoon.io/app /).
Number of fonts
Ideally, you should use only 2 fonts: regular for text and bold for headings. This is useful not only in terms of page loading speed, but also in terms of design.
Using the minimum number of fonts, you will get:
- Monotonous text, which is easier to perceive. Users will get tired more slowly while reading the text.
- Overdoing the variety, the design will lose uniformity and consistency. A person can get confused and it will be more difficult for him to intuitively understand the structure and framework of the page.
Caching fonts in the browser
Be sure to specify a long caching time for font files. This is done in the web server settings.
In nginx, in the virtual host settings, specify
location ~ \.(|woff2|woff|ttf|otf)$ {
expires 1y;
add_header Cache-Control "public ";
etag on;
}
In apache, enable the expires and deflate modules with the a2enmod expires;a2enmod deflate;service apache2 restart command. Then add to the configuration file of the virtual host or .htaccess the following lines:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/woff
AddOutputFilterByType DEFLATE font/woff2
AddOutputFilterByType DEFLATE font/opentype
</IfModule>
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2
<IfModule mod_expires.c>
ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
ExpiresByType font/ttf "access plus 1 year"
ExpiresByType font/otf "access plus 1 year"
ExpiresByType font/woff "access plus 1 year"
ExpiresByType font/woff2 "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
</IfModule>
Your web server will start sending the “Expires” header, which instructs the browser to store and not re-request files for 1 year. This is the most efficient caching method.
Preloading files
Links to font files are contained in CSS files. It turns out that in order to download the font, you need to complete a chain of 3 links: download the HTML code of the page - > download the CSS file - > download the font file.
Until the font file is loaded, the browser will hide the page text from the user. This is how the font display strategy set by the font-display command works by default. But more on that below.
You can instruct the browser to download fonts immediately, thereby reducing the chain to 2 links: loading the HTML code of the page → loading the font file.
To do this, directly in the HTML page code in the <head>' section specify the preload tag:
<link rel="preload" href="/dir/font-name.woff2" as="font" type="font/woff2" />
This way the font file will load faster and the text on the page will appear 50-120 milliseconds earlier.
Compatible with older browsers
It will be enough for you to download fonts in 3 formats: woff2, woff, truetype. This provides support in the following browsers: IE 9+, Edge 1+, Chrome 3.5+, Safari 3.1+, Firefox 3.5+, Opera 10.1+, Android 2.2+, Safari for iOS 4.2+. This is 98.39% of all Internet users according to the website caniuse. Or all users whose browser was released after 2010.
Backup and secure fonts
Your font files may take a long time to load. You need to set backup and safety fonts so that the browser can temporarily use them while the main one is loading.
To do this, in the <body> tag of the HTML code of the page, specify the fonts in the style attribute like this:
<body style="font-family: Tahoma, Verdana, sans-serif">
Tahoma and Verdana fonts are usually installed on the user’s operating system, be it Linux, Windows or macOS. Therefore, they serve as backup. If for some reason there are none, then the default font of the sans-serif family will be used. It’s called a safety net.
A selection of combinations of backup + safety fonts is available [here] (https://www.w3schools.com/cssref/css_fonts_fallbacks.php ). Choose the one that is closest to your main font.
Font acceleration errors
Handle font-display and text twitching when loading
The font is set by the font-family command. Moreover, at least 4 fonts are specified. For example, the code font-family: Roboto, Tahoma, Verdana, sans-serif means the following:
- Use the Roboto font as the main one, if it is available. Files of this font are downloaded by the browser in separate requests.
- If there are none, then use the Tahoma or Verdana backup fonts. These fonts are installed by default in the operating system. Therefore, they can serve as a temporary replacement for the main font. That is, these are backup fonts. A good selection of backup fonts is available here.
- If backup fonts are not available, use the font of the sans-serif family used in the default browser. It’s called a safety net.
You can use the font-display command to specify a font loading strategy. It can take the following values:
- Auto — default behavior. The “block” mode is most often used, which is described below.
- Block - Wait 3 seconds until the main font is loaded. All this time the text is hidden from the page. If the main font did not have time to load, then we use a backup or safety font. As soon as the main font is loaded, switch to it. That is, in this variant, the text can be hidden from the user for up to 3 seconds.
- Swap — we use a backup font or a safety font right away. When the main one loads, we use it. The text is displayed on the page from the first second.
- Fallback - Wait 0.1 seconds until the main font loads. All this time the text is hidden from the page. After that, we use a backup or safety one. If the main font managed to load in 3 seconds, then we use it. If the main font did not have time to load in 3 seconds, then we continue to use the backup or safety font.
- Optional - wait 0.1 seconds until the main font loads. If it didn’t load, then we use a backup or safety one. Even if the main font loads, we continue to use the backup or safety font.
We recommend using auto mode, also known as block, for the following reasons:
- Letters in fonts have different sizes. Therefore, the size of the blocks in which the text is placed will vary for different fonts. By switching the font, the browser is forced to recalculate all block sizes and page structure anew, which creates a load on the processor. This affects the speed of the site and slows down its loading. This is especially true for mobile phones.
- Swap and fallback modes allow the user to see the text as early as possible. But there is a high probability that the fonts will dive after 0.1 seconds, and the user will see a sharp change in the typography of the page. This is perceived as a glitch or twitch and is perceived negatively. It is better to save the user from having to watch for abrupt page realignments during loading.
Using CDN services
It is better to use font files optimized specifically for your site. Use the [font optimization] service (/tools/web-font-optimizer) and the recommendations from this article to achieve maximum speed and convenience.
Popular Google Fonts or Adobe Fonts services are bad for the following reasons:
- File sizes. The font files of CDN services are poorly optimized and contain a large number of extra characters, for example ±, ½, symbols of a dozen currencies, letters with emphasis, etc.
- Unnecessary service operations. To download Google fonts, you need to connect to domains fonts.gstatic.com and fonts.googleapis.com . To do this, you need to perform service operations: make a request to CDN services and send a connection request. It doesn’t pay off. When downloading font files from the CDN service, they are downloaded in parallel with files from the main domain. That is, the limit of 6-8 threads per domain does not hold them back. But the font file weighs 20 kilobytes, and they need 2-3 pieces. Even taking into account the limit of 6-8 streams for downloading files from one domain, they will load faster than the browser will have time to send requests to CDN services and establish connections with servers fonts.gstatic.com and fonts.googleapis.com 3. Cross-site caching is a myth. It is claimed that if a user uploaded font files on another site, then already cached copies will be used on yours. But Google Chrome and Safari prohibit the use by different sites of cached files from third-party resources in order to combat tracking.
Output
To maximize the speed of font loading, you only need to follow a few simple recommendations. It will take 2-3 hours. But these recommendations are often neglected. We also recommend that you check your site with the Alarm Site service, which will check compliance with the recommendations described above.
Used literature: