Здравствуйте, уважаемые читатели блога Goldbusinessnet.com! Сегодняшний пост будет посвящен замечательному инструменту Гугл Пейдж Спид, позволяющему провести тест любой страницы для изучения возможностей ускорения ее загрузки (где можно измерить скорость сайта).
Не для кого не секрет, что поисковые системы, особенно Гугл, в последнее время уделяют этому аспекту серьезное внимание, поэтому быстрые вебсайты получают определенное преимущество при ранжировании и более высокие позиции в поисковой выдаче.
Google Page Speed Insights не только обнаруживает и указывает на все причины, по которым страничка не загружается достаточно быстро, но и предлагает конкретные пути их устранения, причем некоторые из обнаруженных проблем можно достаточно легко ликвидировать силами самого сервиса в автоматическом режиме.
Какие вообще средства оптимизации для ускорения сайтов предлагает Google?
В принципе для каждого из своих проектов я достаточно много времени уделяю мероприятиям по оптимизации страниц, которые способствуют их быстрой загрузке. По-настоящему не доходили руки лишь до блога Goldbusinessnet.com, который является по сути наглядным пособием для начинающих вебмастеров, не лишенных здоровых амбиций и заряженных на достижение цели.
Но, поскольку по натуре я перфекционист, не мог допустить, чтобы информационный веб-ресурс, несущий, так сказать, знания в массы, был бы в каком-то аспекте среди отстающих. Посему было решено приложить максимум усилий по его оптимизации, включая рекомендации Пейдж Спид.
Поэтому незамедлительно перехожу к описанию данного инструмента, чтобы вы могли оценить его функционал и применить на практике во благо своим веб-ресурсам.
Ранее Page Speed Insights можно было использовать в виде расширений для браузеров Google Chrome и Mozilla Firefox, ссылки на скачивание присутствовали на специальной странице Гугла. Причем для того, чтобы применять его в Мазиле, сначала необходимо было скачать и установить небезызвестный плагин Файрбуг, где Пейдж Спид присутствовал в качестве его дополнения:
Сейчас уже нет возможности применять расширения для браузеров именно от Google, хотя такие же плагины, но в несколько другой интерпретации, доступны на официальных вебстраницах Хрома и Мазилы (тут и тут). Кроме того есть, вполне функциональный одноименный онлайн сервис Гугла с точно таким же функционалом и не меньшими возможностями. Если перейдете в раздел Developers, то увидите там ссылку на инструмент Page Speed:
К слову, на этой же странице «PageSpeed Tools» расположены все предложения Google по ускорению сайтов. Похоже, разработчики «империи добра» всерьез взялись за оптимизацию и ускорение всего интернет пространства, поскольку в Девелоперс вы найдете линк на Библиотеку Оптимизации (Integrate the PageSpeed Optimization Library) с открытым исходным кодом.
Наличие открытого кода программного обеспечения данного проекта, работающего на основе модуля «mod_pagespeed», который устанавливается на сервера Апач (коих, кстати, подавляющее большинство), означает, что его может усовершенствовать или обновить любой желающий.
То есть, таким способом вполне реально за счет интернет сообщества создать близкий к совершенному инструмент ускорения. Как все это будет выглядеть на практике, покажет время. Естественно, для того, чтобы внести полновесный вклад и достигнуть успеха в этом благом деле, необходимо быть достаточно квалифицированным программистом.
Ежели взгляните на верхний скриншот (информация обведена зеленой рамкой), то увидите там ссылку на установку последней версии уже готового модуля. Это вполне может быть интересно для владельцев хостинга, которые могут установить его на своих серверах, обеспечив автоматическое ускорение расположенных там сайтов.
Причем, существуют две модификации модуля Пейдж Спид: непосредственно для серверов Apache и для связки Apache + Nginx, где второй играет роль прокси-сервера:
Кстати, вариант совместного использования Апача и Ngnix в современных условиях наиболее востребован и используется большинством продвинутых хостеров (включая, например, Спринтхост), поскольку обеспечивает эффективное использование ресурсов. Так что, если вы заинтересовались таким методом автоматического ускорения сайтов, можете приложить к этому руку самостоятельно либо напрячь своего хостера.
Google’s PageSpeed рекомендует (пути для увеличения скорости загрузки страниц сайта)
Выше мы рассмотрели возможность, так сказать, глобального увеличения скорости загрузки вебсайтов, которая требует специфических знаний (вполне вероятно, что и эта информация окажется кому-то полезной, по крайней мере, в будущем).
Но для основной части читателей, то есть простых вебмастеров, более актуален вариант, который понятен и доступен «здесь и сейчас». Как раз таким условиям в полной мере соответствует сервис PageSpeed Insights, о котором подробнее и поговорим. Для анализа конкретной страницы сайта вводите ее URL (что это такое?) на этой страничке:
Далее жмете кнопку «Анализировать» и получаете результат от Google PageSpeed:
После анализа вы увидите оценку Гугла, причем как в отношении мобильных устройств, так и ПК, что особенно ценно. В данном примере для главной страницы этого блога 76 зачетных баллов из 100 для мобильников является средним результатом, который можно существенно улучшить, если воспользоваться находящимися чуть ниже рекомендациями.
Причем, для оптимизации каждого ресурса, который тормозит загрузку страницы, даны ссылки на соответствующие разделы (с целью их получения нажмите линк «Как исправить?»), где вы найдете описания необходимых действий по устранению недочетов.
Но здесь нужно сделать важное замечание. Необходимо анализировать страницы разных типов, чтобы добиться уменьшения времени загрузки всего сайта в целом. Например, для стандартного блога Вордпресс уровень оптимизации в этом аспекте для главной, рубрик, статических страниц и записей может быть совершенно разным.
Выше я дал пример домашней страницы, на которой выводятся анонсы постов, а вот одной из статей Пейдж Спид дал гораздо более низкую оценку:
Это произошло потому, что посты обычно гораздо более объемные и включают много различного рода ресурсов и контента (изображений, видео, скриптов). Поэтому лучше начинать проверку на оптимизацию именно с них. Кстати, с этой точки зрения отталкивайтесь от оценки, которую Page Speed предоставляет для мобильников, поскольку достижение приличной скорости загрузки на таких устройствах требует гораздо больше телодвижений.
Но даже разные странички записей могут отличаться по качеству. Это происходит в том числе потому, что на некоторых из них выполняются дополнительные скрипты, замедляющие загрузку. Например, уровень оптимизации одной из таких вебстраниц вызвал у меня не просто удивление, а настоящий шок:
Совершенно очевидно, что 62 балла из 100 возможных не тот результат, к которому надо стремиться. А все потому, что на этой и еще ряде страниц записей у меня работает скрипт плагина SyntaxHighlighter, инициирующего красивое оформление кодов с подсветкой.
Таких расширений на сайте может быть несколько. В каждом конкретном случае нужно решить для себя, насколько плагин важен для вашего ресурса с точки зрения того функционала, который он обеспечивает. И в зависимости от этого необходимо либо его удалить, либо предпринять меры для оптимизации, которая поможет ускорить загрузку страницы.
Выше сказанное особенно касается самой популярной в мире CMS WordPress, которой пользуется подавляющее число вебмастеров. Всем хорош этот многофункциональный движок, но его необходимо постоянно отлаживать в плане уменьшения нагрузки на сервер и сокращения времени загрузки страниц. Поэтому владельцам веб-ресурсов, работающих на WP, следует принять это к сведению. И наличие такого сервиса как Пейдж Спид здесь как нельзя кстати.
На этом блоге есть несколько материалов, касающихся выполнения наиболее распространенных рекомендаций Page Speed, где подробно и скрупулезно расписаны все действия, необходимые для оптимизации и максимального увеличения скорости загрузки страниц:
- Оптимизация изображений, включая их сжатие
- Как объединить фоновые изображения в CSS спрайты
- Оптимизируем файлы CSS и скрипты на сайте
- Как настроить использование кэша браузера пользователей для ускорения сайта
- Включаем gzip сжатие для файлов CSS, JS (скриптов), HTML
Обязательно ознакомьтесь со всеми этими статьями хотя бы в режиме просмотра, перейдя по выше представленным ссылкам. Возможно, найдете для себя немало полезного.
В завершение посмотрите полезный видеоролик, из которого вы узнаете, почему советы Page Speed носят рекомендательный характер и по какой причине не следует фанатично им следовать:
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать — это ревизия всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.
Ну на момент моего коммента не было теста с большим файлом. Но давайте не забывать, что у вас на сайте сжатие — а текст ой как неплохо жмется. Так что нагрузили Вы лишь браузер — что тоже нехорошо, и анализатор обязан бы это подмечать.
Игорь, спасибо за эту статью и http://goldbusinessnet.com/optimizatsiya-i-raskrutka-saita/vnutrennyaya-optimizaciya-sajta-kak-uskorit-wordpress-sajt-snizit-nagruzku-na-server/ , а есть еще что-то по этой теме для WordPress, для человека мало понимающего в CSS, JS и тому подобному…) ?
Саша, для начала можете ознакомиться с рубриками «Основы HTML» и «Уроки CSS» (ссылки на них в сайдбаре), потом задавайте вопросы поконкретнее, ладно? А то Ваш вопрос слишком обтекаемый. 🙂
Хорошо очень описываете все.. понятно …спасибо… А как сделать кеш для граватаров.. у меня это первое место в Паге выводит если брать для Пк..?
Сильно влияет значение на выдачу
Ира, влияет, конечно, но в совокупности с другими факторами, которых немало. Также зависит от того, насколько скорость загрузки сайта меньше среднего значения ресурсов конкурентов в данной тематике.
А на выдачу сильно влияет?
здравствуйте. у меня PageSpeed выдает такую рекомендацию: «На странице http://infoalps.ru/ после внешнего файла JavaScript включаются перечисленные ниже внешние файлы CSS. Для распараллеливания их загрузки следует всегда включать внешние файлы CSS перед внешними файлами JavaScript.»
подскажите, пожалуйста, где эти файлы лежат и как практически их поменять местами? спасибо.
Артем, я проанализировал Ваш с сайт в этом аспекте. Подобное редактирование требует массу времени для объяснения, а эффект будет мизерным, поскольку данная проблема не является решающей и в PageSpeed находится в зеленой зоне. Пока Вам лучше заняться другими разделами оптимизации, находящимися в желтой и красной зонах.
Раньше использовал сервис goole (https://developers.google.com/speed/pagespeed/insights/)
Немного расходятся показания: «Перенесите все внешние файлы (css, js) вниз документа» — это с сервиса, а PageSpeed говорит «css нужно подключать в »
Как быть?
Да, Евгений, расхождения есть, но, в принципе, они в пределах разумного, просто нужно посмотреть, возможно, следует проделать и то, и другое.
Возможно я не в тему задам вопрос, но, уж очень хочется.
В пожеланиях PageSpeed есть такой момент, как «Объединить изображения в CSS-спрайты» и «Укажите валидатор кэша». У меня — это изображения виджетов и прочих прибамбасов для отображения стандартных частей сайта (футер, виджеты и пр.)
В какие спрайты их нужно объединить, и где-же (а, самое главное — как?) нужно указать время жизни кэша для этих картинок. По идее картинки и фоны для виджетов и футера — вечные (если не играться с ними каждый день), но где указывается длинна ихней жизни в кэше — вопрос…
Саня, Вы немного опережаете события. У меня только зарождается идея статьи, а Вы уже ее озвучиваете. 🙂 Конечно, я обо всем расскажу, в комментариях слишком много времени и сил отнимет.