Здравствуй, уважаемый друг!

Кажется, ты используешь AdBlock. Этот проект развивается и существует за счет доходов от рекламы.
Добавь, пожалуйста, нас в исключения.

Спасибо за понимание.

Создание сайтов Харьков

PageSpeed Insights: как добиться 100/100 и зачем это нужно?

18 февраля 2015 в 18:49 Автор: Nikita_Sp в категории Создание сайтов 45 комментариев

Инструмент PageSpeed Insights был представлен компанией Google в 2011 году, и за время своего существования успел набрать определенную популярность среди разработчиков и SEO оптимизаторов и ввести их в заблуждение, заставив убрать все стили и все js файлы из кода страницы.

Google PageSpeed Insights

Сегодня мы обсудим этот инструмент, узнаем как получить результат 100/100 на PageSpeed Insights, и действительно ли это необходимо: влияет ли это на выдачу или другие показатели сайта.

Что такое PageSpeed Insights?

PageSpeed Insights — это бесплатный сервис рекомендаций разработчикам веб-сайтов по ускорению отображения страницы в браузере клиента. Принцип работы сервиса:

  • анализ страницы по указанному адресу;
  • перечисление элементов страницы, приводящих к замедлению её прорисовки;
  • рекомендации по устранению проблем замедления прорисовки страницы.

Таким образом, суть данного инструмента заключается в предоставлении рекомендаций для ускорения прорисовки непосредственно данных страницы в браузере пользователя, а не ускорение загрузки самой страницы целиком.

Для чего это нужно?

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

Как видит посетитель вашу страницу сайта:

  1. переход по ссылке (запрос страницы);
  2. белый экран;
  3. загрузка, ожидаем;
  4. страница целиком открылась.

На практике, уже на втором шаге сама страница (html код страницы) уже загружена, и браузер, в виду структуры документа, подгружает стили, скрипты и т.п. и откладывает прорисовку, т.к. все эти компоненты расположены в начале кода страницы (обычно в <head>), таким образом откладывая отображение документа до его прорисовки.

PageSpeed Insights: вера или рекомендации

Некоторые разработчики, SEO-оптимизаторы или владельцы сайтов ошибочно предполагают, что показатель PageSpeed Insights влияет на ранжирование страниц, или же принимают его за правило оптимизации страниц, однако это не совсем так. Подтверждением того что некоторые просто «веруют» в этот сервис является скрин технического задания, которое мне попало в руки.

PageSpeed Insights: техническое задание с требованием высокой оценки

На самом деле инструмент настроен на сокращение времени между запросом страницы и началом демонстрации первых ее элементов. Также данная оценка не влияет на ранжирование страниц. Суть данной оптимизации исключительно в уменьшении времени между кликом по ссылке (запросом страницы) и первым откликом страницы (отображение первых элементов).

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

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

Полезные советы PageSpeed Insights

Основываясь на опыте, однозначно можно сказать что не все рекомендации подойдут для любого сайта, но отдельные советы данного сервиса обязательны для многих ресурсов. К таким рекомендациям я бы отнес:

Сжатие CSS и JS файлов (минимизация) — на некоторых хостингах присутствует возможность включения функции предварительной минимизации этих файлов. Сервер берет ваш файл, и минимизирует его, удаляя все пробелы, разрывы строк и из красивого и форматированного файла вы получаете одну строку, уменьшая таким образом меньший размер файла и соответственно уменьшая скорость его загрузки.

Например Хостинг Ukraine, имеет такую функцию, что позволяет минимизировать все файлы, и после обработки сервером файла файл имеет такой вид:

PageSpeed Insights: минимизированный CSS средствами сервера хостинга Ukraine

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

Cокращение HTML кода — сжатие html кода, путем удаления лишних пробелов и разрывов строк. Сродни сжатию JS и CSS. Также может быть сделано в ручную или средствами сервера вашего хостинг провайдера.

Включение кеширование и включите GZIP сжатие — установите сроки кеширования для ваших файлов, это значительно увеличит скорость загрузки вашего сайта. Данные настройки можно прописать в файле .httacess например так:


FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

<IfModule mod_setenvif.c>
BrowserMatch "MSIE" force-no-vary
BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary
</IfModule>

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text\.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image\.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</IfModule>

Оптимизируйте свои изображения — старайтесь загружать изображения в web форматах (png или jpg, например) в объективно удобном разрешении, старайтесь не использовать разрешения изображений к примеру за 2 000 пикселей по одной стороне, если это не необходимо. Объективно адекватный размер изображений варьируется от 600 до 1200-1500 пикселей.

