Business Benefits
Increase search rankings, engagement, and sales. How the design looks will impact performance as much as how it is coded.
Limit the number of fonts to approximately two and use as few weights as possible.
Using multiple fonts can seriously impact site speed as they can become large and require downloading individually.
You can reduce the download size of fonts by using fewer weights of any particular font. For example, if you do not use a “light” version, this does not need downloading.
If you wish to use multiple weights, consider using a variable font that can adapt its weight programmatically.
Consider establishing tone through typography, color, and layout rather than imagery.
Imagery accounts for the majority of a “website’s weight.” If you find yourself using images a lot for purely aesthetic purposes rather than content that conveys meaning, consider alternatives.
You can set the tone using color, typography, or layout instead.
It is possible to create a compelling website without using images.
Pick photography with a prominent subject and as little detail as possible to maximize speed.
To ensure images download as fast as possible, they are compressed to reduce their file size. However, detailed photographs (such as a crowd) will not compress as well as a single prominent subject (such as a portrait).
Too identically sized images with the same compression can have two very different file sizes.
Favor using vector-based illustrations as these can be delivered as fast loading SVGs.
When using imagery, consider using illustrations instead of photography. Most illustrations compress better than photographs because they use flat color, and many illustrations are vector-based, meaning they can be served as fast-loading SVG files.
Use SVG for icons rather than images as these can be changed with code to create things like rollover effects, avoiding loading multiple images.
You can use SVG for icons as well as illustrations. Using SVGs for icons allows you to create multiple states (such as hover) just using code, rather than downloading multiple versions of a single icon. For example, if you wished to change the color of an icon on hover, you can do this without creating a second image.
Avoid using purely aesthetic video, such as video backgrounds.
Video is great for product demos, testimonials, and more, but it does take a long time to download. Therefore avoid using video unless it significantly improves conversion and provides real value to the user.
For example, it is unwise to use a video as a background because it does not convey valuable information to the user. It is also distracting, making it hard to read other copy.
Instead, consider a static image or subtle animation.
Do not use animation that requires lots of Javascript, as this will slow older mobile devices.
When using animation on a website, keep it as simple as possible. Complex animation uses Javascript that can run poorly on mobile devices giving the impression of a slow site.
Last edited by @hesh_fekry 2023-11-14T10:50:39Z