Простые и полезные советы, которые позволят вам максимально разогнать сайт без необходимости закапываться в метриках Google PageSpeed и Lighthouse.
JavaScript
- Вместо JavaScript старайтесь чаще использовать HTML5 теги: <input type=date>, <input type=time>, Details/Summary и т.д.
Мы очень часто забываем или даже не знаем о готовых решениях встроенных в браузеры, которые лучше будут работать под разными устройствами и которые не требуют дополнительного JavaScript кода. - Используйте минификацию JavaScript кода.
- Постарайтесь вынести весь ваш JavaScript код в футер или отложенную загрузку и чем меньше JavaScript будет в <head>, тем лучше будут показатели в Google PageSpeed.
- <script src="путь-к-файлу"> требует дополнительного обращения к серверу, помните об этом.
Если вместо JavaScript файла, вставить в футере содержимое файла:
<script> содержимое файла </script>
Тогда первая загрузка будет быстрее, но не будет кэширования JavaScript файла.
Отложенная загрузка
- Используйте ленивую (отложенную) загрузку для изображений, iframe, video, audio, javascript и других подобных объектов. Ее стоит включать для элементов, которые находятся в попапах или на втором и следующих экранах на странице.
Для этих целей есть множество библиотек: lazyload, lazysizes, autoload и т.д. - В Chrome можно использовать нативную ленивую загрузку.
- ВК предлагает размещать подключение JavaScript кода в <head> для работы их виджета комментариев, но это понижает Google PageSpeed и скорость загрузки страницы.
Вместо кода, который предлагает ВК:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Comments block will be --> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
Вставляем чуть измененный код под отложенную загрузку:
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
В результате получаем код, который загрузится только когда экран долистает до виджета.
Код карты, который предлагает вставить Google на сайт:
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Если карта находится в попапе или далеко в футере, то человек зайдя на вашу страницу, сразу же начнет подгружать очень много лишнего из этого фрейма и скорость загрузки подобной страницы будет очень низкой, Google PageSpeed вам поставит минус и большой!
Вставляем чуть измененный код под отложенную загрузку:
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Все сводится к тому, чтоб не давать браузеру src="" сразу, а только когда человеку это реально понадобится. И так со всеми объектами!
Jquery
- Если есть возможность, то не используйте Jquery у себя в проектах и это значительно повысит скорость вашего сайта, но если уже используете, то постепенно заменяйте на чистый нативный JavaScript.
- Если вы подключаете Jquery в <head>, то это блокирует отображение страницы, так как браузер ожидает пока загрузится все что находится в <head>, а уж потом показывает страницу. Но так как сама библиотека маленькая, а инет у всех быстрый, то это слабо влияет на скорость, гугл если и понижает рейтинг, то примерно 0.5, хотя раньше 10 или 20 очков снимал за такое...
- Весь Jquery код, который вы написали или Jquery библиотеки, которые вы используете, лучше поместить в футер сайта, из-за блокировки отображения. Если не можете перенести в футер, то возможно вам стоит использовать отложенное исполнение кода, статья на эту тему: Safely using .ready() before including jQuery.
Шрифты
- Google Fonts
- Если Google шрифт подключали давно, то обязательно подключите его по новой, так как важно наличие в урле &display=swap — это новая опция, которая влияет на Google PageSpeed и она разрешает показывать текст на странице до загрузки шрифта… не всегда это красиво, но увеличивает скорость отображения сайта… и влияет на Google PageSpeed
- Если есть возможность заменить Google шрифты своими шрифтами, то так и сделайте, лучше если шрифты будут на вашем сервере, это тоже повышает скорость.
- Когда выбираете шрифт на Google фонтс, постарайтесь выбрать по минимуму опций, выбирайте только то, что вам нужно, и если вы не используете на сайте наклонный шрифт или толщиной 200, то в настройках не выбирайте это, так как это повлияет на скорость загрузки.
- Свои шрифты
- Проверьте наличие css стиля font-display: swap; в ваших шрифтах, Google PageSpeed обращает внимание на это, и занижает показатели, если этого стиля не стоит:
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } - Если подключаете шрифты через отдельный файл стилей, то это влияет на время первого рендеринга и уменьшает показатели у Google PageSpeed, лучше так не делать:
<link href="/fonts.css" rel="stylesheet">
Если вы подключение шрифта вставите в <head> через тег <style>, а не через <link>, то это улучшит скорость загрузки и показатели Google PageSpeed, так как браузеру не нужно будет отдельно обращаться за вашим файлом стилей:
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head> - Если есть возможность, то уберите все лишнее, то что вы не используете, из ваших файлов шрифтов, чтоб повысить скорость загрузки.
- Можно сделать двухэтапную загрузку шрифтов: Developing a Robust Font Loading Strategy for CSS-Tricks
- Проверьте наличие css стиля font-display: swap; в ваших шрифтах, Google PageSpeed обращает внимание на это, и занижает показатели, если этого стиля не стоит:
CSS
- Старайтесь избавляться от лишнего CSS кода, под старые браузеры, в том числе от префиксов -moz- -o- -ms- -webkit-
- Старайтесь не загружать стили, которые не используются на этой странице, но используются на других страницах сайта.
- Если есть возможность, то стоит подгружать куски CSS и HTML кода через отложенную загрузку.
- Подгружать стили при помощи <link href='st.css' rel='stylesheet'> замедляет первую загрузку страницы и ее рендеринг, но дает возможность кэширования браузером этого файла.
Если у вас уникальные стили для каждой страницы или вам важнее чтоб первая загрузка страницы была чуть быстрее, то вместо файла вставляем тег style:
<style> содержимое файла </style> - Используйте минификацию CSS, например Cssresizer или другими подобными инструментами.
HTML
- Чем больше HTML тегов на странице, тем больше ресурсов браузеру нужно на рендеринг страницы, и это сказывается на показателях Google PageSpeed, но только если ваша страница слишком перегружена тегами.
- Избегайте чрезмерной вложенности HTML тегов, на это тоже обращает внимание Google PageSpeed.
- Стоит чистить свой HTML от кода для старых браузеров, так как обычно именно такой код создает огромное количество лишних и вложенных тегов.
- Количество тегов и вложенность, особенно сильно влияют на Google PageSpeed для мобильных.
Изображения
- Используйте тег <picture>, чтоб можно было использовать современные форматы изображений (JPEG 2000, JPEG XR и WebP). Google PageSpeed обращает на это внимание, если у вас нет ленивой загрузки изображений.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Тест"> </picture>
Так же можно использовать media и подставлять разные изображения под разные разрешения и разную плотность пикселей.
<source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">
Подобное полезно как для картинок, так и для видео.
Минус: нужно много места, ибо придется хранить разные форматы картинок (видео) и под разные разрешения. - Используйте ленивую загрузку для всех изображений, которые находятся в попапах или на втором и следующих экранах на странице.
- Используйте максимальное сжатие картинок, на это тоже обращает внимание Google PageSpeed. Инструментов для сжатия много, один для примера: compressor.io
Серверные настройки
- Включить кэширование статических файлов (шрифты, скрипты, картинки, css и так далее), при этом установить год кэширования, иначе гугл ругается.
- Включить gzip сжатие.
- Используйте HTTP заголовки Last-Modified и If-Modified-Since для кэширования страниц.
Связь
- Результаты сильно зависят от удаленности вашего сервера от вас. Если вы находитесь на Гаваях, а сервер в Москве, то результаты для вас будут плачевные.
- Результаты зависят от вашего сервера и компьютера, и если во время тестов сервер или компьютер был перегружен чем-то, то будет плохой результат.
Заключение
Выжать PageSpeed 108 или больше пунктов невозможно :)
Даже 100 пунктов выжимать под мобилу бессмысленно. Мы должны стремиться к 100, а не впадать в параною! Это всего лишь один из многих показателей, которые важны для сайта.
Можете посмотреть пример страницы, где показатели для мобилы 97-98 и 100 для компа.
На этой странице есть 2 ютуб видео в попапах и видео активируется только когда попап открыт.
Все фотки помещены в ленивую загрузку.
Весь JavaScript вынесен из <head> в футер страницы.
Но при этом в <head> подключаются: Jquery, GoogleFonts и Яндекс(Google) счетчики.
Стили вставлены в тег <style> код-стилей </style>.
<picture> на этой странице не используется.
На странице есть целый ряд разделов, которые присутствуют на странице, но доступны только по прямой ссылке для клиентов, их нужно будет сделать подгружаемыми по необходимости, что уменьшит количество html и css кода.
Спасибо за внимание!
