×
Россия +7 (495) 139-20-33

Как повысить скорость загрузки сайта с Google PageSpeed Insights

Россия +7 (495) 139-20-33
Шрифт:
12 28373

 Скорость загрузки сайта является важнейшей составляющей позитивного user experience, а также одним из факторов ранжирования сайта в поисковой выдаче. Правда такова, что сегодня пользователи не хотят ждать загрузки страницы более 5 секунд. Если ваш сайт загружается недостаточно быстро, вы теряете потенциальных клиентов.

Учитывая то, что 50% онлайн-трафика приходит с мобильных устройств, пользователи ожидают почти мгновенной загрузки сайта и в мобильной версии. В этой статье вы узнаете, как набрать 100 из 100 с инструментом Google PageSpeed Insights для мобильной и десктопной версии вашего сайта.

Мотивация

При проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет – 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.

1.jpg

Значит ли это, что результат 100/100 недостижим?

Как заставить страницы загружаться быстрее

В первую очередь необходимо отметить, что инструмент PageSpeed – это всего лишь руководство для повышения качества веб-сайтов. Инструмент предоставляет рекомендации для оптимизации веб-сайта, которая способствует повышению скорости загрузки страниц, но достижение желаемого результата зависит от настроек сервера.

Некоторые из этих шагов требуют технической экспертизы, другие – нет. Этой инструкции можно следовать в любой Системе управления сайтом.

Шаг первый: Оптимизируйте изображения

2.jpg

Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:

· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.

· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.

Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.

Шаг второй: Сократите объем ресурсов CSS и JavaScript

3.jpg

Google также рекомендует сократите объем ресурсов CSS и JavaScript.

Размер ресурса можно уменьшить, удалив ненужные байты, например, лишние пробелы, переносы строки и отступы. При создании кодов программисты часто оставляют свободные места и комментарии. Иногда, удалив их, можно уменьшить размеры файлов в два раза.

3.1.jpg

Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.

Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.

Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.

Шаг третий: Оптимизируйте время ответа сервера

4.jpg

Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.

CDN – это сеть серверов, разбросанных по всему миру, которые позволяют оптимизировать доставку и дистрибуцию контента (изображений, файлов CSS и JavaScript) конечным пользователям в сети Интернет. CDN хранит копии контента вашего веб-сайта на своих серверах. Когда пользователь заходит на ваш сайт, статичный контент загружается с ближайшего к нему сервера.

Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.

Ниже представлена схема функционирования CDN c GTmetrix.

5.png

На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.

Шаг четвёртый: Используйте кеш браузера

кеш.jpg

Использование кеша браузера предполагает, что файлы с вашего веб-сайта – изображения, файлы CSS и JavaScript – загружаются с сервера всего один раз, и браузер сохраняет их на компьютере. В следующий раз при загрузке страниц все необходимые файлы «подтянутся» с компьютера пользователя.

Чтобы использовать кеш браузера, нужно создать файл .htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.

Шаг пятый: Удалите из верхней части страницы ресурсы, блокирующие отображение

6.png

Главной проблемой, с которой приходится столкнуться разработчикам в этом случае, является перемещение кода JavaScript из верхней и основной части страницы в нижнюю часть по всему веб-сайту.

Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.

Шаг шестой: Включите сжатие

7.jpg

Включить сжатие можно в настройках вашего сервера. Если вы сомневаетесь в своей компетенции в данном вопросе, попросить вашу техническую поддержку включить сжатие GZIP для вашего сервера.

Шаг седьмой: Оптимизируйте мобильную версию

8.jpg

Адаптивная версия мобильного сайта предполагает использование правильного разрешения изображений, параметров шрифта и хорошей навигационной системы.

Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».

Вывод:

Итак, четыре наиболее важных шага, которые необходимо предпринять, чтобы улучшить качество сайта:

1. Используйте CDN.

2. Используйте кеш браузера.

3. Удалите блокирующие отображение ресурсы из верхней части страницы.

4. Оптимизируйте размер изображений и сожмите их. 

