В современном мире веб разработки скорость загрузки сайта необычайно важна, так как каждая секунда может повлиять на потерю продаж, а также на позиции сайта в Google. В ноябре 2018 PageSpeed Insights обновился до неузнаваемости, изменив алгоритм поисковых систем, став так сказать копией Google lighthouse. Так, проанализировав Ваш сайт в Google PageSpeed Insights на оптимизацию скорости сайта, вы поймете, что в данный момент сначала учитываются не правила, как раньше, а скорость загрузки первого контента. Если оптимизация скорости работы сайта важна для вашего сайта стоит обратить внимание на некоторые моменты.
Подключение шрифтов
При подключении шрифтов использовать свойство font-display:swap. Оно отложит на некоторое время загрузку ваших красивых и тяжелых шрифтов, используя на это время стандартный шрифт браузера. Это сразу уберет ошибку Google PageSpeed и повлияет на оптимизацию скорости работы сайта Google.
Изображения, фото и видео
Используйте тег picture и современные форматы изображений, это очень важно для обновленного Google PageSpeed. Пользуйтесь сервисами сжатия изображений и так же по возможности используйте lazyloading. В видео все немного загадочнее, существует множество форматов, но не многие знают, что формат — это лишь внешняя оболочка. Внутри видео состоит из трех частей: видео кодек, аудио кодек и контейнер. Если вы используете видео в формате avi, то это указывает только на то что контейнер в этом формате, а внутри могут быть использованы различные кодеки. Так вот h262, AV1, Sequence кодеки которые помогут вам сжать видео на 30% -50%. После оптимизации контента с помощью google developers вы будете наблюдать увеличение показателей сайта по скорости загрузки.
CSS и JS
Минифицируйте и сжимайте все CSS и JS файлы в обязательном порядке. Это можно делать как с помощью онлайн сервисов, так и с применением Gulp, Grunt, Webpack. Если используете последнее, то будет незаменимым использование PostCss или умных плагинов, таких как CSS Nano, который не только поработает над размерами ваших файлов, а и проведет дополнительные оптимизации. Используйте critical CSS для вашей страницы. Суть состоит в том, чтоб не подгружать сразу все стили, а только те, которые нужны для отрисовки первой видимой части страницы. Для этого существуют онлайн генераторы на подобии critical path generator или плагин для Gulp . Что касается JS файлов, то следует в тег script добавлять свойство async, во все кроме библиотеки jquery. Стараться не использовать массивные библиотеки без надобности. Также желательно библиотеки заливать одним минифицированым файлом (также используя сборщики упомянутые выше). Оптимизация скорости загрузки сайта с помощью этих действий даст вам хорошее количество баллов и более быстрый рендеринг страницы
PHP оптимизация скорости сайта
Это подразумевает под собой использование кеша. Суть заключается в том, что файлы, которые использует сайт не подгружаются с сервера, а уже хранятся на компьютере. Правда этот способ подходит только тем, у кого сервер Apache, если вдруг с этим есть проблемы и PHP оптимизация скорости сайта вам не подходит, стоит посмотреть в сторону Servise Workers. Servise Workers это современная альтернатива PHP оптимизации скорости сайта. Данный инструмент является скриптом, который браузер запускает в фоновом режиме отдельно от страницы не требующий взаимодействия с пользователем. Единственное это вам нужно предоставлять ваш код по протоколу HTTPS - это требование безопасности. Многие функции данного инструмента по умолчанию встроены в браузер.Servise Workers прогрессивный инструмент для оптимизации скорости работы сайта.
Сокращение структуры DOM
Тоже не маловажный пункт, особенно если ваш сайт на стадии разработки. Технические ошибки сайта тоже оцениваются и не стоит их допускать. Следует избегать максимальных вложенностей, и лишних элементов на странице.
Подведем итоги Большинство способов, приведенных в статье не очень сложно внедрить в проект. Следует придерживаться вышеупомянутых практик для вашего сайта, и более быстрая загрузка страниц не только повысит удобство использования сайта, но и поможет стать выше в поиске Google и других поисковых системах.
