Site Performance: Optimizing Your Text
3 min read
Optimize text on your site to improve the visitor experience. Font types, effects, and formatting can impact your site's performance, so we recommend following our guidelines to ensure you can display important information without compromising on function.
In this article, learn more about how you can optimize text on your site:
Tip:
Having meaningful text above the fold also ensures that visitors have content to read while the rest of the site loads.
Different types of fonts
There are a few font types that you can use across your site. Depending on the type and download requirements, they vary in how they affect your site's loading speed and performance. The three font types are:
- System fonts: These are common fonts that most likely already exist on your and your visitors' device systems. As they are included in most systems, they do not need to be downloaded to appear on your visitors' devices, and therefore do not impact your site's performance.
- Custom fonts: Custom fonts are fonts that you can upload from any third party to use on your Wix site. These fonts are a personal way to enrich your site experience, but they require download from the server to appear in your visitor's browser. Therefore, these fonts can impact your site's performance.
- Fonts available from Wix: When you build and edit your site with Wix, you may notice that we offer a variety of text fonts. Some of these are system fonts while others act as custom fonts, and they affect your site's loading speed accordingly.
To sum it up:
- System fonts ultimately load faster than custom fonts, as they already exist in the system. This therefore saves bandwidth by reducing the number of requests needed to load your site.
- Since system fonts have less of an impact on your site's speed, we recommend using them in place of custom fonts where possible.
Number of fonts
When using fonts across your site, it's important to keep in mind that having multiple different fonts and font types can impact the loading time and overall performance.
While system fonts do not require download, custom fonts need to be downloaded from the server in order to be displayed on your page. Different custom fonts may also have different download speeds, which can further affect your site's loading time.
We recommend keeping the number of fonts (both system and custom) on your page at 3 and below, as this helps to keep your site running smoothly. Consistency in fonts (and colors) also helps to reinforce your brand, and keep your site's look consistent.
Font formatting and animation
Different font weights, such as bold, underline, or italics, may also impact your site's loading time. Try to keep the number of font weights on a page at 3 or below by using them for specific purposes (i.e., highlighting an area of text on your page).
Additionally, animated text can have an impact on your text's readability and SEO. This is because animated text cannot be read by search engines. We recommend using regular text for meaningful content on your site, and avoiding overuse of reveal animations above the fold.
Images of text
Avoid images that contain text where possible. Image text may appear blurry while the image is loading, and cannot be translated or crawled by search engines. Ensure that you're using standard text where possible across your site to maintain your site performance and SEO ranking.
Tip:
As an alternative, we recommend adding alt text to your images. This allows search engines and screen readers to "read" the description of the image.
Default fonts in the Studio Editor
Note:
This feature is only available in the Studio Editor.
If you're using heavy custom fonts on a Studio Editor site, you can enable default fonts. Default fonts load faster, and are temporarily displayed on the live site while the custom fonts download in the background.
Default fonts can optimize page performance by reducing the site's LCP (Largest Contentful Paint), which may improve the Core Web Vitals and Google Search ranking. Additionally, displaying text content faster can enhance the experience for visitors while they browse the site. Learn how to enable default fonts
Good to know:
- Default fonts improve the loading time if the largest element above-the-fold is a text element.
- When you enable default fonts, it adds a "swap" value to the font-display CSS descriptor. This descriptor determines how a font is displayed based on when it is downloaded and ready to use.
Did this help?
|