Всем привет! Сегодня на seo-mayak.com я хочу познакомить Вас с интересным инструментом для ускорения сайта, который называется PageSpeed.
PageSpeed был разработан компанией Google и изначально предназначался для внутреннего использования в самой компании, но потом Google подарил 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 начнет устанавливаться:
После завершение процесса установки, запускаем Firebug:
И видим, что на панели расширения появилась новая вкладка:
Анализ скорости загрузки будет проведен для текущей страницы, после чего в окне расширения отобразятся результаты:
Красными кружками отмечены пункты, которые оказывают наибольшее влияние на скорость загрузки страницы и над которыми надо работать в первую очередь. Далее идут пункты, не являющиеся критичными, но также влияющие на ускорение сайта.
Зелеными галочками отмечены пункты, которые находятся в разряде не первостепенных, т.е, они оказывают минимальное влияние на скорость загрузки, но все равно с некоторыми из них также надо работать.
Что делать, с результатами проведенного анализа и как исправлять выявленные проблемы я буду рассказывать постепенно, так как тема довольно большая и сложная.
Так что подписывайтесь на обновления блога и ожидайте новых статей.
Установка расширения PageSpeed для браузера Google Chrome
PageSpeed для Google Chrome является самостоятельным расширением, т.е, больше ничего дополнительно устанавливать не придется.
Открываем браузер Google Chrome, именно в нем заходим на страницу для скачивания и нажимаем кнопку «Install Chrome Extension»:
Начнется установка, после завершения которой, в правом верхнем углу окна браузера появится новая иконка:
Если кликнуть по иконке, то откроется такое окно:
Где все написано на английском и на первый взгляд кажется, что расширение вообще не работает. На самом деле в этом окне находится инструкция по запуску PageSpeed в браузере Google Chrome.
Для запуска расширения, жмем на иконку настроек Google Chrome и выбираем пункт «Инструменты»:
В дополнительном окне выбираем пункт «Инструменты разработчика»:
После, в нижней части страницы откроется консоль разработчика, в интерфейсе которой должна появится новая вкладка:
После окончания анализа скорости загрузки текущей страницы, в окне консоли разработчика отобразятся результаты:
Выдача результатов анализа в Google Chrome внешне отличается от выдачи в Mozilla Firefox. Здесь нет никаких пометок критичности, но в целом, выявленные проблемы те же.
Пример работы с результатами анализа PageSpeed
Лично мне больше нравиться работать с PageSpeed в Mozilla Firefox и поэтому я буду объяснять, как исправлять те или иные проблемы, на примере именно этого браузера.
Уверен, что если провести анализ сайтов, в контенте которых есть изображения, то PageSpeed выдаст следующие рекомендации: «Предоставьте изображения с нужными пропорциями» и «Оптимизируйте изображения».
Давайте разберемся, что от нас требуется предпринять, чтобы переместить строчку «Оптимизируйте изображения» в разряд решенных проблем, ну или хотя бы в разряд не первостепенных.
Если нажать на стрелочку рядом с рекомендацией, то откроется список изображений, которые нуждаются в оптимизации:
Что мы видим? Оптимизация изображений, поможет уменьшить их размер в общем на 50%. Согласитесь, что цифра впечатляет.
Я специально произвел анализ страницы своего кулинарного блога, так как на seo-mayak.com все изображения были оптимизированы, еще до загрузки на сервер. Читайте статью «Оптимизация изображений. Как загружать картинки на сайт«.
Для примера возьму первое изображение из представленного списка:
Итак, в конце каждого пункта есть две ссылки: «optimized version» и «Save as». Если нажать на ссылку «optimized version», то можно посмотреть, как выглядит оптимизированная версия изображения:
Как видите, качество изображения нисколько не ухудшилось.
Если нажать на ссылку «Save as», то появится возможность скачать оптимизированной изображение на компьютер:
Кстати, в Google Chrome такой функции нет. Выбираем пункт «Сохранить файл» и картинка сохранится в папке загрузок.
Теперь надо перезалить картинку на сервер. Делать это надо через редактор WordPress, чтобы для данного изображения создались оптимизированные миниатюры.
Но не спешите с перезаливкой! Сначала надо выполнить еще одну рекомендацию, которая тоже касается изображений, а именно «Предоставьте изображения с нужными пропорциями»:
В своих статьях я не раз говорил, что лучше заранее задавать нужные пропорции для изображений, чтобы серверу не приходилось сжимать или расширять их, так сказать, на лету. Сделать это можно в любом графическом редакторе, например в фотошопе.
На скриншоте я специально подчеркнул размеры, так как исходные пропорции сторон у картинки были 500х375 пикселей, а в редакторе WordPress они были изменены на 450х333 px. Но если бы я сразу залил картинку с нужными размерами, то мне не пришлось бы уже подгонять пропорции в редакторе, а сервер бы избавился от лишней нагрузки.
В будущих статьях я обязательно разберу все пункты результатов анализа PageSpeed и подробно расскажу, что с ними делать, так что следите за обновлениями.
До встречи!
С уважением, Виталий Кириллов
« Оптимизация WordPress. Нагрузка на сервер и как ее снизить
« Как включить gzip сжатие и кратно ускорить сайт
« Как включить кэш браузера на стороне пользователя
« Как сократить CSS и ускорить загрузку сайта
Виталий, я вам уже наверное надоел, со своими вопросами) Установил себе данное разрешение, и при проверке у меня красными кружочками отмечены два пункта это «Включите сжатие» и «Используйте кэш браузера» подскажите как настроить эти пункты
Кирилл, я все расскажу в будущих статьях.
Спасибо, про сервис знал, но особое спасибо за то, что взялись за разъяснения как «лечить». Ждем следующих «рецептов» 🙂 .
Давно использую это расширение. Но там просто рекомендации. Как и что сделать — вот основной вопрос. Буду ждать Ваши следующие статьи, Виталий.
Кстати, в Хроме PS можно запустить по F12.
Ирина, я конечно знаю, что PS можно запустить клавишей F12, просто забыл об этом написать. Спасибо, что уточнили!
Да, Виталий, я это написала для читателей. Может кто не знает. Всё-таки через настройки долго лазить.
Здравствуйте Витталий, подскажите планируется ли написание статьи про «Объединение изображений в CSS спрайты» а то остался только этот пункт.
Кирилл, да я планирую осветить данную тему.
Здравствуйте, скажите пожалуйста почему у меня постоянно появляются в папке public_html/wp-content/uploads/ вот эти файлы, они как бы заново генерируются…
mystique-3e5431b37f783d9bb0faa43fe8f34cff.css
и подобные, в таком формате mystique-………….css
Их там бывает 3-6 штук! Как исправить?
Заранее спасибо!
Здравствуйте Евгений! Ищите причину в действии плагинов. Просто так не где, ничего не генерируется.
Извиняюсь, что сразу не написал, а как сделать «При начальной загрузке страницы выполняется синтаксический анализ JavaScript»? Как его отложить?
У меня вот такое PageSpeed показал:
«При начальной загрузке страницы выполняется синтаксический анализ JavaScript в объеме 512.0Кб. Чтобы ускорить отображение страницы, отложите синтаксический анализ JavaScript.
Евгений, чтобы отложить синтаксический анализ JavaScript, надо все скрипты подключить через подвал (footer.php).
Вы делаете обширные и грамотные обзоры, спасибо за информацию — мир вашему блогу =)
По ссылке на загрузку можно загрузить расширение только для Хрома, есть у кого-нибудь ссылка на загрузку PageSpeed для Firefox?
У меня не wordpress (а opencart), но с удовольствием читаю ваш блог, каждый раз узнаю что то новое и полезное для себя и своего сайта.
Но сейчас из этой статьи видимо кусок уже стал не актуальным, потому что я тоже не могу установить page speed на мазилу. Мало того этот плагин под мазилу в сети фиг найдешь.
Быть может у Вас получиться?
(ведь с мазилой намного удобнее, у меня около 1500 картинок, а мазила с этим плагином хотя бы сразу выдает ссылку на изображение в нужном размере, а если ручками еще и это делать то по вешаться можно)
Вы правы Олег, я тоже не нашел page speed для Мазилы, видимо разработчики браузера его чем-то заменили, надо разбираться.
проверила свой сайт через онлайн сервис PageSpeed , (ссылка вначале вашей статьи), одной из ошибок показало «Оптимизируйте изображения», при нажатии кнопки «как исправить» открывается список изображений которые нужно исправить, как описано у вас в статье, но единственное в конце изображений нет ссылок ««optimized version» и «Save as». Не подскажите как их оптимизировать вручную, что для этого сделать?
Олеся, установите PageSpeed на Гугл Хром, там есть ссылки на оптимизированные изображания.
Остался только онлайн сервис, а где еще найти можно данное расширение и будет вообще оно работать?
Даже не знаю, вроде теперь нет подобных расширений.
Да, Виталий вы молодец!
Видно, что поработали со скоростью сайта очень хорошо.
А вот скажите пожалуйста, оптимизировать сайт под мобильные устройства вы не планируете?
Гугл пишет что с 21 апреля 2015г. не оптимизированные сайты для мобильных будут ранжироваться соответствующим образом. А это примерно 15-35% трафика можно потерять. Нет так уж и мало.
Вы об этом не задумывались?
Да Павел, я об этом думаю и над этим работаю, возможно будет целый курс на данную тему.
Нет нынче расширения, онлайн только, как я понимаю… пишет следующее:
PageSpeed Insights for Google Chrome has been deprecated. Please use the online version of PageSpeed Insights.
Вы правы Максим, теперь остался только онлайн сервис, что прискорбно.
А можно ли на данный момент найти то заветное старое расширение и установить его в FireFox? Или оно просто работать не станет?
Я не нашел, хотя тоже хотелось бы.
Подскажите пожалуйста Виталий, столкнулся с такой проблемой в pagespeed — появился какой то запрос большого размера и я не могу выяснить откуда он взялся, при нажатии на ссылку скачивается файл без разрешения prntscr.com/9mu2sg.
Подскажите как его найти в коде сайта? Что это за запрос?
Здравствуйте Виталий! Это подгрузка шрифта, скорее всего данный код надо искать в файле style.css.
Я нашел подключенный шрифт через @font-face, но в pagespeed этот запрос остался. Кэш чистил. Не подскажите что это еще может быть или я что то не так делаю?
Мне кажется я догадался, может быть такое если у меня на компьютере нет этого шрифта и он его подгружает? у меня win XP старая))
Виталий, я не могу точно сказать где искать подгрузку, но что подгружается шрифт — это 100%.
Скорость загрузки не влияет на ранжирование. Главное что бы сайт не загружался слишком уж долго. По крайней мере это из моего личного опыта.
Здравствуйте. Я немного потерялся с изображениями. В админпанели ВП в настройках медиафайлов везде поставил нули, изображения оптимизируются налету плагином ВП Смаш при заливке их в библиотеку, затем я их вставляю в запись (при редактировании) и тяну мышкой за угол, чтобы она (картинка) тупо влезла в поле браузера (примерно 490 пикселей, особо не ловлю). Я правильно делаю? Спасибо.
Виталий, добрый вечер.
Вот такая проблема: с одной стороны, PageSpeed Insights рекомендует (настаивает для мобильной версии) убрать из «верхней части CSS»… а с другой — HTML валидатор трактует как ошибку (после перемещения «вниз» конструкции
Вам известно решение? Спасибо.
извините под «конструкцией» имеется ввиду тег link с CSS
Здравствуйте Серей! Css файлы не переносятся «вниз конструкции», только js. PageSpeed Insights не требует переноса css файлов, а требует их оптимизации.
Виталий, «не правда Ваша». Требует ещё как требует…
Потратьте минуту, проверьте на моём домене. В текущей версии link c CSS у меня в HEAD-е.
PageSpeed пишет:
«Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение… »
Скажу больше, проверял, помещал link перед закрывающим BODY. Скорость для мобильной версии
возрастала пунктов на 12. Но возникала проблема, о которой сообщал в предыдущем комментарии.
Сергей, все же моя правда:
Виталий, ну как же так? Вы стрелку на 2*PI поверните… и прочтёте:
«Удалите из верхней части страницы код JavaScript и CSS…»
… ну конечно на PI
В общем так народ, маялся я здесь давеча со скоростью своего сайта и уже отчаявшись и решив забить на это дело (ничего не помогало, вообще ничего), нашел просто нереально реальное решение. А именно полное перемещение абсолютно всех скриптов в футер (footer). Результат до моих действий по проверке developers google PageSpeed Insights до и после: для мобильных — 69/100 для компьютеров — 82/100. А вот теперь после перемещения: для мобильных — 96/100 для компьютеров — 91/100. Однако впечатляет, не так ли? Конечно, это кардинальный способ, и наверное, самая крайняя мера, так как не все темы такое стерпят. Если ваши скрипты не участвуют в отображении страницы, можно переместить загрузку всех внешних скриптов в подвал WordPress. Но вот если они участвуют, то не все скрипты можно переносить, иначе сайтик ваш может так покарёжить, что мама не горюй=) Но в моем случае как видите всё просто супер летает. А сколько я всего перепробовал до этого… Увы код я не смогу вам дать, так как после преобразования в сущность смыл в нем теряется. Но, если уважаемый лично мною (есть за что) Виталий позволит, то вот вам ссылка на готовую функцию:
yadi.sk/d/SuRXslR_pnHGQ. Ссылка на мо личный яндекс диск, в архиве два тхт файла, в одном функция, в другом инструкция. Пользуйтесь, мне не жалко=) И передед тем, как что то менять делайте резервную копию!Случайно нашел этот сайт когда искал как сделать бегущую строку. Нашел тут массу интересного и полезного спасибо большое админу.
Виталий Кириллов
Если возможно то личная просьба. У меня есть свой сайт
sloboda-masterov.ruчтобы Вы посоветовали изменить или сделать чтобы улучшить работу сайта. Заранее спасибо
Здравствуйте, Виталий! Долго думала, как оптимизировать загрузку аватаров в комментариях, ведь они загружаются с внешнего сервера. Решение нашла, но посредством плагина, который их кэширует. Посмотрела для интереса у вас на сайте, как это реализовано. Оказалось, что вы уже решили эту проблему)) Интересно, как) Решение с плагином меня пока устраивает, но наверняка ваше решение более практично)
Здравствуйте Наталья! С признаком 8 Марта Вас! Увы, я тоже использую плагин, другого решения пока не нашел.
Спасибо, Виталий))
На самом деле, изначально я хотела реализовать все без плагина, уже и таблицу в бд создала) Но увидев, что плагин создал аналогичную, решила пойти легким путем. Алгоритм там не сложный, всего-то записывать в бд при добавлении нового комментария емейл и адрес картинки, перед этим загрузив его с сервера. Но, посмотрев реализацию в плагине… очень уж там все грамотно сделано, с кучей проверок. В общем, мороки на несколько дней) Не знаю, наступит ли день, когда я к этому вернусь, разве только если будет уже готовое решение)
Я тоже порылся в коде плагина) поэтому и поставил. Даже подумываю порекомендовать его читателем в одной из будущих статей.
Я на своем блоге тоже через плагин решил эту проблему, но довести всё о ума не хватает времени, главную настроил, а остальные 80-90 по Google pagespeed
Здравствуйте, помогите пожалуйста, уже весь интернет перевернул, а ответ не нашёл.
Решил проверить страницу в инструменте PageSpeed Insights
И один пункт не поддаётся исправлению, —
Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы
Количество блокирующих скриптов на странице: 9. Количество блокирующих ресурсов CSS на странице: 8. Они замедляют отображение контента.
Сайт на HTML а все подсказки как убрать эту ошибку, в основном написаны для разных движков, там понятное дело, все используют плагины, а как быть если просто HTML страница и весь сайт на этом основан. Всё, что удалось выяснить это то, что скрипты надо поместить в самый низ страницы, они и так находятся перед закрывающим последним тегом.
Здравствуйте! Такой глюк бывает обычно на главной странице сайта, на внутренних страницах должно быть все нормально.
Спасибо за ответ. Эта ошибка, действительно на главной странице сайта, но дело в том, что остальные страницы, не сильно отличаются от главной, графика и оформление тоже самое, только другой контент и дополнительная информация, на этих страницах, выходит тоже самая рекомендация, плюс, рекомендуется сократить и оптимизировать все CCS а при их сокращении, вообще получается каламбур. А главная страница тоже не мало важна в поисковой выдаче.
Большое спасибо, буду пытаться у себя увеличить скорость загрузки сайта.
Всем привет!
Спасибо Виталию за подробное и понятное изложение темы. Для меня, как совсем зелёного блогера, это важно.
Браузер Safari любезно предлагает скачать оптимизированные изображения, ресурсы JavaScript и CSS для проверяемой страницы.
Это меня обрадовало, но когда ликование утихло, я поняла, что не знаю, что с этим делать. С изображениями из статей понятно, нужно просто заменить не оптимизированные на оптимизированные, только переименовать и добавить атрибут. А вот картинки из виджета Одноклассников как поступить?
И куда девать остальное, JavaScript и CSS? Подскажите, пожалуйста, очень выручите. Заранее спасибо:)
С уважением, Валерия.
Здравствуйте Валерия! Картинки, скрипты, стили, которые расположены на сторонних сайтах Вы никак не оптимизируете. Тут надо или отказываться от использования виджетов или закрывать глаза.
Спасибо, Виталий)
Я правильно понимаю, что скорость загрузки интересна в первую очередь владельцу сайта, поскольку она влияет на количество посетителей? На позиции в поиске она пока не отражается.