Are there other ways to have ideal-quality images?
Of course, one of the best options is converting all the images and photos that we can to the .webp format since it's extremely lightweight. That is why we must forget about using .png or .jpg formats (if possible) since it also supports transparency. This is only applicable for images and photos.
And the icons?
With the icons it is almost mandatory to use the .svg format since this is a vector, therefore it will never be blurred regardless of its size. It has an initial size and its weight in storage will depend on it. This format is recommended only for icons and decorations such as background confetti. In images, it is only valid if they are graphic drawings with little detail since if we use a .svg the site will be slow, and it will be very heavy to draw due to the processor of our device.
We can get great icons around the web but one of the favorites is Hero Icons. You just have to copy it to paste it into your HTML or download the .svg fileIf you decide to copy it, you need to know that these icons change color simply by changing the font color with CSS. It is magical and we can use it for the hover effect or change colors as you want. If you have the .svg file when you insert it into a <img> you won't be able to do the color change dynamically, but you can use the CSS opacity property for a minimalistic hover in this case.
Here is the link so you can access these icons:
Fonts, beautiful fonts...
To make optimal use of fonts on our website, we must optimize their loading on our site and there are several things we can do about this.
Download and use them locally
We commonly use an @import from google fonts, but processes can always be improved.
Let's imagine we downloaded a font called DM Sans and now we have something like this:
./DMSans-regular.ttf
./DMSans-italic.ttf
./DMSans-bold.ttf
To use them on our website we must add this to our CSS to import them:
@font-face {
font-family: "DMSans";
src: url("./assets/fonts/DMSans-regular.ttf") format("ttf");
}
@font-face {
font-family: "DMSans";
src: url("./assets/fonts/DMSans-italic.ttf") format("ttf");
font-style: italic;
}
@font-face {
font-family: "DMSans";
src: url("./assets/fonts/DMSans-bold.ttf") format("ttf");
font-weight: 700;
}
To use it we simply write on our CSS font-family: 'DMSans' as we usually do.
Now to simply use it in our CSS we write font-family: 'DMSans' as usual.
We can preload our fonts so that our site does not have weird effects and also without blocking the loading of the remaining content, optimizing the load by a lot. It is much easier than the previous way since to import our font we only have to add it in this way in our <head> tag:
<head>
<!-- ... -->
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
</head>
More on the subject here:
Garima Mimani
In the case of tailwind we do the same to import it but to use it properly we must import it in its configuration file tailwind.config.js.
CCS Styles and Scripts
This section is very special, we must understand that the first thing that loads from our site is an HTML file, and after that, we start from <head> down.
This causes some Scripts or files to load and run before others. For example, a .js file can load before the <body> content and if the .js file is too heavy, it will take longer to load our website. Something similar happens with our CSS. But the solution is not to move everything to the end of the <body>, because we will make our site crash or not look aesthetically ideal while loading.
The solution is a bit complex but in short: We must prioritize critical CSS and chunk our scripts. To be able to have a parallel loading of these while the content loads, as well as loading important styles first.
This topic is very extensive, but below you will find several links so you can delve deeper into them.
Demian RenzulliMay 2, 2019 • Updated Aug 11, 2020Houssein Djirdeh
To finish, let's see how to improve the User Experience a bit with Lazy Load in videos and images in HTML and others that can be just as useful.
Lazy Load in Videos & Images
In short, this helps us to load images and videos only when the user scrolls down and these are visible on the screen, achieving a shorter loading time on our website. More about this at:
Jeremy WagnerLayout Tip
It's not set in stone, but it's a great idea to use <section> and <article> to divide your site into sections like a stack of boxes, where each box is a section, and each <article> is a part of that section.
This way if we delete or want to move sections out of order, it will be easy to do, and we can concentrate better.
Finally, we can use this mini structure to limit content on huge screens.
<!-- Este elemento tendria el 100% del ancho de la pantalla y contendria el fondo de la seccion o bien decoraciones -->
<section>
<!-- Este elemento puede estar centrado y con un ancho maximo para el contenido -->
<div>
<article>
<!-- Contenido aqui -->
</article>
<article>
<!-- Contenido aqui -->
</article>
</div>
</section>
In this way, on an ultra-large screen, the content will not be deformed, but the section will continue to cover 100% of the width.
Contrast
It is very important that the background color and the text color have a minimum contrast of 5 points or AA. A good contrast allows us a comfortable reading and therefore a better UX.
To check if a text has good contrast with its background color we can use this website.
https://coolors.co/contrast-checker/
More info here
Dave GashIf you start implementing these practices bit by bit you'll notice a difference and better results. Hope you find it useful!
