» » » PageSpeed — реальное ускорение сайта
logotip

PageSpeed — реальное ускорение сайта

Всем привет! Сегодня на seo-mayak.com я хочу познакомить Вас с интересным инструментом для ускорения сайта, который называется PageSpeed.

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

PageSpeed сам по себе не ускоряет сайт, он лишь является инструментом анализа, но если следовать рекомендациям, основанных на результатах данного анализа, то можно ускорить сайт в несколько раз и это не шутка!

pagespeed

PageSpeed распространяется в виде расширений для браузеров, таких как Coogle Chrome, Mozilla Firefox, а также не так давно был запущен в работу онлайн сервис developers.google.com.

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

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

Мне же показалось удобней использовать PageSpeed в качестве расширения для браузера, так как оно производит анализ текущей страницы, что конечно экономит время.

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

PageSpeed для Coogle Chrome и Mozilla Firefox — скачать.

Установка расширения PageSpeed для браузера Mozilla Firefox

Установка расширения для браузера Mozilla Firefox имеет одну особенность. PageSpeed служит дополнением к другому расширению, которое называется Firebug и интегрируется в интерфейс последнего.

Если у Вас на Mozilla Firefox еще не установлено расширение Firebug, то сначала установите его, а уже потом приступайте к установке PageSpeed.

Открываем браузер Mozilla Firefox, заходим на страницу для скачивания, ссылку на которую я привел выше, нажимаем кнопку «Install Firefox Extension» и расширение PageSpeed начнет устанавливаться:

pagespeed2

После завершение процесса установки, запускаем Firebug:

pagespeed17

И видим, что на панели расширения появилась новая вкладка:

pagespeed1

Анализ скорости загрузки будет проведен для текущей страницы, после чего в окне расширения отобразятся результаты:

pagespeed11

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

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

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

Так что подписывайтесь на обновления блога и ожидайте новых статей.

Установка расширения PageSpeed для браузера Google Chrome

PageSpeed для Google Chrome является самостоятельным расширением, т.е, больше ничего дополнительно устанавливать не придется.

Открываем браузер Google Chrome, именно в нем заходим на страницу для скачивания и нажимаем кнопку «Install Chrome Extension»:

pagespeed3

Начнется установка, после завершения которой, в правом верхнем углу окна браузера появится новая иконка:

pagespeed4

Если кликнуть по иконке, то откроется такое окно:

pagespeed5

Где все написано на английском и на первый взгляд кажется, что расширение вообще не работает. На самом деле в этом окне находится инструкция по запуску PageSpeed в браузере Google Chrome.

Для запуска расширения, жмем на иконку настроек Google Chrome и выбираем пункт «Инструменты»:

pagespeed6

 В дополнительном окне выбираем пункт «Инструменты разработчика»:

pagespeed7

После, в нижней части страницы откроется консоль разработчика, в интерфейсе которой должна появится новая вкладка:

pagespeed8

После окончания анализа скорости загрузки текущей страницы, в окне консоли разработчика отобразятся результаты:

pagespeed9

Выдача результатов анализа в Google Chrome внешне отличается от выдачи в Mozilla Firefox. Здесь нет никаких пометок критичности, но в целом, выявленные проблемы те же.

Пример работы с результатами анализа PageSpeed

Лично мне больше нравиться работать с PageSpeed в Mozilla Firefox и поэтому я буду объяснять, как исправлять те или иные проблемы, на примере именно этого браузера.

Уверен, что если провести анализ сайтов, в контенте которых есть изображения, то PageSpeed выдаст следующие рекомендации: «Предоставьте изображения с нужными пропорциями» и «Оптимизируйте изображения».

Давайте разберемся, что от нас требуется предпринять, чтобы переместить строчку «Оптимизируйте изображения» в разряд решенных проблем, ну или хотя бы в разряд не первостепенных.

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

pagespeed12

Что мы видим? Оптимизация изображений, поможет уменьшить их размер в общем на 50%. Согласитесь, что цифра впечатляет.

Я специально произвел анализ страницы своего кулинарного блога, так как на seo-mayak.com все изображения были оптимизированы, еще до загрузки на сервер. Читайте статью «Оптимизация изображений. Как загружать картинки на сайт«.

Для примера возьму первое изображение из представленного списка:

pagespeed15

Итак, в конце каждого пункта есть две ссылки: «optimized version» и «Save as». Если нажать на ссылку «optimized version», то можно посмотреть, как  выглядит оптимизированная версия изображения:

pagespeed13

Как видите, качество изображения нисколько не ухудшилось.

