Increase search rankings, engagement, and sales. How the design looks will impact performance as much as how it is coded.
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.
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.
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.
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.
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.