Telegram, whatsApp, тел.:
8 (918) 0538468, e-mail: info@webstyling.ru

Как оптимизировать сайт для GooglePageSpeed

Как оптимизировать сайт для GooglePageSpeed 1. Удалите повторяющиеся модули из пакетов JavaScript
На самом деле оптимальный подход, который мы чаще всего используем - это написание скриптов с 0 без использования сторонних библиотек. Слайдеры, всплывающие окна, фотогалереи, скрипты для ускорения скорости загрузки сайта и др. Это идеальный вариант с точки зрения ускорения загрузки. Эта часть работы занимает в среднем от 1 до 7 дней, в зависимости от сложности сайта.

2. Загрузка шрифтов локально. 
Например, при использовании шрифтов от Googlle https://fonts.google.com/  Несмотря на то, что Google создал сервис для использования онлайн-шрифтов, он всё-же выдает ошибку в своем сервисе PageSpeed Insights и рекомендует устанавливать шрифты локально.
3. Оптимизация(уменьшение веса) изображений шаблона.
Самая простая и понятная часть оптимизации сайта. Достаточно просто загружать на сайт уже оптимизированные изображения(для оптимизации можно воспользоваться онлайн-сервисом, так как соотношение качество/размер получаются лучше, чем, например, при сохранении через Photoshop, я пользуюсь iloveimg.com, хотя можно использовать любой другой сервис или программу.) или настроить автоматическую оптимизацию при загрузке в вашей системе управления.

3. Оптимизация(уменьшение веса) изображений, которые будут загружаться через систему управления.
Для этого необходимо провести работы по настройке системы управления. Но если необходимо уменьшить уже загруженные изображения, возможно потребуется написание специального скрипта.

4. Отложенная загрузка скрытых изображений.
К сожалению большинство скриптов, которые используются для LazyLoad - так называемой ленивой загрузки, делают невидимыми изображения для поисковиков, что ухудшает поисковое продвижение, так как оставляют пустым атрибут src при загрузке страницы. Мы решали эту проблему написанием собственного скрипта, создающего не только ленивую загрузку для <img>, но также и для фоновых изображений. 

5. Использование ксс-файлов для разных разрешений.
Пример:  <link rel="stylesheet" type="text/css" href="style.css" media="screen and (min-width:500px)">

6. Предзагрузите изображение для элемента "Отрисовка самого крупного контента"
Пример реализации: <link rel="preload" as="image" href="img.jpg" />

7. Использовать подходящие размеры изображений

8. Используйте минимизированные версии css и js файлов

9. Задать ширину и высоту для всех изображений

10. Настройка кэша. 
Кэширование скриптов, изображений и компонентов, также сильно влияет на скорость загрузки страницы.

11. Использование разных изображений для разных разрешений экрана.
Это позволит ускорить загрузку сайта на мобильных устройствах.

Возврат к списку