Если нажать на ссылку «Save as», то появится возможность скачать оптимизированной изображение на компьютер:

pagespeed14

Кстати, в Google Chrome такой функции нет. Выбираем пункт «Сохранить файл» и картинка сохранится в папке загрузок.

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

Но не спешите с перезаливкой! Сначала надо выполнить еще одну рекомендацию, которая тоже касается изображений, а именно «Предоставьте изображения с нужными пропорциями»:

pagespeed16

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

На скриншоте я специально подчеркнул размеры, так как исходные пропорции сторон у картинки были 500х375 пикселей, а в редакторе WordPress они были изменены на 450х333 px. Но если бы я сразу залил картинку с нужными размерами, то мне не пришлось бы уже подгонять пропорции в редакторе, а сервер бы избавился от лишней нагрузки.

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

В будущих статьях я обязательно разберу все пункты результатов анализа PageSpeed и подробно расскажу, что с ними делать, так что следите за обновлениями.

До встречи!

С уважением, Виталий Кириллов

« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« Как включить gzip сжатие и кратно ускорить сайт
« Как включить кэш браузера на стороне пользователя
« Как сократить CSS и ускорить загрузку сайта

Комментарии: 50

  1. Кирилл:

    Виталий, я вам уже наверное надоел, со своими вопросами) Установил себе данное разрешение, и при проверке у меня красными кружочками отмечены два пункта это «Включите сжатие» и «Используйте кэш браузера» подскажите как настроить эти пункты

    Ответить
    • Виталий Кириллов:

      Кирилл, я все расскажу в будущих статьях.

      Ответить
  2. Василий:

    Спасибо, про сервис знал, но особое спасибо за то, что взялись за разъяснения как «лечить». Ждем следующих «рецептов» 🙂 .

    Ответить
  3. Ирина Жигалова:

    Давно использую это расширение. Но там просто рекомендации. Как и что сделать — вот основной вопрос. Буду ждать Ваши следующие статьи, Виталий.

    Кстати, в Хроме PS можно запустить по F12.

    Ответить
    • Виталий Кириллов:

      Ирина, я конечно знаю, что PS можно запустить клавишей F12, просто забыл об этом написать. Спасибо, что уточнили!

      Ответить
      • Ирина Жигалова:

        Да, Виталий, я это написала для читателей. Может кто не знает. Всё-таки через настройки долго лазить.

        Ответить
  4. Кирилл:

    Здравствуйте Витталий, подскажите планируется ли написание статьи про «Объединение изображений в CSS спрайты» а то остался только этот пункт.

    Ответить
    • Виталий Кириллов:

      Кирилл, да я планирую осветить данную тему.

      Ответить
  5. Евгений:

    Здравствуйте, скажите пожалуйста почему у меня постоянно появляются в папке public_html/wp-content/uploads/ вот эти файлы, они как бы заново генерируются…
    mystique-3e5431b37f783d9bb0faa43fe8f34cff.css
    и подобные, в таком формате mystique-………….css
    Их там бывает 3-6 штук! Как исправить?
    Заранее спасибо!

    Ответить
    • Виталий Кириллов:

      Здравствуйте Евгений! Ищите причину в действии плагинов. Просто так не где, ничего не генерируется.

      Ответить
  6. Евгений:

    Извиняюсь, что сразу не написал, а как сделать «При начальной загрузке страницы выполняется синтаксический анализ JavaScript»? Как его отложить?

    У меня вот такое PageSpeed показал:

    «При начальной загрузке страницы выполняется синтаксический анализ JavaScript в объеме 512.0Кб. Чтобы ускорить отображение страницы, отложите синтаксический анализ JavaScript.

    Ответить
    • Виталий Кириллов:

      Евгений, чтобы отложить синтаксический анализ JavaScript, надо все скрипты подключить через подвал (footer.php).

      Ответить
  7. Алекс:

    Вы делаете обширные и грамотные обзоры, спасибо за информацию — мир вашему блогу =)

    Ответить
  8. Ringil:

    По ссылке на загрузку можно загрузить расширение только для Хрома, есть у кого-нибудь ссылка на загрузку PageSpeed для Firefox?

    Ответить
  9. Олег:

    У меня не wordpress (а opencart), но с удовольствием читаю ваш блог, каждый раз узнаю что то новое и полезное для себя и своего сайта.
    Но сейчас из этой статьи видимо кусок уже стал не актуальным, потому что я тоже не могу установить page speed на мазилу. Мало того этот плагин под мазилу в сети фиг найдешь.
    Быть может у Вас получиться?
    (ведь с мазилой намного удобнее, у меня около 1500 картинок, а мазила с этим плагином хотя бы сразу выдает ссылку на изображение в нужном размере, а если ручками еще и это делать то по вешаться можно)

    Ответить
    • Виталий Кириллов:

      Вы правы Олег, я тоже не нашел page speed для Мазилы, видимо разработчики браузера его чем-то заменили, надо разбираться.

      Ответить
  10. Олеся:

    проверила свой сайт через онлайн сервис PageSpeed , (ссылка вначале вашей статьи), одной из ошибок показало «Оптимизируйте изображения», при нажатии кнопки «как исправить» открывается список изображений которые нужно исправить, как описано у вас в статье, но единственное в конце изображений нет ссылок ««optimized version» и «Save as». Не подскажите как их оптимизировать вручную, что для этого сделать?

    Ответить
    • Виталий Кириллов:

      Олеся, установите PageSpeed на Гугл Хром, там есть ссылки на оптимизированные изображания.

      Ответить
      • Игорь:

        Остался только онлайн сервис, а где еще найти можно данное расширение и будет вообще оно работать?

        Ответить
        • Виталий Кириллов:

          Даже не знаю, вроде теперь нет подобных расширений.

          Ответить
  11. Павел:

    Да, Виталий вы молодец!
    Видно, что поработали со скоростью сайта очень хорошо.
    А вот скажите пожалуйста, оптимизировать сайт под мобильные устройства вы не планируете?
    Гугл пишет что с 21 апреля 2015г. не оптимизированные сайты для мобильных будут ранжироваться соответствующим образом. А это примерно 15-35% трафика можно потерять. Нет так уж и мало.
    Вы об этом не задумывались?

    Ответить
    • Виталий Кириллов:

      Да Павел, я об этом думаю и над этим работаю, возможно будет целый курс на данную тему.

      Ответить
  12. Максим:

    Нет нынче расширения, онлайн только, как я понимаю… пишет следующее:
    PageSpeed Insights for Google Chrome has been deprecated. Please use the online version of PageSpeed Insights.

    Ответить
    • Виталий Кириллов:

      Вы правы Максим, теперь остался только онлайн сервис, что прискорбно.

      Ответить
      • Татьяна:

        А можно ли на данный момент найти то заветное старое расширение и установить его в FireFox? Или оно просто работать не станет?

        Ответить
        • Виталий Кириллов:

          Я не нашел, хотя тоже хотелось бы.

          Ответить
  13. Виталий:

    Подскажите пожалуйста Виталий, столкнулся с такой проблемой в pagespeed — появился какой то запрос большого размера и я не могу выяснить откуда он взялся, при нажатии на ссылку скачивается файл без разрешения prntscr.com/9mu2sg.
    Подскажите как его найти в коде сайта? Что это за запрос?

    Ответить
    • Виталий Кириллов:

      Здравствуйте Виталий! Это подгрузка шрифта, скорее всего данный код надо искать в файле style.css.

      Ответить
      • Виталий:

        Я нашел подключенный шрифт через @font-face, но в pagespeed этот запрос остался. Кэш чистил. Не подскажите что это еще может быть или я что то не так делаю?

        Ответить
  14. Виталий:

    Мне кажется я догадался, может быть такое если у меня на компьютере нет этого шрифта и он его подгружает? у меня win XP старая))

    Ответить
    • Виталий Кириллов:

      Виталий, я не могу точно сказать где искать подгрузку, но что подгружается шрифт — это 100%.

      Ответить
  15. Bogutskiy:

    Скорость загрузки не влияет на ранжирование. Главное что бы сайт не загружался слишком уж долго. По крайней мере это из моего личного опыта.

    Ответить
  16. Сергей:

    Здравствуйте. Я немного потерялся с изображениями. В админпанели ВП в настройках медиафайлов везде поставил нули, изображения оптимизируются налету плагином ВП Смаш при заливке их в библиотеку, затем я их вставляю в запись (при редактировании) и тяну мышкой за угол, чтобы она (картинка) тупо влезла в поле браузера (примерно 490 пикселей, особо не ловлю). Я правильно делаю? Спасибо.

    Ответить
  17. Сергей:

    Виталий, добрый вечер.
    Вот такая проблема: с одной стороны, PageSpeed Insights рекомендует (настаивает для мобильной версии) убрать из «верхней части CSS»… а с другой — HTML валидатор трактует как ошибку (после перемещения «вниз» конструкции
    Вам известно решение? Спасибо.

    Ответить
  18. Сергей:

    извините под «конструкцией» имеется ввиду тег link с CSS

    Ответить
    • Виталий Кириллов:

      Здравствуйте Серей! Css файлы не переносятся «вниз конструкции», только js. PageSpeed Insights не требует переноса css файлов, а требует их оптимизации.

      Ответить
      • Сергей:

        Виталий, «не правда Ваша». Требует ещё как требует…
        Потратьте минуту, проверьте на моём домене. В текущей версии link c CSS у меня в HEAD-е.
        PageSpeed пишет:

        «Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение… »

        Скажу больше, проверял, помещал link перед закрывающим BODY. Скорость для мобильной версии
        возрастала пунктов на 12. Но возникала проблема, о которой сообщал в предыдущем комментарии.

        Ответить
        • Виталий Кириллов:

          Сергей, все же моя правда:

          pagespeed18

          Ответить
          • Сергей:

            Виталий, ну как же так? Вы стрелку на 2*PI поверните… и прочтёте:

            «Удалите из верхней части страницы код JavaScript и CSS…»

            Ответить
            • Сергей:

              … ну конечно на PI

              Ответить
  19. Санька:

    В общем так народ, маялся я здесь давеча со скоростью своего сайта и уже отчаявшись и решив забить на это дело (ничего не помогало, вообще ничего), нашел просто нереально реальное решение. А именно полное перемещение абсолютно всех скриптов в футер (footer). Результат до моих действий по проверке developers google PageSpeed Insights до и после: для мобильных — 69/100 для компьютеров — 82/100. А вот теперь после перемещения: для мобильных — 96/100 для компьютеров — 91/100. Однако впечатляет, не так ли? Конечно, это кардинальный способ, и наверное, самая крайняя мера, так как не все темы такое стерпят. Если ваши скрипты не участвуют в отображении страницы, можно переместить загрузку всех внешних скриптов в подвал WordPress. Но вот если они участвуют, то не все скрипты можно переносить, иначе сайтик ваш может так покарёжить, что мама не горюй=) Но в моем случае как видите всё просто супер летает. А сколько я всего перепробовал до этого… Увы код я не смогу вам дать, так как после преобразования в сущность смыл в нем теряется. Но, если уважаемый лично мною (есть за что) Виталий позволит, то вот вам ссылка на готовую функцию: yadi.sk/d/SuRXslR_pnHGQ. Ссылка на мо личный яндекс диск, в архиве два тхт файла, в одном функция, в другом инструкция. Пользуйтесь, мне не жалко=) И передед тем, как что то менять делайте резервную копию!

    Ответить
  20. Данила:

    Случайно нашел этот сайт когда искал как сделать бегущую строку. Нашел тут массу интересного и полезного спасибо большое админу.
    Виталий Кириллов
    Если возможно то личная просьба. У меня есть свой сайт sloboda-masterov.ru
    чтобы Вы посоветовали изменить или сделать чтобы улучшить работу сайта. Заранее спасибо

    Ответить
  21. Наталья:

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

    Ответить
    • Виталий Кириллов:

      Здравствуйте Наталья! С признаком 8 Марта Вас! Увы, я тоже использую плагин, другого решения пока не нашел.

      Ответить
      • Наталья:

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

        Ответить
        • Виталий Кириллов:

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

          Ответить
  22. Maxs:

    Здравствуйте, помогите пожалуйста, уже весь интернет перевернул, а ответ не нашёл.
    Решил проверить страницу в инструменте PageSpeed Insights
    И один пункт не поддаётся исправлению, —
    Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
    Количество блокирующих скриптов на странице: 9. Количество блокирующих ресурсов CSS на странице: 8. Они замедляют отображение контента.
    Сайт на HTML а все подсказки как убрать эту ошибку, в основном написаны для разных движков, там понятное дело, все используют плагины, а как быть если просто HTML страница и весь сайт на этом основан. Всё, что удалось выяснить это то, что скрипты надо поместить в самый низ страницы, они и так находятся перед закрывающим последним тегом.

    Ответить
    • Виталий Кириллов:

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

      Ответить
  23. Maxs:

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

    Ответить
  24. Sila-Biznesa.ru:

    Большое спасибо, буду пытаться у себя увеличить скорость загрузки сайта.

    Ответить

Оставить комментарий

Внимание комментатор! Прежде чем вставить: HTML, JavaScript или PHP код в свой комментарий, преобразуй его в html сущность!

Subscribe without commenting

» Подписаться на комментарии по RSS