Как я уже было отмечено выше, Хостинг Ukraine позволяет очень удобно настроить оптимизацию вашего сайта прямо в административной панели хостинга, как это выглядит, вы можете посмотреть на скриншоте:

PageSpeed Insights: настройки оптимизации хостинга Ukraine

Как добиться 100/100 на PageSpeed Insights

К сожалению оценку в 100 из 100 получить на PageSpeed Insights в моем видении для нормального сайта практически невозможно. На это влияют несколько факторов:

  1. некорректное отображение сайта, в погоне за оценкой;
  2. отсутствие возможности кешировать ресурсы, загружаемые со сторонних серверов (например Google Analytics или Яндекс.Метрика, кнопки социальных сетей, виджеты и многое другое);
  3. отсутствие возможности минимизировать ресурсы, загружаемые со сторонних серверов;
  4. сжатие изображений, которые устроят сервис, очень сильно повлияет на их качество;

Шутки ради, приведу вам пример сайта который набрал почти 100/100 по оценке PageSpeed (сайт который смог):

PageSpeed Insights: сайт, который смог

При попытках оптимизации моего сайта к 100/100 я был остановлен тем видом, во что он превращается и решил что та оценка, которая сейчас есть вполне меня устраивает, хотя и есть над чем можно поработать.

PageSpeed Insights: оценка моего сайта

Я также как и все остальные владельцы сайтов гнался за оценкой, но на стадии оптимизации изображений, инструментами, которые советует сам Google, я понял что все это фикция, т.к. оптимизировал изображения, качество незначительно ухудшалось, а оценка не росла, и сервис предлагал мне сжать их еще чуть-чуть. потом еще немного, и еще капельку…

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

