В данной статье разбираем стандартные и самые простые мероприятия по улучшению скорости загрузки сайта (что положительно влияет на ваше SEO, почитайте об изменении алгоритма ранжирования Google в июле 2018 г.). Можете спокойно копировать и отдавать в разработку — там разберутся)
Отложите загрузку скрытых изображений
Чтобы уменьшить время до начала взаимодействия, рекомендуем использовать принцип lazy loading для скрытых изображений (изображений, которые не видны на 1ом экране) после того, как все важные ресурсы будут загружены.
Пример:
Используйте современные форматы изображений
Следует изменить формат изображений PNG и JPEG на один из: JPEG 2000, JPEG XR и WebP. Так как в данных форматах используется более эффективное сжатие, поэтому они загружаются быстрее и потребляют меньше трафика, чем.
Настройте подходящий размер изображений
Рекомендуем не сменить автоматическое сжатие изображений в соответствии с блоком, на использование обрезкой и изменения размера изображения к подходящей величине.
К примеру, если 1 изображение используется в различных блоках ресурса (в шапке, в товаре и разделе), оно должно иметь различные размеры и системно должно существовать 3 изображения — 1200х800, 800х600, 300х200.
Сократите структуру DOM
Разработчики браузеров рекомендуют, чтобы на странице было не более 1500 узлов DOM. Наилучшие показатели: глубина вложенности менее 32 элементов, количество дочерних и родительских элементов — менее 60. Сложная структура DOM может увеличить использование памяти, замедлить вычисление стилей и повысить затраты на компоновку шаблонов.
Настройте показ текста во время дозагрузки шрифтов
Пока веб-шрифты находятся в стадии обработки, браузеры просто скрывают текст, поэтому, даже если загружать ваш css асинхронно, текст все равно будет невидимым. Требуется указать системный шрифт по-умолчанию. Затем, по окончанию загрузки, добавить кастомный, который в этом случае будет показан моментально. Требуется создание двух селекторов: первый определит правило для шрифта по-умолчанию, второй обеспечит стилизацию текста.
Внедрите правила использования кеша для статики
Когда браузер запрашивает ресурс, сервер, предоставляющий ресурс, может сообщить браузеру как долго он должен временно хранить или” кэшировать “. Для любого последующего запроса на это ресурс, браузер использует свою локальную копию, а не обращается в сеть, чтобы получить его.
Сжимайте CSS
Прежде чем браузер сможет отобразить содержимое, он должен обработать всю информацию о стиле и макете для страницы. Браузер полностью обходит файлы js и CSS, несмотря на исключенные правила и классы, которые не используются в теле html.
Читайте в статье «Сжатие CSS сайта для улучшения скорости загрузки»
Используйте rel=”prerender”
Prerender собирает ресурсы, на которые может попасть пользователь. Принимает в фоновом режиме всю страницу, все содержание документа. Зачастую используется для указания следующей вероятной цели HTML-навигации. При этом пользовательский агент выберет и обработает указанный ресурс как HTML-ответ.
Принцип работы:
1) Запуск тега <link rel=prerender>.
2) Заблаговременное создание невидимых страниц.
3) Загрузка пользователем другой страницы, включающей выполнение JavaScript.
4) После выбора пользователем новой страницы обмен текущей страницы на скрытую.
5) Удаление скрытых страниц через небольшой промежуток.
*страницы для которых стоит исвпользовать можно посмотреть в отчете Яндекс.Метрики и Google Analytics
**для проверки корректности реализации использовать prerender-test.appspot.com
Используйте rel=”preload”
Директива preload — это новый веб-стандарт, который управляет выбором конкретных ресурсов для текущей навигации. Как правило, используется для предварительной загрузки важных ресурсов, такие как изображения, CSS, JavaScript и файлы шрифтов. Preload позволяет предварительно загрузить ресурсы, инициированные CSS и JavaScript, а также описать, когда нужно использовать каждый ресурс.
Преимущества использования:
· Позволяет браузеру устанавливать приоритет ресурса, что, в свою очередь, позволяет веб-разработчикам оптимизировать доставку ресурсов.
· Позволяет браузеру выяснить тип ресурса, что, в свою очередь, позволяет узнать, можно ли тот же самый ресурс снова использовать в дальнейшем.
· Позволяет браузеру выяснить, совместим ли запрос с политикой безопасности контента в соответствии с атрибутом as.
· Позволяет браузеру послать подходящие заголовки accept, основанных на типе ресурсов.
Пример предварительной загрузки шрифтов:
Днную рекомендацию следут реализовать на всем ресурсе, это позволит конечному пользователю навигировать и взаимодействовать с сайтом «на легке»
Используйте дескриптор для изображений
Srcset — атрибут, который позволяет вам указывать разные типы изображений для разных размеров экрана/ориентации/типов отображения. Другими словами, дает браузеру сделать выбор более корректного отображения изображения, в зависимости от экрана.
Пример реализации:
Инструкции для браузера будут выглядеть так: (max-width: 480px) 100vw — если область просмотра имеет ширину 480 пикселей или меньше, изображение будет составлять 100% ширины окна просмотра. (max-width: 900px) 33vw — если видовое окно имеет ширину 480 пикселей или меньше, это правило никогда не будет достигнуто из-за предыдущего состояния медиа. И 254px — это когда нет никаких условий для мультимедиа, длина считается значением по умолчанию, используемым, когда ни одно из других условий мультимедиа не выполняется.
Ссылки на документацию:
https://web.dev/fast/serve-responsive-images
https://www.w3.org/TR/html5/semantics-embedded-content.html#width-descriptor
Используйте CSS-спрайты
Использовать комбинированные изображения, которые содержат в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются, используя свойства: background-image и background-position.
В спрайты мы можем добавить такие элементы, как логотип, кнопка корзины, изображение кнопки поиска, изображение пометки товаров, кнопки социальных сетей.
Используйте CDN
Сервис Ускорение сайта (CDN) позволяет загружать весь статический контент вашего сайта (картинки, файлы стилей css, скрипты js) через сеть дистрибуции контента (Content Delivery Network или Content Distribution Network, CDN). Тем самым значительная часть ресурсов сайта загружается посетителем с ближайшего к нему сервера.
Поисковые алгоритмы и формулы ранжирования результатов каждая поисковая система держит в секрете. Все большее значение на результаты поиска оказывают поведенческие факторы. А это значит, что посетитель, ушедший с «медленной» страницы, автоматически понизит ее вес для поисковой системы. Ну и наконец, представители практически всех популярных поисковых систем так или иначе говорят о том, что напрямую учитывают скорость загрузки страниц в формулах ранжирования.
*К примеру модуль «Ускорение сайта (CDN)» является бесплатной дополнительной опцией для любой лицензии на «1С-Битрикс: Управление сайтом» (кроме редакции «Первый сайт»).