Показатели в первую очередь основываются на скорости загрузки страницы. Из этого следует, что оптимизацией стилей, скриптов и изображений в принципе можно ограничиться, особенно если это небольшой сайт.
Немного полезных практик:
1. Размещайте скрипты в конце документа, стили можно и в теге
<head>
2. Для скриптов указывайте атрибут async (бывают исключения)
3. Для того, чтобы стили действительно загружались после загрузки всего DOM, подключайте стили следующим образом:
<link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css>
4. Вынесете важные стили для контента, видимого сразу после загрузки страницы в тег
<style> отдельно от основного .css-файла
5. Располагайте шрифты рядом с css-файлами
6. Избегайте большой вложенности во всем, особенно в css-селекторах
Плохо:
div > p:nth-child(5) > b.color-red {
color: red;
}
Хорошо:
.color-red {
color: red;
}
7. Для изображений можно использовать новый формат .webp
В теории можно шрифт в localstorage положить, но не знаю, насколько это актуально
А вообще, на этом не следует заострять внимания. Главное руководствоваться здравым смыслом
Простой
Средний