45 комментариев

  • В части статьи, связанной с SEO, а также размышлений о влиянии / невлиянии скорости загрузки / прорисовки страницы в браузере — ты заблуждаешься, причем по ряду пунктов.

    Самый банальный пример, почему скорость «прорисовки» влияет на ранжирование: пользователь не дождался загрузки страницы и ушел с сайта. Это отказ. Показатель отказов — минус в ранжировании.

    К слову, для анализа скорости сайта нужно брать не только главную страницу, но каждую типовую страницу сайта: главная, каталог, карточка товара, статья блога и т.п.

    В общем — таке…

    • 1) Если речь идет о сайте который грузится >3-5 секунд, то да! Пользователь откажется и лучше ему чтото показать на начальном этапе загрузки, однако, абсолютно нет смысла менять места скриптам и стилям, если без этого сайт отображается криво? Показатель отказа может еще и из за этого ухудшиться, ты не думал?

      2) то что нужно анализировать все похожие страницы ясно как день. В статье об этом ни слова не упомянуто, не знаю к чему ты это сказал.

      3) для смеха ради приведу пример последнего сайта: http://leatherdom.ru/, его оценка 57 для мобильных и 75 десктоп, что? От чего будут отказываться пользователи? Грузиться моментально!

      Шах и мат (:sly:)

      • Продолжим дискуссию:

        1) сайт не должен грузится больше 2 секунд. Именно для этого и есть «критичсекие рекомендации» о включении кэша; gzip-сжатии; оптимизации графики. Менять скрипты и стили — это не критичная рекомендация.

        А еще про важность скорости, особенно для инет-магазина тут — http://texterra.ru/blog/kak-uvelichit-skorost-zagruzki-sayta.html Там и про 3-5 секунд написано и про другие очень важные вещи.

        2) В дополнение к статье. Этого не сказано, но это — важный момент.

        3) ок, грузится быстро.

        Ты в статье написал, что показатели page speed не влияет на ранжирование. И выполнение его рекомендаций — аналогично. Но это — неправильно, я описал почему.

        • 1) Все верно! Об этом я и пишу, что 100/100 на сайте практически нереально достичь, т.к. существуют объективные барьеры, такие как коды аналитикс и метрики, которые ты не сожмешь и не закешируешь, т.к. они на удаленном сервере расположены.

          Статью почитаю на досуге.

          2) Важный момент, согласен, но статья не по теме «Как проверить сайт в Google PageSpeed Insights».

          3) Ну вот, тем не менее, оценка у него низкая из-за того что скрипты вверху. Лично мне кажется что можно добавить 1-2 секунды и заставить подождать пользователя загрузку стилей и скриптов чтобы он увидел красивую конечную страницу, а не разваленное что попало.

          Более того данная ситуация имеет место быть только при ПЕРВОМ посещении пользователя.

          И по большому счету ОЦЕНКА не влияет на ранжирование, более того я отметил рекомендации, которые ОБЯЗАТЕЛЬНЫ к выполнению, а скорость загрузки сайта не изменится даже если скрипты в самый низ скинуть.

  • Добрый день, добавил инструкции которые написаны в данной статье в файл .httacess претензии к кэшированию и сжатию файлов у page speed insights остались, что делать в данном случае. Перепробовал разные плагины для кеша — итог тот же.

    • Добрый день,

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

      2) В остальных случаях нужно разбираться и копать.

      • Убрал код счётчика Яндекс Метрика из футера (Аналитикс не устанавливал), к сожалению проблемы кэшем и сжатием файлов остались. как думаете, стоит ли обратиться в службу тех поддержки хостинга своего с данным вопросом?

        • 1) Посмотрите список файлов на которые он ругается и проанализируйте почему
          2) Попробуйте пообщаться с поддержкой, возможно они быстрее настроят все это либо у них могут быть выключены некоторые модули.

          • В кэшировании ругается на изображения и плагин социальных кнопок uptolike.
            В сжатии сложнее, тут файлы .css и .js темы и важных плагинов (слайдера, лайтбокса)

          • ну так если файл находится не на вашем сервере, то я так понимаю его не закешируешь, об этом и шла речь когда я говорил про гугл аналитикс и яндекс метрику.
            Изображения на вашем сервере?
            Лично я сжатие организовываю через панель хостинга, у меня есть такая настройка. Так же там можно объединять файлы css и js, но от этого может поламатся всесь сайт, так что это не самая популярная опция.

          • Изображения на моём сервере находятся само собой, а плагин социальных кнопок uptolike вообще можно отключить — не много в нём смысла. К сожалению не нашёл в панели хостинга настройки сжатия (хостинг thehost). Задал вопрос по кэшированию и сжатию файлов в тех поддержку хостингу — посмотрим на ответ. Данный вопрос скорее больше принципиальный, очень хочется понять, что и как настраивать.

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

  • Проблема с метрикой и GA решается простым копированием .js файлов на свой сервер (могут возникнуть проблемы при обновлении).

  • Изображения нужно сжимать специальными программами. Например, jpeg-файлы нужно сжимать прогой jpegtran.

    • Пользовался программой, которая предлагается (рекомендуется) самим гуглом — результат — тот же.

  • Чтобы Google pagespeed insights не ругался на кэширование надо установить срок кэширования 8 дней или больше. Если поставить 7 дней или меньше, будет ругаться.

    • Хммм, попробую, но думаю что это сильно не спасет.
      Спасибо за подсказку.

  • В том то и дело, что нормальный сайт, нагруженный стилями и JS не будет иметь 100%. Поэтому я и делюсь своими результатами и мнением.

    Если хотите — можете показать ВАШ сайт или любой сторонний сайт со 100% на PageSpeed. С удовольствием буду парировать и отвечать на ваши комментарии. Ведь в споре рождается истина.

  • Это неразумно гнаться за 100%. Вся проблема в том, что на сторонние ресурсы не как не повлияешь, вроде иконок соц сетей, виджета ВК и т.д.
    А самое странное это то, что у меня на сайте маленькие картинки, но при клике они увеличиваются, и pagespeed это не учитывает, он предлагает сделать картинки полностью такими маленькими, поэтому к каждой картинке говорит, что ее можно сжать на 99%.
    Да кстати, после проверки pagespeed предлагает скачать оптимизированные файлы, и когда их скачиваешь, то там просто жесть, все картинки нереально мелкие.

    • Аналогичная ситуация и абсолютно солидарен с вами. Не знаю кто постоянно форсит людям и навязывает погоню за процентами в этом сервисе.

      Объективно ясно что истина, как всегда, где-то по середине.

  • Я смог решить проблему с кэшированием яндекс метрики и гугл аналитики и добился 100/100. Описал в статье в блоге http://*****

    • 1) В вашем случае абсолютно отсутствуют изображения.
      2) Зачастую перенос JS в футер сайта может привести к его некорректному отображению.

      А сайт в стиле «минимализм» (когда нет ни дизайна, ни изображений, а просто текст отцентрован в контейнере посередине) довести до 100/100 не есть огромной проблемой.

  • Доработал: 99/100, 100/100, 99/100 (1% процент отделяет от «идеала» из-за кода Google Analytics)

    • Чем пожертвовали?
      Почувствовали ли разницу в посещаемости/ранжировании/скорости загрузке сайта/удобство использования?

      • Пожертвовал дизайном. Хотя… был сайт а-ля 90-е, таким же и остался 🙂 Пришлось отказаться от кода Google AdSense (было 2 блока) — вот и всё. Сайт (главная страница) грузится 600-900 ms, об изменениях посещаемости и других параметрах говорить рано — окончательные изменения были внесены лишь вчера.

        • Было бы интересно посмотреть на сайт.
          И интересно услышать ваше мнение: как считаете, необходимо ли оптимизировать сайты под эти рекомендации и насколько это оправдано?

  • А у меня вопрос автору: как Вы относитесь к тому что pagespeed от ukraine делает адреса картинок динамическими, что плохо для индексации изображений ( на сколько я понимаю). Какая из настроек их отключает?

    • Добрый день!
      Разве они динамические? Да, они имеют в адресе переменные и я так понимаю это настройка кеша. Но адрес меняется я так понимаю при очистке кеша для того чтобы у всех пользователей в случае глобального обновления обновился контент и не закешировалось изображение старое.

      С радостью ознакомлюсь с вашим мнением.
      Спасибо.

  • Очень непросто, долго, но достиг 100 из 100 в сервисе Google PageSpeed. Мой совет, стремиться нужно, но необязательно, новичок вообще поломает сайт, плюс можно пожертвовать разными фишками на сайте и функциональностью, что опять же в минус юзабилити и так по кругу

    • Хах, вы свой сайт видели?
      У вас там 1 строка меню, и список записей с картинками. Дизайна 0.
      Ни слайдшоу фулскрин, ни слайдеров, ни анимаций, и т.д.

      Конечно такую страницу любой приведет к 100%.
      Но спасибо за комментарий)

    • Еще как не влияет. Вот:

      «Хотя скорость сайта теперь также учитывается в ранжировании результатов поиска, релевантность страницы является более важным сигналом. В настоящее время скорость сайта учитывается для менее 1% поисковых запросов и только для посетителей Google.com с запросами на английском языке. Если вы не заметили значительных изменений в ранжировании вашего сайта, вполне возможно, ваш сайт не попал под влияние этого изменения алгоритма.»

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

  • Тоже сегодня, долго убиваясь, вытянул блог про бег на 100/100. Есть меню, страницы и т.д. Да, простой диз — но вышло! Сам — не программер, что очень примечательно. 🙂

    • ну так разве это сайт наполненный CSS и картинками?
      Там нет ни галерей, ни слайдшоу, ни других примочек, которые бы разваливались в первые секунды просмотра сайта, и только после загрузки JS в конце страницы становились бы на места.

  • Для борцов за 100 из 100 и святоверующих в то, что благодаря этому, они сразу будут в топе. Открываем сервисы самого гугла и смотрим оценки.
    Ютуб: 66 https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=youtube.com&tab=desktop
    Гугл диск: 79 https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=https%3A%2F%2Fdrive.google.com%2Fdrive%2Fu%2F0%2F%23&tab=desktop
    Из топов:
    мвидео: 77 https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=mvideo.ru&tab=desktop
    эльдорадо: 67 https://developers.google.com/speed/pagespeed/insights/?hl=ru&url=www.eldorado.ru&tab=desktop
    И список можно продолжать бесконечно, 100 из 100 не является сладкой пилюлей благодаря которой Вы можете попасть в топ, это всего лишь одна из множества метрик Вашего сайта, которая Вам может подсказать что нужно внести изменения.
    А если Вы создаете сайт, который использует множество маркетинговых вещей, а не страницу, которая представляет из себя полную статику, то велика вероятность, что выполнив ту или иную рекомендация гугла полезут косяки, стоимость исправления которых, будет стоить дороже пачки хороших статей.

      • Да аж припекло от этих комментов. Такое впечатление, что люди не анализируют поисковую выдачу, сделают одну вещь, а потом сидят, чешут репу и ждут чуда.
        P.S. Дополняй раздел блога по сео опенкарта, у тебя очень и очень мало раскрыто тем по тех. косякам.

Добавить комментарий для Юрій Дема Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Вверх!

Меню блога

Категории блога

Облако тегов