Здравствуйте, уважаемые читатели блога 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 в современных условиях наиболее востребован и используется большинством продвинутых хостеров (включая, например, Спринтхост), поскольку обеспечивает эффективное использование ресурсов. Так что, если вы заинтересовались таким методом автоматического ускорения сайтов, можете приложить к этому руку самостоятельно либо напрячь своего хостера.
goldbusinessnet.com
Page speed vs PageSpeed Insights
Скорость (время загрузки сайта) имеет значение и является важной метрикой в SEO, а также влияет на пользовательский опыт. Когда гуглбот индексирует сайт, он не видит показатель PageSpeed, а только знает саму скорость. Знаете ли вы, что Google PageSpeed Insights не измеряет скорость вашего сайта? Да, прочитайте это ещё раз:
Google PageSpeed Insights не измеряет скорость сайта.
Для измерения скорости загрузки вы можете использовать GTMetrix или Pingdom Tools.
Вспомните занятия в школе. Говорили ли хорошие оценки о том, насколько ученик умный? Не обязательно. Они лишь значат, что вы знаете, как проходить тесты. Но большинство умных людей не ладят с тестами. То же самое с Google PageSpeed Insights, эта оценка не показатель скорости загрузки сайта.
Вот, к примеру, несколько сайтов с примерно одинаковой скоростью загрузки, но совершенно разными показателями PageSpeed:
Скорость загрузки здесь менялась от 5.5 сек до 5.7 сек, а показатель PageSpeed Insights от 47 до 81. Ниже пример еще одного сайта, имеющего низкий показатель PageSpeed, но при этом, в 1.5 раза быстрее тех сайтов, что упомянуты выше.
Из этих примеров видно, что Google PageSpeed совсем не индикатор скорости. Гнаться за этим показателем не стоит.
Выжимать максимум индикатора — пустая трата времени
Если вы попытаетесь получить идеальный PageSpeed, внедряя все рекомендации Google, вы быстро потеряете энтузиазм. Нельзя выполнить все рекомендации Google PageSpeed, так как их внедрение часто невозможно. Например, гугл предложит минимизировать или добавить кеширующих заголовков к скриптам, которые хостятся не на вашем сайте. Внедрить это невозможно.
Если гугл снизил оценку из-за изображений, которые можно оптимизировать на пару килобайт, то лучше не заморачиваться.
JavaScript и CSS, блокирующий отображение верхней части страницы
Частая рекомендация в PageSpeed Insights — удалить код JavaScript и CSS, блокирующий отображение верхней части страницы. Давайте рассмотрим подробней.
1. Удалить JavaScript, блокирующий рендеринг
Лучше конечно, когда JavaScript загружается в футере или же асинхронно, чтобы не блокировать рендеринг и не замедлять отображение страницы. Но иногда нереально все подгрузить в футере, особенно если вы не разработчик или используете готовую WordPress-тему. Если просто перенести весь код сверху вниз, то можно сломать какой-то функционал сайта.
2. Оптимизация CSS-кода
Если загружать CSS-стили внизу документа, то страница какое-то время отображается без стилей вообще, и будет выглядеть сломавшейся, может испортить пользовательский опыт. Тут Google подразумевает, что мы можем разделить CSS на две части, и самое важное (стили для элементов первого экрана) подгружать сверху, остальное в футере. Если вы разработчик или у вас есть верстальщик под рукой, то это можно внедрить, но на скорость загрузки такая тактика, практически, не повлияет, а только немного увеличит скорость отображения первого экрана и оценку PageSpeed.
Такой тип тюнинга используют сайты вроде Амазона, где каждые 10мс могут влиять на итоговую сумму. Для большинства малых сайтов это вряд ли на что-то повлияет.
Так в чем же польза Google PageSpeed?
Google PageSpeed полезен, если его не использовать с пристрастием. Этот инструмент укажет вам на проблемные зоны, на что стоит обратить внимание. Например, можно узнать, что некоторый контент на сайте не использует gzip-сжатие, или что есть куча больших изображений, которые можно сжать. Но основной целью должно быть улучшение скорости сайта, а не показателя PageSpeed.
Статья написана по материалам wp-rocket.
devaka.ru
Мотивация
Сайт-образец и так загружается довольно быстро, поэтому в данном случае будут улучшаться результаты до возможного максимума.
Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.
Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?
Именно это послужило стимулом для достижения максимально быстрой загрузки сайта, чтобы доказать, что достичь результатов 100/100 реально, и при желании вы также сможете это сделать. Это не одержимость, это просто стремление достичь совершенства.
Стартовые показатели подопытного сайта — 87/100.
В итоге, после применения определенных манипуляций, было получено следующие результаты:
О том, как удалось достичь таких показателей, читайте далее.
Как ускорить загрузку страниц?
Прежде чем приступить к пошаговым действиям согласно инструкции, позвольте отметить, что инструмент PageSpeed является всего лишь ориентиром для веб-мастеров на пути оптимизации ресурса. К тому же инструмент содержит рекомендации по ускорению загрузки страниц вашего сайта, а достижение положительных результатов во многом зависит от настроек сервера.
Обратите внимание, на то, что некоторые из шагов инструкции могут потребовать технических знаний, независимо от используемой системы управления контентом (CMS).
Итак, приступим:
Шаг № 1: Оптимизация изображений
Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:
- Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
- Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.
Согласно вышеупомянутым правилам каждое изображение на сайте было загружено, а также вручную сжато и подогнано по размерам. А чтобы не заморачиваться с оптимизацией изображений после их загрузки на сайт, лучше выработайте привычку изначально оптимизировать все новые изображения, загружаемые на сервер. Каждое новое изображение должно быть сжато и подогнано до необходимых параметров.
PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.
Шаг № 2: Минимизация JavaScript, CSS и HTML
В примере, Google предлагает сократить объемы JavaScript и CSS файлов.
Процесс минимизации позволяет сократить объемы файлов, устраняя ненужные пробелы, переносы, строки, символы и комментарии в JavaScript и CSS файлах. Программисты часто оставляют много места и комментарии во время кодирования, что может удвоить объем JavaScript и CSS файлов.
Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.
Дополнительно уменьшить размеры JavaScript и CSS можно за счет переименования переменных, при условии корректной работы селекторов и обновления HTML.
Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.
Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.
Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите «Сократить HTML». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание».
Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources
В случае использования WordPress, рекомендуется устанавливать плагин Autoptimize.
Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool.
Вот результаты, полученные после минимизации JavaScript и CSS:
Шаг № 3: Использование кэш браузера
Для многих веб-мастеров этап использования кэширования браузера является самым сложным.
Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).
CDN представляет собой сеть серверов, расположенных в различных местах по всему миру. Они кэшируют статические версии веб-сайтов, такие как изображения, файлы JavaScript и CSS. На серверах CDN хранятся копии содержимого сайта, а при заходе на этот сайт, статическое содержимое загружается с ближайшего сервера.
Например, если основной сервер сайта находится в Техасае, то без CDN, посетителю из Амстердама придется ждать, пока контент сайта преодолеет весь путь от сервера расположенного в США. С CDN, сайт загрузится гораздо быстрее из ближайшего к пользователю сервера, в данном случае из Амстердама. Таким образом, сокращается расстояние доступа к данным и сайт загружаться практически мгновенно.
Вот визуализация того, как работает CDN:
На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.
После вышеупомянутых манипуляций инструмент PageSpeed досадно продолжал предлагать использовать кэширование браузера для отдельных сторонних ресурсов. Вот скриншот:
Чтобы решить этот вопрос, пришлось исправить скрипты социальных сетей путем замены счетчиков, на статические изображения, размещенные на CDN. Вместо сторонних скриптов, которые пытались получать доступ к данным из Twitter, Facebook или Google Plus, для подсчета подписчиков, был установлен автономный счетчик, что и помогло решить данный вопрос.
Но более досадным было то, что вдобавок к проблемам со скриптами социальных сетей работу веб-сайта замедлял код Google Analytics.
Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.
Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.
В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.
А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.
Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.
Шаг № 4: Удаление блокирующих кодов
Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать — это ревизия всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта.
Более детально смотрите по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS
Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в <head> снимите отметку с «Force JavaScript» и установите ее на «Inline all CSS».
Шаг № 5: Включение сжатия
Включить сжатие вы можете в настройках сервера. Если вы не уверенны в своих технических способностях, обратитесь за помощью в службу технической поддержки, они помогут вам включить сжатие GZIP для сервера. Дополнительные рекомендации по установке GZIP сжатия смотрите здесь: https://developers.google.com/speed/docs/insights/EnableCompression#-
Шаг № 6: Оптимизация мобильного формата
Анализ мобильного формата показывает адаптивность мобильной версии сайта под различные типы разрешения, использование подходящих шрифтов, и наличие хорошей навигационной системы.
С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите:
В случае примера, не потребовалось каких-либо радикальных изменений.
uaweb.ua
Насколько связана реальная скорость загрузки и рейтинг PageSpeed?
Не особо. Вот вам два скриншота из сервиса.
1. Результаты теста страницы обзора Rush Analytics, содержащей много текста и картинок:
Несмотря на размер, страница грузится с приемлемой скоростью – можете проверить самостоятельно.
2. Специально созданная страница http://alexeytrudov.com/test.php – в ней стоит задержка загрузки на 5 секунд (функция sleep(5)):
Разница на 20 пунктов, первая страница в “красной” зоне, вторая – в “желтой”. Упс!
Достаточно наглядно, не так ли? Запоминаем: плохой рейтинг – не то же самое, что долгая загрузка. Это просто показатель, что страницу можно сделать быстрее. Но быстрее в 2 раза или на 2% – сервис, конечно же, не скажет. Не потому что с ним что-то не так. Просто он предназначен для другого и это нормально. Принимать решения должен разработчик.
Ладно, но ведь все равно высокий рейтинг полезен для SEO? Раз это сервис от самого Гугла!
Аргумент, на мой взгляд, довольно слабый. Как показано выше, количество баллов, которое выдает инструмент, не связано с реально важными для пользователя характеристиками.
Т.е. этот рейтинг это скорее шум, чем полезный сигнал для поиска. Сайты-лидеры со сложным функционалом на JS зачастую сидят в “красной” зоне. А вот проекты родом из нулевых, созданные на одном HTML, могут выдавать 80-90 баллов. Кстати, Google никогда не утверждал о взаимосвязи рейтинга своего сервиса и ранжирования.
Но допустим, это и правда важный фактор ранжирования. Что бы мы тогда наблюдали? В ТОПах бы преобладали сайты с высоким рейтингом. Есть такое? Нет!
Вот вам скрин сайта из ТОП-2 Google по запросу “пластиковые окна москва”:
Конечно, это единичный пример. Но если бы это фактор был по-настоящему значим, в ТОП такой сайт бы не допустили. Можно найти множество других кейсов в не менее конкурентных тематиках.
А потому – думаем в первую очередь о реальной скорости загрузки сайта (проверить можно, например, с http://www.webpagetest.org/ ). Если скорость не очень (хуже конкурентов), то в сначала работаем над оптимизацией базы данных и скриптов, которые отображают контент. Их неграмотная организация – причина большинства “тормозов”. А потом уже и PageSpeed Insights пригодится.
Итак, теперь вы знаете, что порой можно игнорировать грозные советы вроде “Исправьте обязательно” – даже если их дает Гугл. Удачи!
UPD: внимательно изучил важность рейтинга Page Speed на большой выборке. Результаты рассказал в докладе на Allintop, см. презентацию и комментарии.
alexeytrudov.com
Google PageSpeed — инструмент который позволяет проверить скорость работы сайта. Он позволяет оценить скорость загрузка для стационарных ПК и для мобильных устройств и выдает рекомендации, которые могут быть использованы для оптимизации.
Ссылка на ресурс:
https://developers.google.com/speed/pagespeed/insights/
Результат анализа скорости загрузки сайта выглядит так:
После проведения анализа скорости загрузки сайта чаще всего можно получить следующие рекомендации:
Optimize images
Самая часто встречающаяся рекомендация сервиса связана с оптимальным выбором изображений для сайта. Графический контент очень тяжелый и может сильно замедлять загрузку страниц ресурса. Самые общие рекомендации заключаются в выборе правильного формата (чаще всего имеет смысл использовать PNG), размера и качества изображений. Так слишком большое изображение, используемое в качестве фона может в разы замедлить скорость загрузки сайта. Всегда нужно проверять изображения и максимально уменьшать их размер и качество (размер и качество изображений имеет смысл задавать минимальными приемлемыми для конкретного ресурса).
Enable Compression
Сжатие веб-сервером является важным параметром, обеспечивающим быстродействие. Включается за счет модуля mod_deflate в Apache или за счет директивы gzip on в Nginx.
Leverage browser caching
Определяет передается ли заголовок Cache-Control и кэшируются ли данные в браузере пользователя. Кэширование позволяет значительно сократить количество обращений к серверу, что снижает нагрузку на него и увеличивает скорость отдачи статических данных (которых большинство на любом сайте) клиенту
Eliminate render-blocking JavaScript and CSS in above-the-fold content
JavaScript код по умолчанию исполняется по мере того как загружается страница, похожим образом обрабатывается CSS. Т.е. Если JS скрипт подключен в теле документа, его рендеринг каждый раз прерывается до тех пор пока скрипт выполнен не будет. Избежать этого можно добавляя при подключении JavaScript и HTML тело страницы будет рендерится независимо от исполняемого кода.
Например, JS в асинхронном режиме можно подключить так: <script async src=»script.js»>
Minify CSS
Минификация CSS предполагает удаление лишних пробелом и переносов строк, что позволяет сократить время обработки браузером и увеличить скорость загрузки страницы для клиента
Minify HTML
Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.
Avoid landing page redirects
Определяет используются ли редиректы, любые заданные перадресации с одного домена на другой и с одного сервера на другой означают дополнительные циклы запрос-ответ (запрос к серверу DNS и запрос непосредственно данных), что, естественно, увеличивает время через которое конечный пользователь получит контент сайта. Редиректов по возможности стоит избегать.
Prioritize visible content
В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.
server-gu.ru
Правда о важности оценки Google PageSpeed
Скорость страницы определяет общее время, необходимое для полной загрузки веб-сайта. При анализе сайта скорость загрузки может иметь решающее значение для SEO. Пользователи быстро покидают страницу, когда загрузка занимает слишком много времени, а поисковые системы игнорируют страницы с низкой производительностью.
Кроме полезности для SEO есть и другие причины для улучшения скорости страницы. Быстрые веб-сайты имеют бо́льшую конверсию, они намного удобнее для пользователя. Это может привлечь большее количество людей на ваш сайт и заставить их вернуться снова.
Исследования Google
Давайте рассмотрим некоторые недавние исследования: согласно Google среднее время, затрачиваемое на загрузку мобильной целевой страницы, составляет 15 секунд. Учитывая, что в течение трех секунд посетители должны решить, хотят ли они оставаться на вашем сайте – это огромное расхождение.
Исходя из данных, представленных выше, мы видим, что вероятность ухода со страницы во многой степени зависит от времени ее загрузки:
- При времени загрузки от 1 до 3 секунд вероятность отказа увеличивается до 32%
- От 1 до 5 секунд до 90%
- От 1 до 10 секунд вероятность отказа уже 123%
- Не трудно догадаться, какое количество посетителей мы теряем.
Скорость страниц будет важным фактором для ранжирования
Еще в 2010 году Google заявил, что скорость страниц будет ранжирующим фактором, но это было ориентировано только для десктопной версии сайтов.
А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.
По заверению компании санкции грозят только страницам, загружающимся медленно и предоставляющим негативный пользовательский опыт.
Так же не стоит забывать, что скорость сайта – это один из многих факторов ранжирования. К примеру, если у вас хорошо оптимизирована страница по Google PageSpeed, но имеет малополезный неуникальный контент – то навряд ли она сможет занять достойные позиции в поисковиках.
Несколько советов по увеличению скорости загрузки
- 1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
- 2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
- 3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
- 4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
- 5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.
Если вам понадобится помощь квалифицированного специалиста, вы всегда можете заполнить заявку на бесплатный анализ и оценку стоимости работ.
В одной из следующих статей мы поговорим о том, что такое блокирующие скрипты и почему не всегда от них можно избавиться.
page-speed.ru
Performance score
At the top of the report, PSI provides a score which summarizes the page’s performance. This score is determined by running Lighthouse to collect and analyze lab data about the page. A score of 90 or above is considered fast, and 50 to 90 is considered average. Below 50 is considered to be slow.
Real-World Field Data
When PSI is given a URL, it will look it up in the Chrome User Experience Report (CrUX) dataset. If available, PSI reports the First Contentful Paint (FCP) and the First Input Delay (FID) metric data for the origin and potentially the specific page URL.
Classifying Fast, Average, Slow
PSI also classifies field data into 3 buckets, describing experiences deemed fast, average, or slow. PSI sets the following thresholds for fast / average / slow, based on our analysis of the CrUX dataset:
| Fast | Average | Slow | |
|---|---|---|---|
| FCP | [0, 1000ms] | (1000ms, 2500ms] | over 2500ms |
| FID | [0, 50ms] | (50ms, 250ms] | over 250ms |
Generally speaking, fast pages are roughly in the top ~10%, average pages are in the next 40%, and slow pages are in the bottom 50%. The numbers have been rounded for readability. These thresholds apply to both mobile and desktop and have been set based on human perceptual abilities.
Distribution and selected value of FCP and FID
PSI presents a distribution of these metrics so that developers can understand the range of FCP and FID values for that page or origin. This distribution is also split into three categories: Fast, Average, and Slow, denoted with green, orange, and red bars. For example, seeing 14% within FCP’s orange bar indicates that 14% of all observed FCP values fall between 1,000ms and 2,500ms. This data represents an aggregate view of all page loads over the previous 30 days.
Above the distribution bars, PSI reports the 90th percentile First Contentful Paint and the 95th percentile First Input Delay, presented in seconds and milliseconds respectfully. These percentiles are selected so that developers can understand the most frustrating user experiences on their site. These field metric values are classified as fast/average/slow by applying the same thresholds shown above.
Field data summary label
An overall label is calculated from the field metric values:
- Fast: If both FCP and FID are Fast.
- Slow: If any either FCP or FID is Slow.
- Average: All other cases.
Differences between Field Data in PSI and CrUX
The difference between the field data in PSI versus the Chrome User Experience Report on BigQuery, is that PSI’s data is updated daily for the trailing 30 day period. The data set on BigQuery is only updated monthly.
Lab data
PSI uses Lighthouse to analyze the given URL, generating a performance score that estimates the page’s performance on different metrics, including: First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, and Estimated Input Latency.
Each metric is scored and labeled with a icon:
- Fast is indicated with a green check mark
- Average is indicated with orange informational circle
- Slow is indicated with a red warning triangle
Audits
Lighthouse separates its audits into three sections:
- Opportunities provide suggestions how to improve the page’s performance metrics. Each suggestion in this section estimates how much faster the page will load if the improvement is implemented.
- Diagnostics provide additional information about how a page adheres to best practices for web development.
- Passed Audits indicates the audits that have been passed by the page.
Frequently asked questions (FAQs)
What device and network conditions does Lighthouse use to simulate a page load?
Currently, Lighthouse simulates a page load on a mid-tier device (Moto G4) on a mobile network.
Why do the field data and lab data contradict each other? The Field data says the URL is slow, but the Lab data says the URL is fast!
The field data is a historical report about how a particular URL has performed, and represents anonymized performance data from users in the real-world on a variety of devices and network conditions. The lab data is based on a simulated load of a page on a single device and fixed set of network conditions. As a result, the values may differ.
Why is the 90th percentile chosen for FCP and the 95th percentile for FID?
Our goal is to make sure that pages work well for the majority of users. By focusing on 90th and 95th percentile values for our metrics, this ensures that pages meet a minimum standard of performance under the most difficult device and network conditions.
What is a good score for the lab data?
Any green score (90+) is considered good.
Why does the performance score change from run to run? I didn’t change anything on my page!
Variability in performance measurement is introduced via a number of channels with different levels of impact. Several common sources of metric variability are local network availability, client hardware availability, and client resource contention.
More questions?
If you’ve got a question about using PageSpeed Insights that is specific and answerable, ask your question in English on Stack Overflow.
If you have general feedback or questions about PageSpeed Insights, or you want to start a general discussion, start a thread in the mailing list.
developers.google.com
Что такое google pagespeed insights
Представьте, что сайт – профессиональный бегун на короткие дистанции. Начало загрузки страницы означает выстрел стартового пистолета для забега. От того, насколько быстро спортсмен придет к финишу, зависит удобство и комфорт посетителя сайта. Никто не будет ждать, пока ресурс плетётся черепахой, медленно загружая контент и скрипты. Спустя несколько секунд посетители просто уходят, не дожидаясь ответа.
Pagespeed insights – персональный тренер бегуна – то есть, нашего сайта. Он внимательно анализирует динамику загрузки, выделяет проблемные области, и дает советы по исправлению ошибок, приводящих к снижению скорости.
Как пользоваться pagespeed insights
Чтобы воспользоваться инструментом онлайн-измерения скорости загрузки сайта, перейдите на официальную страницу сервиса. Введите URL страницы и нажмите кнопку «Анализировать».
По результатам анализа будет выведена характеристика вашего ресурса с точки зрения оптимальных скоростных параметров. Отдельно представлены вкладки мобильного сканирования и анализа с точки зрения производительности компьютера.
Отношение полученных баллов к максимальному стобальному результату выражает степень оптимизации сайта. Значения 50-70% являются средними показателям большинства ресурсов, не задумывающихся об улучшении скорости загрузки. 80-90% означает, что вы основательно подготовили сервер и страницы. Стопроцентный результат является большой редкостью, но иногда встречается.
Сразу после процентов будет показана таблица рекомендуемых исправлений для сайта. Google выделяет места, наиболее сильно тормозящие загрузку и подсказывает, какими способами вы можете устранить проблему.
Советы по улучшению скорости загрузки сайта
Для администраторов многих порталов остается загадкой, как же получить заветные 100100 в Google Pagespeed Insights. Оказывается, добиться практически идеального результата можно легко, соблюдая основные приемы оптимизации
Оптимизация изображений ресурса
Самая придирчивая статья в чек-листах. Все изображения на сайте должны быть максимально сжатыми. Способов решения проблемы много:
- Попробуйте сохранять все внутренние картинки в формате .jpg и качеством 0.5-0.7
- Используйте специальные инструменты сжатия: TinyPNG или compressor.io
- Установите специальные скрипты для предварительной загрузки заготовленных обрезанных изображений
Максимально используйте кэш браузера
Вы должны вручную указывать браузерам клиентов на то, чтобы те хранили статистику как можно дольше. Сделать это можно, с помощью механизмов конфигурации .htaccess в веб-сервере Apache
“<ifModule mod_headers.c>
<FilesMatch «.(htm|html)$»>
Header set Cache-Control «max-age=40200»
</FilesMatch>
<FilesMatch «.(css|js|txt|woff|woff2|ttf|eot)$»>
Header set Cache-Control «max-age=624800»
</FilesMatch>
<FilesMatch «.(swf|flv|ico|gif|jpg|jpeg|png)$»>
Header set Cache-Control «max-age=2552000»
</FilesMatch>
<FilesMatch «.(pl|php|cgi|spl|scgi|fcgi)$»>
Header unset Cache-Control
</FilesMatch>
</IfModule>”
Подключите сжатие
Если вы когда-то не включили сжатие на стороне сервера, нужно это сделать прямо сейчас. Есть два варианта сжатия. При установленной CMS подключите сжатие в панели управления, если CMS нет, перейдите в конфигурацию Apache и включите Gzip-сжатие там.
Чтобы проверить, работает ли сжатие, обновите сайт и рассмотрите присланные браузеру заголовки. Если там присутствует строка Content-Encoding: gzip, все прошло отлично.
Минимизируйте объем CSS и JavaScript
Все .js файлы должны быть минифицированы. Для популярных библиотек есть специальные издания в формате .min.js. Если вы не нашли такую редакцию или имеете собственный код, к вашим услугам предоставляются онлайн-минификаторы, например Closure Compiler.
С CSS кодом помогут разобраться такие же минификаторы, например cssminifier.
Оптимизируйте загрузку видимого контента
Этот совет появляется, если на вашей странице некоторые элементы отображаются раньше других, например текст загружается в блок быстрее фонового изображения. Одним из способов решения будет настройка специальных JavaScript скриптов, управляющих загрузкой контента. Верх страницы загружается приоритетно, а дальше по мере прохода будут появляться остальные элементы, расположенные ниже.
Загрузите блокирующего кода в конце страницы
Одной из самых старых особенностей HTML-сайтов является синхронная обработка контента. Если в head-блоке выполняется загрузка внешних скриптов и стилей, то браузер не показывает содержимого сайта до полной обработки всех полученных данных.
В итоге, если вверху страницы оказываются тяжеловесные библиотеки, то страница может висеть белым экраном по несколько секунд, дожидаясь загрузки файлов.
Существует три важных совета по исправлению этого пункта.
- Располагайте основные дизайн-стили вверху документа, а необязательные .css стили догружайте в footer-блоке
“function addCss(fcss) {
xh = window.XMLHttpRequest ? new XMLHttpRequest : new ActiveXObject(«Microsoft.XMLHTTP»);
xh.open(«GET», fcss, !1);
xh.send();
var at = document.createElement(«style»);
at.innerHTML = xh.responseText;
document.head.appendChild(at);
}
addCss(‘default.css’);”
- Скрипты JavaScript всегда располагайте в самом конце страницы, чтобы они не мешали загружать страницу.
- Если существует возможность, настройте асинхронную загрузку .js скриптов.
Сократите время ответа сервера
Постарайтесь подобрать оптимальную конфигурацию веб-сервера для быстрой отдачи контента. Первым шагом будет установка связки Nginx+Apache для мгновенной отдачи статики кэширующим прокси.
Стоит помнить, что все серверные скрипты сильно задерживают загрузку страницы до окончания своей работы.
Проанализируйте время работы PHP. Не делайте множественных обращений к базе данных, выполняйте операции одним запросом, старайтесь не блокировать файлы на запись без необходимости. Используйте кэширующие расширения, такие как memcached
Кроме скриптовой оптимизации, постарайтесь перейти на удобный хостинг. Хорошим выбором будет VPS на SSD-дисках или физический выделенный сервер с большой мощностью
На что влияет скорость загрузки страницы
Возникает закономерный вопрос: для чего мы улучшаем эти параметры, и как они сказываются на продвижении сайта?
Статистика говорит, что если пользователь ждёт загрузку больше трех секунд, в 40% случаев он просто покидает страницу. Что ещё хуже, 80% посетителей отказываются от повторного визита на медленный сайт.
У быстрых сайтов гораздо большая конверсия, что является довольно критичным параметром продающего сайта. Неоптимизированные страницы излишне нагружают сервер и мешают продажам вашего бизнеса.
semantica.in