Источник: Moz

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Ане Макаровой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Екатерина Саровская
    3
    комментария
    0
    читателей
    Екатерина Саровская
    больше года назад
    Вот уж не думала что PageSpeed Insights меня может удивить, но ему это удалось! На днях, увидев новшество и потратив пол часа на его изучение, с ужасом обнаружила, что скачать оптимизированные изображения уже нельзя! Было не приятно, т.к. PageSpeed Insights обновился по тихому. Короче, что бы не быть мной)) прочтите статью как раз об этом: ifish2.ru/google-pagespeed-insights/
    -
    -3
    +
    Ответить
  • Денис Фруктоед
    1
    комментарий
    0
    читателей
    Денис Фруктоед
    больше года назад
    Всем здравия. ПОКАЗАТЕЛИ В GOOGLE SPEED МОЕГО САЙТА 100/100 sibvaleogroup.ru
    Недуги и болезни одолевали сайт по Здоровью и правильному питанию! Не так давно занялся тестированием и ускорением загрузки. Грамотный подход и конечно огромное количество времени, потому что начинал с почти нулевыми знаниями и умениями.

    Какие только методы и приемы не применял, долгие пробы и ошибки и приятный результат в виде бонуса ;). Тематика сайта очень востребована: Как начать бизнес? И...
    Всем здравия. ПОКАЗАТЕЛИ В GOOGLE SPEED МОЕГО САЙТА 100/100 sibvaleogroup.ru
    Недуги и болезни одолевали сайт по Здоровью и правильному питанию! Не так давно занялся тестированием и ускорением загрузки. Грамотный подход и конечно огромное количество времени, потому что начинал с почти нулевыми знаниями и умениями.

    Какие только методы и приемы не применял, долгие пробы и ошибки и приятный результат в виде бонуса ;). Тематика сайта очень востребована: Как начать бизнес? И Профилактика и лечение заболеваний! Натуральный ЭКО продукт! Добро пожаловать на просмотр показателей!  
    Если что обращайтесь, чем смогу помогу, только учтите, я всего лишь любитель с большим опытом! Всем респект!
    -
    -3
    +
    Ответить
  • RemontZakaz
    1
    комментарий
    0
    читателей
    RemontZakaz
    больше года назад
    На wordpress у меня не выходит, но на простенькой cms получилось.
    Ну вот сделал и в PageSpeed Insights на 100 % и в Unicorn - Совмещенный валидатор W3C код чистый.
    -
    0
    +
    Ответить
    • Sergey Poyaganov
      1
      комментарий
      0
      читателей
      Sergey Poyaganov
      RemontZakaz
      больше года назад
      А мне для своих сайтов на вордпресс удалось добиться показателя 100 из 100
      Мой проект ВЕБМАСТЕР+
      -
      0
      +
      Ответить
  • Seoved
    1
    комментарий
    0
    читателей
    Seoved
    больше года назад
    Долго мучился, но достиг 100 из 100 в сервисе Google PageSpeed. Мой совет, стремиться нужно, но необязательно, новичок вообще поломает сайт или пожертвует функциональностью в минус юзабилити.
    -
    1
    +
    Ответить
  • Лариса Колесникова
    1
    комментарий
    0
    читателей
    Лариса Колесникова
    больше года назад
    К сожалению, оптимизировала картинки, а пейдж спид "ругается" даже на шорткоды. Поставила Autoptimize в связке с WP Cash, но в пейдж спид ничего не меняется.Все так же пишет, "удалите код ява скрипт с верхней части страницы" и "используйте кеш браузера".
    -
    0
    +
    Ответить
  • Антон Чехов
    45
    комментариев
    0
    читателей
    Антон Чехов
    больше года назад
    Джон Мюллер вообще советует вебмастерам не заморачиваться насчет супер скорости сайта. Если проект медленно грузится то он будет плохо ранжироваться в Google по отношению к тем, у кого со скоростью нормально. А нормальная скорость это выше среднего по Google Speed.
    Одно дело если пользователь заходит с мобильных устройств, но для этой части лучше отдельную версию сайта использовать с минимумом графики и прочих элементов.
    -
    0
    +
    Ответить
  • Пафнутий
    больше года назад
    три шага, которые необходимо предпринять, чтобы улучшить качество сайта:

    1. Используйте CDN.
    2. Используйте кеш браузера.
    3. Удалите блокирующие отображение ресурсы из верхней части страницы.
    4. Оптимизируйте размер изображений и сожмите их.

    Толи шагов не три, а больше; толи в нашей школе учили считать иначе...
    -
    5
    +
    Ответить
  • Илья Павлов
    25
    комментариев
    0
    читателей
    Илья Павлов
    больше года назад
    Шаг 5 понравилось)) если wordpress - плагин, иначе переложите.. а если вообще нет ничего похожего на яву, а пэйджспид ругется, что делать?
    -
    0
    +
    Ответить
  • Гость
    больше года назад
    CDN нужет крупным сайтам, а какому нибудь сайту услуг, где трафик идет в основном региональный, достаточно всю статику выложить на поддомен (да бы уменьшить очередь файлов на загрузку с одного хоста)
    -
    0
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как выбрать CMS для интернет-магазина
Колян Гусляков
2
комментария
0
читателей
Полный профиль
Колян Гусляков - Если же у вас не получилось решить данную проблему, предлагаю воспользоваться авторской сборкой от neoseo. neoseo.ru/internet-magazin-seo-magazin-model. Они предоставляют дополнительные модули для работы и взаимодействия с вашим сайтом, современный дизайн, качественную оптимизацию и продвижение. Советую попробовать, не пожалеете.
«Юзабилити-лаборатория»: оставляйте заявку на участие!
Анна Макарова
381
комментарий
0
читателей
Полный профиль
Анна Макарова - Антон, добрый день! Ваш сайт не попал в основную выборку для юзабилити-анализа, но эксперты постараются сделать по вашему сайту видеоразбор (ю-ревью). Будем держать вас в курсе )
Тест по SEO – проверь свой уровень знаний
Артем Дорофеев
8
комментариев
0
читателей
Полный профиль
Артем Дорофеев - Полный текст вопроса со скриншотом панели прикладываю. Итого, что имеем: - на скриншоте отмечено, что это фильтр МПК - сайт коммерческий - рекламы на сайте нет С вероятностью 95% это ошибка (которая уже дважды случалась в Яндексе), когда они случайно "закосили" неповинные сайты. Тогда по запросу Платону фильтр быстренько снимали. Но вопрос даже не на знание этого нюанса. В любой непонятной ситуации, прежде чем что-либо предпринимать (особенно переписывать весь контент на сайте или менять дизайн, как указано в других вариантах) - фильтр следует подтвердить. Правильный ответ: "Написать письмо в техподдержку Яндекса".
Выбираем CMS для сайта с точки зрения SEO: базовые требования
SEO.RU
6
комментариев
0
читателей
Полный профиль
SEO.RU - Спасибо за замечание, действительно была допущена неточность - возможно информация была не так давно обновилась. Данные в статье поправим на актуальные.
Кейс: как за 30 дней вывести новый сайт в ТОП выдачи Google
Дмитрий
1
комментарий
0
читателей
Полный профиль
Дмитрий - Нейромаркетинговые исследования также могут положительно повлиять на продвижение сайта, я лично убедился обратившись к компании Neorotrack, и результат был отличным
100+ ресурсов по SEO для изучения поисковой оптимизации с нуля
Марина Ибушева
0
комментариев
0
читателей
Полный профиль
Марина Ибушева - Спасибо за добавление. Мы уже работаем над отдельным материалом про курсы, потому что одной статьи мало, чтобы охватить все крутое по обучению)
7 способов увеличить авторитетность сайта «в глазах» поисковых систем
Grigo5
4
комментария
0
читателей
Полный профиль
Grigo5 - Понятно.
Digital-marketing: как выжить в кризис. Опыт реальной компании
Maks
1
комментарий
0
читателей
Полный профиль
Maks - Спасибо за опыт Вашей компании, Иван Папусь. Интересно получилось! Желаю Вашему бизнесу стабильности и успешно пережить все кризисы))
SEO must go on! Почему в кризис нельзя останавливать продвижение сайта
everystraus
0
комментариев
0
читателей
Полный профиль
everystraus - Мы даже варианты не рассматривали. Если проект неустойчив, сразу предлагали сбавить обороты до минимума, но и так, чтоб не свалиться в штопор. Именно по СЕО чаще всего.
Как стандартизировать данные семантики с помощью логарифмов
Юлий
1
комментарий
0
читателей
Полный профиль
Юлий - Чем снималась коммерцелизация?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
381
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
89
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
60
Комментариев
59
Комментариев
57

Отправьте отзыв!
Отправьте отзыв!