Проверить скорость сайта гугл: Sorry, this page can’t be found.

Содержание

Мифы и правда о скорости загрузки сайта

Вы уже сталкивались со страшилками о падении медленных сайтов в глазах поисковиков? Сколько же исследований проведено на эту тему! Результаты плачевные: если ваш проект загружается дольше [числов секундах], злой посетитель с криками и визгами убежит, так ничего и не купив. Как правило, специалисты ссылаются на какие-либо источники, но это не точно.

Кто проводит исследования

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

Несколько лет назад Google решил, что так жить нельзя и начал поголовно проверять скорость загрузки сайтов и наличие адаптации под мобильники. Результаты напугали владельцев сайтов, однако, страшного не произошло. Затем Google сообщил о внедрении Mobile First Index.

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

Google

«Низкая скорость загрузки является самым раздражающим фактором для мобильных пользователей». А для нас — не самым. Куда более зубодробительны вплывашки без кнопки закрыть и, конечно же, скачать прайс.

«Низкая скорость загрузки — негативный фактор ранжирования в Google». Сложно утверждать, если ты не Гугл.

«Если сайт загружается дольше трех секунд, 53% пользователей покинут его». Если 3 секунды мы наблюдаем белый экран или?

«У мобильной страницы, скорость которой снизилась с 1 до 10 секунд, показатель отказа вырос на 123%». Здесь сообщается, что конверсия скачет в диапазоне от двух до пяти секунд. Разница в 9 раз!

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

SOASTA

«Каждая секунда задержки мобильной страницы снижает конверсию на 20%». Скажите это Фейсбуку.

Что-то проанализировав, SOASTA сообщает: скорость загрузки сайта влияет на конверсию. Цифры такие: страницы с высокой конверсией среднем быстрее «обычных» на 26%. Результаты исследования на чужом языке от 2017 года.

Search Engine Land

«Самые популярные сайты с большим трафиком не соответствуют критериям Google».

И таких сайтов немало. Гугловцы не могут просто взять и «опустить» популярные сайты, т.к. скорость загрузки — фактор не первостепенной важности. Если сайт интересен и полезен, его загрузки будут ждать сколько угодно долго.

В этом исследовании проверили 1000 самых популярных сайтов с помощью PageSpeed.
Стало известно, что 2% мобильных сайтов получили 100 из 100 баллов. Сто баллов? При нынешних попугаях этого сервиса их не получит даже пустая html-страница 😉
На версиях для пк всего 4% набрали 90 баллов.
Средний показатель составил 55 баллов, средняя

скорость загрузки страницы — 11 секунд. Это частично подвергает сомнению утверждение «53% пользователей покидают сайт…»

User Interface Engineering

«Если пользователи жалуются на скорость загрузки, то на самом деле проблема в другом».

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

WP Faster

«Скорость загрузки не входит в восьмерку главных показателей эффективности сайта».

Несложно проверить: найдите сайты в топ 3 по любым запросам и проверьте их скорость.

В 2018 году продолжает держать позиции упор на юзабилити. Пусть грузится дольше, зато плавно и не дергается.

Кто прав? Уже пора бояться?

Смотрим со стороны, задаем себе вопросы и делаем выводы. Почему 53% пользователей покинет сайт? У нас есть исследование, но проводили его другие люди. Нет комплексной информации об этих сайтах и людях, которые их посетили.

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

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

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

Нужно ли ускорять мой сайт?

Да, не помешает. Если ваш проект действительно долго грузится и содержит какие-либо существенные недоработки. Например, вы можете уменьшить вес картинок на сайте, сжать и объединить скрипты, включить GZIP и т.д.
Наличие мобильной версии — точно плюс. В эпоху удобных сайтов она жизненно необходима. Просто подумайте о том, что мобильным интернетом пользуется более половины населения РФ.

Что рекомендует Google?

Если вы заказали сайт под ключ и запустили его недавно, убедитесь в адекватной скорости загрузки сайта!

  • Убедиться в наличии всего важного на мобильной версии. Вырезайте лишнее, оставляйте самое важное.
  • Структурированные данные следует использовать на любой версии сайта.
  • Мета-данные обязательны для обеих версий сайта.
  • Можно применять разные rel=canonical и rel=alternate для каждой версии.

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

с умом!

Заказать сайт

Page Speed — EasyDoit.ru

Для достижения высоких позиций в поиске нужно, чтобы сервис Google Page Speed оценил скорость вашего сайта как высокую

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

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

Ну а начинаем мы с проверки текущих значений.

Проверяем скорость загрузки сайта в Google Page Speed

На ваш личный взгляд ваш сайт может летать, но это еще ни о чем не говорит для Гугла.

У него свои критерии проверки скорости сайта, поэтому идем сюда https://developers.google.com/speed/pagespeed/insights/

Вводим адрес сайта и жмем проверить.

Адрес вводите с http или https и при этом убедитесь, что сайт включен в нормальном режиме (не в режиме обслуживания), а robots.txt разрешает индексацию всех важных элементов сайта.

Чем ближе результат к 100 баллам тем лучше

Нормой считается 80 баллов и выше.
Если у вас больше — отлично.
То есть если ваш результат 90 баллов, то дергаться и пытаться любыми способами сделать 100 — не слишком благодарное занятие.

Так что если у вас 80 баллов и выше, то не переживайте, а радуйтесь: большинство проектов имеет 40-50 баллов до оптимизации скорости загрузки.

Я лично считаю, что для проектов с большим функционалом даже 70 баллов по Google Page Speed — вполне приемлемо.

Ну а если у вас меньше 70 баллов, а тем более 20-30, то стоит серьезно задуматься об оптимизации скорости сайта под Гугл.

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

Включить сжатие

Самый простой способ ускорения загрузки сайта для Гугла — это включить GZIP сжатие. Это специальный механизм архивирования данных «на лету», который поддерживается 99,99% хостеров.

Если ваш хостер не поддерживает его, то меняйте хостера (кого могу рекомендовать).

Включить GZIP сжатие в WordPress можно с помощью плагина кэширования

WP Fastest Cache.
В Opencart с помощью плагина NitroPack

Если не хотите ставить плагины, то можете модифицировать данные прямо в файле .htaccess, который лежит в корневой папке сайта (как попасть туда по FTP).

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

Проверить GZIP сжатие можно тут https://checkgzipcompression.com/

Должно быть так:

Сократите время ответа сервера

Зависит от серверов вашего хостера, их загруженности и прожорливости вашего проекта.

Иногда только один этот показатель может свести на нет все ваши усилия по SEO оптимизации проекта.

Важно проверить этот параметр скорости сайта по Google Page Speed в разное время дня или ночи — вполне возможно в данный момент сервер хостера просто перегружен запросами.

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

Если этот показатель стабильно плохой, то имеет смысл:

  • поставить модули кэширования (я их рекомендую ставить каждому проекту в любом случае!), чтобы снизить нагрузку на слабый хостинг и время формирования страниц сайта.
  • задуматься о смене хостера на того, у которого максимально быстрый хостинг или просто переходите на VPS-сервер. Этого обычно хватает в большинстве случаев для развивающихся проектов.
  • если есть лишняя копеечка, то закажите услугу CDN сервера вот тут (скидка 20% по промокоду «moytop»). Это даст весьма стабильную и быструю работу сайта.
  • самый сложный путь — это внутренняя оптимизация скриптов сайта (вплоть до полной переделке всего сайта). Это рекомендую делать в последнюю очередь, так как очень непросто и нормального специалиста за вменяемые деньги найти почти невозможно.

Используйте кеш браузера

Тоже несложный способ быстро повысить показатель в Google Page Speed.

Также как и в случае с GZIP сжатием решается через добавление кода в htaccess. Вы можете добавить его вручную или с помощью все тех же плагинов кэширования.

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

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

Оптимизируйте изображения

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

Задача — уменьшить качество картинок на сайте, чтобы они занимали меньше места и быстрее грузились.

Сделать это разумнее всего через сам Гугл Пейдж Спид.
Но придется делать это вручную, то есть придется повозиться!

Я больше года ищу нормальную программу, которая может автоматически ужимать по алгоритму Гугла картинки и сохранять структуру папок.

Увы, такой программы я не нашел. Пересмотрел всякие просмотрщики типа XnView, Infran, программы типа Caesium, FileOptimizer, Imbatch, ImageOptim, сервисы вроде TinyPng и т.п. — автоматизации нет.

Если кто знает такую программу — напишите в комментах.

Основные требования:

  • сжатие по алгоритму Google (чтобы после загрузки готовых картинок они соответствовали требованиям Гугла по скорости загрузки)
  • минимальные потери качества
  • работа с сохранением структуры папок
  • удаление метаданных и т.п. мусора.
  • автоматическое определение входного и выходного формата

Ну а пока программы нет, то придется делать это «ручками».

Сам Google Page Speed внизу дает ссылку на скачивание уже оптимизированных файлов.

Качаем и распаковываем.

А затем долго и муторно меняем файлы через FTP на сайте, заменяя старую версию на новую.

Увы, но качество картинок JPG теряется значительно.
PNG — качество остается весьма хорошее, почти как в оригинале, а размер уменьшается в 2-3 раза. Так что если у вас много PNG файлов, то будет очень большая экономия.

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

Сократите CSS + HTML + JS

В данном случае Google Page Speed по аналогии с картинками просит вас выкинуть из файлов верстки, скриптов и кода страниц все лишнее — пробелы, комментарии и т.п.

Чтобы сами файл стали меньше «весить» и быстрее стала скорость загрузки сайта.

При использовании плагинов кэширования — это всё делается автоматически «на лету». Это наиболее удобный способ, так как не меняет ваш код, а создаёт отдельные — минифицированные файлы CSS и HTML, которые и подсовывает Гуглу и все счастливы.

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

Скачать уменьшенные файлы «от Гугла» можно там же где и картинки — они в одном архиве будут.

А вот перезаливать ими оригинальные файлы — сами решайте, в любом случае сохраните бекап старых файлов.

Оптимизируйте загрузку видимого контента

В большинстве случаев вы ничего с этим сделать не сможете, разве что переделать сайт заново.

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

Удалите код JavaScript и CSS

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

Сложный пункт, который требует знаний и практики.

Вы, конечно, можете добавить возле загрузки каждого JS файла тег async или же поставить скрипт от Гугл для extsrc=, но по моим наблюдениям в 90% это или ничего не дает, или ломает сайт!

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

А так как в том же WordPress обычно 9 из 10 скриптов — это внешние плагины, то там вы вряд ли что-то сделаете, так как они грузятся из своих папок и обновляются по 3 раза на неделю.

И ваши сделанные изменения банально затрутся.

Так что тут я могу рекомендовать:

  1. не тратить время на самостоятельный разбор этого хлама и сразу нанять специалиста на бирже фриланса, дешевле всего на Kwork , ну а если проект посложнее, то на других биржах можете поискать.
  2. по возможности просто отключить/удалить уже ненужные или неиспользуемые плагины. Например в своем блоге, когда я писал эту статью, то обнаружил в скриптах плагин, которым не пользуюсь уже несколько лет, просто забыл про него — а он висит и снижает скорость загрузки сайта в Гугл.

Посмотрите, может и вы что-то забыли? Или чем-то не пользуетесь? Тогда отключайте.

Код для htaccess

Как и обещал, вот код, который формируется плагинами кэширования, но который можно добавить самому в файл .htaccess, который находится в корне сайта.

Какой-то из этих двух вариантов наверняка подойдет.

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

Нужно взять один из кодов и добавить в самое начало вашего файла .htaccess.

Обновить страницу и отправить на повторную проверку скорости загрузки сайта Google Page Speed.

moytop.com

Мотивация

При проверке сайта Google его же инструментом PageSpeed Insights было замечено, что проблем с декстопной версией сайта нет – 100/100, а вот результаты мобильной версии оставляют желать лучшего – 71/100.

Значит ли это, что результат 100/100 недостижим?

Как заставить страницы загружаться быстрее

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

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

Шаг первый: Оптимизируйте изображения

Инструмент PageSpeed Insights предлагает оптимизировать картинки посредством уменьшения размера файлов. Для этого можно предпринять следующие меры:

· Сожмите все изображения, используя инструменты Compressor.io и TinyPNG (или любые другие бесплатные инструменты). В некоторых случаях эти инструменты позволяют уменьшить размер изображений более чем на 80% без ущерба их качеству.

· Уменьшите размер изображений до необходимых параметров, не ухудшив при этом их качества. Допустим, если нужно изображение размера 150x150px, именно такого размера картинку нужно загрузить на сервер. Не рекомендуется использовать изображения большего размера, чем вы хотите поместить на сайт, или уменьшать их размер с помощью CSS или HTML тегов.

Можно скачать изображения, сжать и отформатировать их вручную или воспользоваться сервисом PageSpeed Tool и скачать уже оптимизированное изображение. То же самое можно сделать с JavaScript и CSS.

Шаг второй: Сократите объем ресурсов CSS и JavaScript

Google также рекомендует сократите объем ресурсов CSS и JavaScript.

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

Для решения этой проблемы можно установить инструмент Gulpjs на сервер. Инструмент автоматически создаёт новый CSS файл и удаляет все пробелы. Он также автоматически создаёт новый CSS файл для всех внесённых вами изменений. В этом случае разработчиком удалось уменьшить размер главного CSS файла с 300kb до 150kb.

Если вы используете WordPress, целесообразно будет установить плагин Autoptimize.

Также можно загрузить уже оптимизированные файлы, предложенные PageSpeed Tool.

Шаг третий: Оптимизируйте время ответа сервера

Чтобы уменьшить время ответа сервера, можно переместить все статичные файлы с веб-сайта на CDN.

CDN – это сеть серверов, разбросанных по всему миру, которые позволяют оптимизировать доставку и дистрибуцию контента (изображений, файлов CSS и JavaScript) конечным пользователям в сети Интернет. CDN хранит копии контента вашего веб-сайта на своих серверах. Когда пользователь заходит на ваш сайт, статичный контент загружается с ближайшего к нему сервера.

Допустим, главный сервер вашего сайта находится в Техасе, и вы не используете CDN. Пользователю из, например, Амстердама придётся ждать, пока сервер загрузит сайт из Америки. Если вы используете CDN, ваш сайт загрузится с сервера, ближайшего к Амстердаму, что займёт гораздо меньше времени.

Ниже представлена схема функционирования CDN c GTmetrix.

На CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение изображений на CDN может существенно повысить скорость загрузки страниц сайта.

Шаг четвёртый: Используйте кеш браузера

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

Чтобы использовать кеш браузера, нужно создать файл .htaccess и прописать в нём необходимые директивы, используя модуль expires. Продолжительность хранения данных в кэше может быть установлена по времени, по последнему изменению файла или по времени доступа клиента.

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

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

Если вы используете WordPress, плагин Autoptimize, который уже упоминался ранее, может вам в этом помочь. Для этого вам всего лишь нужно поменять настройки плагина.

Шаг шестой: Включите сжатие

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

Шаг седьмой: Оптимизируйте мобильную версию

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

Узнать, как ваш веб-сайт выглядит на различных девайсах, можно в Google Chrome. В правом верхнем меню кликните на «Дополнительные инструменты», а затем – «Инструменты разработчика».

Вывод:

Итак, четыре наиболее важных шага, которые необходимо предпринять, чтобы улучшить качество сайта:

1. Используйте CDN.

2. Используйте кеш браузера.

3. Удалите блокирующие отображение ресурсы из верхней части страницы.

4. Оптимизируйте размер изображений и сожмите их.

Источник:

www.seonews.ru

Онлайн сервисы для измерения скорости загрузки сайта

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

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

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

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

    В результате будет представлена диаграмма времени закачки отдельных объектов вебстраницы, а также их Урл и вес. Чем меньше объектов будет загружаться и чем легче будет весить каждый из них, тем лучше. Например, я для этой цели:

    1. объединил некоторые картинки из темы оформления сайта в так называемые спрайты
    2. а также по возможности уменьшил путем объединения число подгружаемых файлов стилей (CSS) и скриптов
    3. кроме этого имеется смысл включить Gzip сжатие статики на сервере
    4. и оптимизировать все используемые на сайте картинки

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

    Во всплывающем окне вам предложат скопировать постоянную ссылку на проделанный тест, а также отправить его по E-mail или в Твитер. Также в нижней части окна можно подписаться на мониторинг сайта на предмет доступности. Если ваш ресурс упадет (станет недоступен для посетителей), то вам будет выслано сообщение на E-mail, либо SMS на сотовый. Но эта услуга является платной, хотя и имеется возможность бесплатного триала.

    Для измерения пинга для вашего сайта, а также для просмотра Traceroute, нужно будет выбрать в самом верху страницы вкладку «Ping and Traceroute». Вводите в предлагаемую форму Урл без http, ставите галочку в чекбокс «Traceroute» или «Ping» под этой формой, и жмете «Test now».

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

    На первой диаграмме уделяете внимание положению фиолетовой вертикальной линии — это будет время окончания отрисовки сайта. Вторая вертикальная линия (синяя) будет означать время полной загрузки. Хорошо, если первая линия находится на 1-1,5 секундах загрузки сайта, а вторая — раньше 4 секунд. Тогда следующие абзацы можно прочитать «для справки». Если сайт загружается дольше 4 секунд — то нужно озабачиваться исправлением этой ситуации.

  3. Google PageSpeed Insights — это инструмент для разработчиков от самого Гугла. Он дает оценку скорости загрузки вашего сайта (а точнее оптимизации этой скорости) по стобальной шкале. 100 — это идеал, который недостижим, а вот 80-90 получить вполне реально, тем более, что сервис дает очень подробные рекомендации по исправлению выявленных недочетов.

    Как видно из приведенного скриншота, Google PageSpeed Insights дает комплексную оценку — для компьютерного браузера и для мобильного. Кроме этого, внизу будет приведена оценка удобства пользования вашим ресурсом на различных гаджетах. Если оптимизацией сайта под мобильные устройства вы еще не озаботились, то оценка там будет очень низкая (да и на приведенном справа скрине вашего сайта в окне смартфона все будет наглядно видно).

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

    У меня, например, была проблема с настройкой gzip сжатия и с заданием времени кеширования статики (картинок, css файлов и скриптов) в браузерах пользователей, ибо у меня Апач работает в связке с nginx, а с ним я работать не умею. Пришлось писать в техподдержку Инфобокса с просьбой все настроить — сделали, и даже денежек не взяли (спасибо им!). Кстати, изначально они мне поставили время хранения кеша в 1 час, но Google PageSpeed Insights по-прежнему ругался:

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

  4. Test my Site — новый сервис опять же от Гугла. В основном он делает акцент на оценку мобильной версии вашего сайта в том числе и по критерию его скорости загрузки:

    Простенько и со вкусом, что называется. Можно подписаться на рассылку изменений.

  5. GTmetrix — опять таки «не мудрствуя лукаво» вводите Урл нужной страницы и чуток ждете окончания анализа. В результате вы получите отчет, сформированный на основе данных двух плагинов для браузеров — Page Speed (читайте о работе с ним ниже) и YSlow. Собственно, каким данным доверять и чьим рекомендациям следовать — решать вам.

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

  6. Ping Admin — аналогичный онлайн ресурс для измерения время ответа сервера с разных уголков нашей огромной планеты.
  7. Host Tracker — практически то же самое, только страны другие.
  8. ByteCheck — позволяет измерить значение TTFB (Time To First Byte) для вашего сайта, на который часто обращают внимание при оптимизации. Это время получения первого байта данных браузером с сервера. Чем выше значение TTFB, тем медленнее обработка ресурсов сервером, что есть плохо. Читайте советы по оптимизации загрузки сайтов.
  9. Load Impact — это не совсем про скорость, но тоже важный сервис. Он позволяет протестировать нагрузочную способность вашего сайта и то, падает ли при этом скорость загрузки страниц. Весьма полезная штука.
  10. Web Page Speed — онлайн-сервис с дизайном начала девяностых, но вполне себе такой информативный, если приспособитесь к отсутствию юзабилити. Внизу даются общие рекомендации по исправлению ситуации.

Так ли важно отслеживать скорость загрузки страниц?

Но вернемся от измерения скорости к поиску возможностей ее увеличения. В Гугл Вебмастере, о котором я писал тут, раньше работала экспериментальная вкладка «Эффективность сайта», где давалась оценка скорости загрузки сайта.

В общем-то ничего криминального в указанной там скорости загрузки нет, но вот то, что мой блог KtoNaNovenkogo.ru загружался медленнее, чем 84 процента всех web ресурсов в интернете — это уже звоночек, на который следовало бы отреагировать. Но раз Гугл думает, что по скорости мой блог является аутсайдером, то стоит всерьез отнестись к этой проблеме и вплотную заняться решением вопроса — как ее увеличить.

Собственно, ничего особенно придумывать и не пришлось, ибо Google сам подсказывает наиболее оптимальное решение. Точнее, он предлагает воспользоваться инструментом, который в свою очередь поможет понять, что именно нужно предпринять для того, чтобы ваш сайт немного (или много) ускорить. Я говорю об онлайн-сервисе Page Speed (раньше были еще и одноименные расширения для браузера FireFox и Хром, которыми я в основном и пользовался).

Сразу оговорюсь, что этот инструмент оперирует достаточно сложными и не совсем понятными вещами рядовым вебмастерам, которые в основном связаны с тонкостями и нюансами работы Web сервера. Если вы никогда сервер не администрировали, но будет сложно.

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

На главной странице PageSpeed даже предлагает установить модуль на свой сервер, если он работает под управлением Apache или Nginx (как раз мой случай):

Но я так и не понял, как это делается, ибо совсем не смыслю в администрировании серверов и никогда не работал с юникс подобными системами. Это намного сложнее, чем программу установить или плагин в WordPress залить. Другой уровень погружения. Хостера тоже не решился по этому поводу напрягать. В общем, сей модуль остался мною не испытан — возможно, что вы его уже попробовали и имеет место что сказать…

Вообще, в первый раз я использовал Page Speed в качестве расширения для браузера (сейчас оно, как я понял не фунциклирует). Раньше оно интегрировалось в инструменты для разработчиков в Фаерфоксе и в Хроме. Правда, попервости (несколько лет назад) я лишь мельком посмотрел какие советы он мне дает, и практически ничего не поняв решил, что это не для меня, после чего с легкой душой удалил плагин PageSpeed как не нужный и чуждый моему разуму элемент.

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

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

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

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

Page Speed — анализ скорости и советы по ее увеличению

P.S. Сейчас Page Speed можно использовать только онлайн и устанавливать его в браузер уже не требуется (во всяком случае с новыми версиями хрома этот плагин несовместим), хотя сути это не меняет.

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

Дождавшись результатов процесса проверки вы увидите окно подобное тому, что я уже приводил на скриншоте выше по тексту (в пункте 3 описаний онлайн сервисов по проверки скорости загрузки сайтов). Т.о. в результате вы увидите целый список претензий, которые этот онлайн сервис имеет к вашему ресурсу, а именно к скорости его загрузки. Пир этом он даст вам некоторые указания по оптимизации работы Web сервера в купе с используемым вами движком.

Причем, в самом верху окна Page Speed будут расположены замечания и рекомендации, которые вам желательно будет посмотреть и изменить в первую очередь («исправьте обязательно»), ибо это даст наибольший эффект в плане увеличения скорости загрузки и потребует от вас не слишком больших усилий. Приведу пример анализа одного из моих второстепенных проектов, до которых руки особо не доходят:

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

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

У меня первоначальная картина несколько лет назад (еще при использовании плагина — сейчас то же самое можно увидеть в http://gtmetrix.com/, ибо он испльзует АПИ PageSpeed) для https://ktonanovenkogo.ru была такой:

Я решил тогда начать с самого первого пункта «Leverage browser caching» (сейчас это называется «Используйте кеш браузера»), ибо по логике работы Page Speed, эти рекомендации должны привести к наибольшему ускорению моего блога.

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

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

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

Оптимизация кэширования в браузере и проверка его работы

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

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

Живет он обычно в корневой папке. Естественно, что все нижеописанное будет работать только на серверах под управлением Apache, но их, как правило, большинство. После подключения к своему ресурсу по FTP (FTP клиент FileZilla был описан мною тут), откройте корневую папку (обычно это либо PUBLIC_HTML, либо HTDOCS) и проверьте наличие в ней файла .htaccess.

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

Если .htaccess не видно, то попробуйте в программе FileZilla выбрать из верхнего меню пункты «Сервер» — «Принудительно отображать скрытые файлы». Если и после этого он в корне не проявился, то создайте у себя на компьютере пустой текстовый файл в любом удобном для вас редакторе (я пользуюсь Нотепад плюс плюс), назовите его как-нибудь и скопируйте в корень.

После этого переименуйте этот файл в .htaccess в программе FileZilla. Теперь нужно будет открыть его на редактирование и добавить в него приведенный ниже код. Но сначала чуток поясню.

Наиболее популярные способы включения данной опции на веб-сервере под управлением Апач — с помщью модулей mod_headers или mod_expires. Расположенный ниже код поможет помочь вам включить кеширование статики в браузере, если онлайн-сервис хотя бы один из этих модулей Апача у вас на серваке установлен.

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

<ifModule mod_headers.c>  #кэшировать html и htm файлы на один день  <FilesMatch ".(html|htm)$">  Header set Cache-Control "max-age=43200"  </FilesMatch>  #кэшировать css, javascript и текстовые файлы на одну неделю  <FilesMatch ".(js|css|txt)$">  Header set Cache-Control "max-age=604800"  </FilesMatch>  #кэшировать флэш и изображения на месяц  <FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$">  Header set Cache-Control "max-age=2592000"  </FilesMatch>  #отключить кэширование  <FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">  Header unset Cache-Control  </FilesMatch> </IfModule>

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

Можно будет еще добавить блок кода, рассчитанного на модуль для mod_expires, где опять же используется проверка его наличия на вашем сервере, что гарантирует безопасность использования этого фрагмента кода:

<ifModule mod_expires.c>  ExpiresActive On  #по умолчанию кеш в 5 секунд  ExpiresDefault "access plus 5 seconds"  #кэшировать флэш и изображения на месяц  ExpiresByType image/x-icon "access plus 2592000 seconds"  ExpiresByType image/jpeg "access plus 2592000 seconds"  ExpiresByType image/png "access plus 2592000 seconds"  ExpiresByType image/gif "access plus 2592000 seconds"  ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"  #кэшировать css, javascript и текстовые файлы на одну неделю  ExpiresByType text/css "access plus 604800 seconds"  ExpiresByType text/javascript "access plus 604800 seconds"  ExpiresByType application/javascript "access plus 604800 seconds"  ExpiresByType application/x-javascript "access plus 604800 seconds"  #кэшировать html и htm файлы на один день  ExpiresByType text/html "access plus 43200 seconds"  #кэшировать xml файлы на десять минут  ExpiresByType application/xhtml+xml "access plus 600 seconds" </ifModule>

Комментарии опять же потом можно будет удалить.

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

  1. <IfModule mod_expires.c>  ExpiresActive On  ExpiresByType application/javascript "access plus 1 year"  ExpiresByType text/javascript "access plus 1 year"  ExpiresByType text/css "access plus 1 year"  ExpiresByType image/gif "access plus 1 year"  ExpiresByType image/jpeg "access plus 1 year"  ExpiresByType image/png "access plus 1 year" </IfModule>
  2. <IfModule mod_headers.c>  <FilesMatch .*.(js|css)$>  Header set Cache-control: private  </FilesMatch>  <FilesMatch .*.(gif|jpg|png)$>  Header set Cache-control: public  </FilesMatch> </IfModule>
  3. <IfModule mod_setenvif.c>  BrowserMatch "MSIE" force-no-vary  BrowserMatch "Mozilla/4.[0-9]{2}" force-no-vary </IfModule>
  4. FileETag MTime Size <ifmodule mod_expires.c> <filesmatch ".(jpg|jpeg|gif|png|ico|css|js)$"> ExpiresActive on ExpiresDefault "access plus 1 month" </filesmatch> </ifmodule>

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

Как видите, в моем случае «Используйте кеш браузера» уже не является критической недоработкой замедляющей загрузку, и значок рядом с этим замечанием сменился на оранжевый, но не на зеленый. К сожалению, повлиять на сторонние сервисы, откуда мой сайт подгружает статики (типа Янедкс, Гугла, Фидбернера и Аптулайка), я не в состоянии.

Что и требовалось доказать. Вот так вот играючи мы с вами разобрались с одной из самых существенных и весомых проблем найденных в Page Speed.

ktonanovenkogo.ru

От автора: приветствую в третьем уроке по оптимизации Google Page Speed. Для тех, кто не в курсе, Google PageSpeed – бесплатный инструмент, который оценивает производительность и юзабилити вашего сайта для мобильных устройств и настольных платформ. Это очень важно, так как Google использует этот инструмент для определения ключевых элементов SEO ранжирования, т.е. того, как высоко мы будем находиться в поисковой выдаче.

Вебмастеры знают, что лучше иметь хороший PageSpeed, хотя вокруг этой темы множество споров. К примеру, скорость страниц New York Times на данный момент составляет 60-68 из 100.

В первом уроке я пытался улучшить PageSpeed с темой, которую спроектировало ныне несуществующее агентство, Hands On Improving Google PageSpeed (Envato Tuts+). В конечном счете я довел PageSpeed на мобильных устройствах до 70 и на десктопе до 86.

Во втором уроке я создал блог с уклоном в разработку сайтов, а также настроил код WP так, что PageSpeed подскочил до 100 как на мобильных устройствах, так и на десктопе (см. оптимизируем Google PageSpeed до 100 в WordPress (Envato Tuts+)). И мне это удалось:

Сегодня я расскажу вам про мой опыт оптимизации с PageSpeed, а также про менее известный способ делать то же самое самому, про модуль от Google PageSpeed. Его можно установить на Apache и nginx.

«PageSpeed можно интегрировать с вашим веб-сервером, будь-то Apache или Nginx, для автоматической оптимизации вашего сайта.» — Google

Прежде чем мы продолжим, хочу напомнить, что я стараюсь отвечать на ваши комментарии. Если у вас возникли вопросы или предложения по теме, пожалуйста, пишите об этом в комментариях или мне на Twitter @reifman. Мне хочется, чтобы вы разобрались с WP и PageSpeed.

Как поддерживать оптимальный индекс PageSpeed

Если бы я занимался своим блогом все время, возможно было бы не сложно поддерживать оптимизацию кода под PageSpeed, так как плагины WP и темы обновляются. Но это не так. Честно говоря, поддержание индекса на плаву отнимает слишком много времени.

Я бы очень хотел вернуться в те времена, когда для обновления хватало одного клика мыши.

Google никак не вознаграждает вас за высокий PageSpeed

Кроме того, я заметил, что после перехода на новую тему и оптимизации PageSpeed до 100, трафик упал и держался на низком уровне. Конечно, на падение косвенно повлиял и адаптивный макет темы, но Google никогда не вознаграждал меня за PageSpeed 100.

Точно так же, как я говорил в статье про установку AMP в WP (Envanto Tuts+), AMP создан для привлечения внимания крупных издателей, но никак не мелких. Google так и не привел ко мне в блог дополнительный трафик после того, как я добавил поддержку AMP.

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

Изучаем модуль Google PageSpeed

Казалось бы, прекрасная возможность отключить весь пользовательский JS и CSS и поэкспериментировать с модулем Google PageSpeed, который делает все на уровне сервера.

О модуле Google PageSpeed

В основном, модуль Google PageSpeed автоматизирует множество задач по оптимизации производительности, на которые смотрит PageSpeed при составлении рейтинга. Модуль работает на популярных open-source серверах Apache и Nginx.

Модуль PageSpeed сжимает и объединяет подключаемые файлы, такие как JS и CSS, а также заменяет изображения на сжатые версии в прогрессивном формате (.webp).

Скриншоты моего PageSpeed перед установкой

После установки новой темы я взял старые скриншоты индекса PageSpeed. Я получил 83 на десктопе:

И 64 на мобильных устройствах:

Устанавливаем модуль PageSpeed

В этом уроке я покажу вам, как установить модуль на Apache. Google также дает инструкцию по установке на nginx. В каталогах пакетов Ubuntu нет модуля PageSpeed, его нужно вручную загрузить через wget:

Затем установите модуль с помощью dpkg:

И наконец apt-get -f install, чтобы пофиксить зависимости:

Перезапустите сервер Apache:

Поддержка файлов с вашего CDN

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

Вот так можно просматривать и редактировать файл конфигураций модуля:

Базовая конфигурация:

Все ваши сайты будут работать с этими настройками по умолчанию. Но поддомены CDN нужно добавить вручную:

Мои CDN это c1-, c2-, c3- и c4- .jeffreifman.com, я использовал символ подстановки ? для ссылки на них. После этого опять нужно перезапустить сервер, как вы делали это ранее.

Смотрим результаты модуля PageSpeed

Проверить, работает ли модуль PageSpeed можно, открыв исходный код сайта. Ниже показан пример верхней части страницы JeffReifman.com:

Обратите внимания, теперь URL в атрибуте src выглядит так:

Пример побольше, вручную вставленное изображение (кстати, одно из моих объявлений) было конвертировано PageSpeed в формат .webp:

Все происходит автоматически.

Потрясающие результаты PageSpeed

В целом, результаты работы модуля PageSpeed были просто супер. Я добил 4 пункта на десктопе и целых 8 на мобильных устройствах. Результаты на десктопе:

Результаты на мобильных устройствах:

Заключение

Если вы системный администратор, Google PageSpeed будет вам кстати. Инструмент полностью настраиваемый, его можно подстроить как угодно для максимального эффекта. Однако для среднестатистического разработчика я сомневаюсь в его эффективности:

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

Автор: Jeff Reifman

Источник: https://code.tutsplus.com/

Редакция: Команда webformyself.

webformyself.com

Правда о важности оценки 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

Последнее время, компания Google серьезно взялась за «ускорение» интернета. Сегодня корпорация связана с практически всеми разработками направленными на оптимизацию веб-ресурсов, если вы забыли, я напомню: создание CDN, манифесты CSS, разработка платформы javascript, Public DNS и многое другое. Сегодня же речь пойдет о новом сервисе Google PageSpeed, который позволяет оптимизировать данные и загружать их намного быстрее.

 

Что представляет собой служба PageSpeed?

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

 

Требования PageSpeed?

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

1. В настоящее время сервис не поддерживает работу с «голыми» доменами, префикс www должен обязательно присутствовать в домене сайта. То есть http://example.com работать с новым сервисом не будет, а вот http://www.example.com запустится без проблем. Возможно, в ближайшем будущем этот недочет исправят.

2. У вас должен быть полный доступ к панели управления доменным именем. Для того чтобы начать работу PageSpeed, вам придется изменить запись CNAME. Если вы регистрировали домен у хостера, то придется обращаться к нему, чтобы техподдержка за вас изменила записи CNAME.

 

Настройка сайта для работы с PageSpeed

1. Для начала перейдите по этой ссылке и нажмите кнопку зарегистрироваться.

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

2. После того как вам прислали приглашение, перейдите на страницу Google API и нажмите на выделенную кнопку в боковой панели – Page Speed Service.

3. Далее нажимаем на ссылку “Add new domain” и вводим свой сайт. Еще раз напоминаю, убедитесь в том, что домен введен вместе с префиксом «www»!

На этом этапе может возникнуть небольшая загвоздка. Если вы ранее не добавляли свой сайт в панель Google Webmaster, то сейчас сделать это самое время. Система предложит именно такой сценарий.

После добавления сайта в раздел для вебмастеров, вы должны изменить записи к домену, а именно выставить правильный адрес CNAME, по которому сервис будет вас верифицировать и создавать страницы КЭШа.  

4. Изменение в значение CNAME, вносятся через панель домена у регистратора. Для того чтобы добраться до настроек у регистратора NameCheap, вам нужно перейти к All Hosts Record, а далее проследовать по пути Host Management. У международного регистратора GoDaddy значение CNAME хранится в диспетчере DNS. По большому счету, панели управления доменами у всех регистраторов одного принципа, а потому ориентируясь на пример ниже, вы сможете разобраться.

Практически всегда, запись IP адреса и запись почтового алиаса идентичны.

Зайдя в панель управления записями CNAME, вы увидите похожую форму:

 

Что нужно изменить?

Запись с почтой «@» мы оставляем без изменений, а вот в строке IP-адрес, меняем численное значение на pagespeed.googlehosted.com. В отдельных случаях, вам придется добавить в конце доменного имени точку (без кавычек): «pagespeed.googlehosted.com.».

Также в поле Record Type, вам нужно выбрать значение CNAME Alias. После внесения корректировок, сохраните форму, нажав на соответствующую кнопку.

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

Так как в настоящее время, Page Speed не поддерживает работу с голыми доменами типа (http://example.example.com RewriteRule (.*) http://www.example.com/$1 [R=301,L]

Не забудьте изменить надпись «example.com», на доменное имя вашего сайта.

 

Преимущества, которые дает использование Page Speed

Проверить, прирост скорости загрузки страницы, можно с помощью стандартных возможностей Google API. После того как все настройки сделаны, а DNS обновились, нажмите кнопку «Run Speed Test».

Система автоматически вас направит на страницу, где приложение покажет вам результаты. В среднем скорость загрузки повышается на 24%, а скорость индексации контента на 40 %. К слову, время потраченное на загрузки можно еще немного уменьшить, если настроить кэширование изображений.

webtun.com

Google Page Speed — Оптимизация скорости загрузки сайта

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

Опускаются руки? Напрасно. Работа по продвижению сайта трудоемкая и может быть затратная, но оно того стоит. А в помощь нам существует множество инструментов. И об одном из них мы как раз и поговорим.

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

Весь процесс разбора будет осуществляться человеком, который сталкивается с сервисом впервые. И так, представляем пошаговое руководство по использованию Page Speed Insights для новичков глазами новичка!

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

Сервис Page Speed Insights

Сегодня речь пойдет об одном из сервисов от Google – Page Speed Insights. Это инструмент для проверки скорости загрузки страницы. 

Масштабный анализ и исследование, опубликованное на сайте O’Reilly Media, Inc., проводимое при содействии Facebook, Google, Sun, KeyNote, Shopzilla и других компаний, демонстрируют нам однозначный вывод — современный посетитель не будет ждать загрузки страницы более 5 с.

Данные анализа представленны по ссылке в презентации — оригинальное название презентации The User and Business Impact of Server Delays, Additional Bytes, and HTTP Chunking in Web Search Presentation. Не будем углубляться в разбор графиков и карт кликов, опубликованных в отчете, а вынесем только основные моменты документа. Поскольку мы сегодня говорим о Google Page Speed, то нас интересует скорость загрузки. Так ли она важна, как нам говоярт? Да, это исследование подтверждает, что скорость загрузки — ключевой фактор, на который стоит обратить внимание. Почему? Вот что говорит нам исследование:

  • Если длительность загрузки сайта превышает две секунды, удовлетворенность пользователей снижается на 3,8%.
  • Доход с каждого пользователя сокращается на 4,3%.
  • Количество кликов уменьшается на 4,3%.

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

Значит, пришла пора обратиться к помощи бесплатных инструментов по устранению проблемы. Чем хорош Google PageSpeed? Прежде всего, тем, что он показывает именно те факторы, которые зависят от разработчика сайта, а не от доступа к сети. А значит, мы можем отделить мух от котлет и оптимизировать структуру кода, изображения и прочее – все то, от чего зависит скорость загрузки с нашей стороны.

Какие показатели позволяет оптимизировать Google PageSpeed?

Прежде всего, это скорость загрузки верхней части страницы. И, конечно же, скорость загрузки всей страницы. От чего она зависит с точки зрения разработчика?

  1. Размер изображения.
  2. Места размещения JavaScript.
  3. CSS файла.

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

На рисунке видно, каким образом сервис оповещает посетителя о проблемах:

Предупреждения о возможных проблемах сайта в Goggle Page Speed

Способы решения имеющихся проблем сайта при помощи сервиса Google Page Speed мы разберем на примере оптимизации обычного одностраничника.

 

Пошаговое руководство оптимизации скорости загрузки страницы

Для примера мы выбрали простой сайт – лендинг. Он включает в себя несколько стилевых таблиц, пару эффектов jquery и несколько функций javascript.

Шаг 1. Запускаем проверку

Зайдите на страницу Google PageSpeed https://developers.google.com/speed/pagespeed/insights/

И введите в строку название сайта, который вы хотите проверить:

Первый шаг проверки скорости загрузки сайта

Нажмите кнопку «Анализировать» и вы увидите результат анализа.

Как мы видим на примере нашего сайта, для компьютера всё не так плохо:

Рекомендации Page Speed для оптимизации сайта для компьютера после анализа

Для мобильных устройств картина не такая радужная:

Рекомендации Page Speed для оптимизации сайта для мобильных устройств

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

Окей, Гугл, приступим.

Шаг 2. Исправляем критические ошибки

Первая из них – это использование кеша.

Используйте кэширование для быстрой загрузки сайта

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

Почитать о том, как это сделать, вы можете здесь же – инструмент предлагает ссылку на помощь:

Рекомендации по кешированию сайта

Воспользуемся модулем Expires и  впишем в .htaccess следующую команду:

 

ExpiresActive On

ExpiresDefault «access plus 1 month»

ExpiresByType image/gif «access plus 2 months»

ExpiresByType image/jpeg «access plus 2 months»

ExpiresByType image/png «access plus 2 months»

ExpiresByType image/x-icon «access plus 2 months»

ExpiresByType text/css «access plus 2 months»

ExpiresByType text/javascript «access plus 3600 seconds»

ExpiresByType application/javascript «access plus 3600 seconds»

ExpiresByType application/x-javascript «access plus 3600 seconds»

 

Вторая ошибка – неоптимизированные изображения.

Оптимизируйте изображения на своем сайте

Воспользуемся сторонним сервисом для оптимизации наших изображений. Например, сервис tinypng. И оптимизируем там все картинки:

Оптимизируем изображения на сайте с помощью сторонних сервисов

Шаг 3. Исправляем скрипты по возможности

Сервис рекомендует оптимизировать javascript и css.

Рекомемндации Google по оптимизации скриптов и стилей на сайте

 Что говорит нам Гугл?

Общая информация

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

Рекомендации

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

У нас весь код подключается в первых строках файла. Переместим его непосредственно перед загрузкой элементов в сам код html. Счетчик яндекс метрики перенесем в самый конец файла.

Для оптимизации css стилей мы мало что можем сделать. Гугл предлагает минимизировать обращение к серверу за счет внедрения стиля на страницу. Но тогда пропадает сам смысл использования таблиц стилей. Еще один способ:

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

Но код загрузки у нас тоже велик. Поэтому оставим как есть.

Результат радует.

Шаг 4. Проверка

Запускаем анализ еще раз.

Результат анализа сайта по Page Speed после выполнения рекомендаций

Шаг 5. Оптимизация изображений средствами Google

Однако после трех оптимизаций на сервисе tinypng один из рисунков все равно попадает в предупреждения.

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

Скачиваем оптимизированный Гуглом контент

Обратим внимание на то, что в архиве помещены только те файлы, которые требовали оптимизации.

Обращали внимание на отличия в jquery.js и jquery.min.js? Прежде всего, именно в наличии переносов, пробелов и прочего. Первый читабелен и поддается правка, во втором сплошной текст одной строкой. Зато места меньше занимает.

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

Предупреждений стало меньше.

Шаг 6. Для мобильных устройств

Для мобильной версии после выполненных шагов мы тоже видим некоторое улучшение:

Оптимизация мобильной версии сайта

Попробуем выкачать код библиотеки JQuery в локальный файл. Обращение к ней по адресу в сети – это расход ресурсов. Тем более, что при загрузке шапки эта библиотека уже должна быть подгружена, то есть в тело документа ее убирать нельзя.

Заменим:

< script src= «http:// ajax.googleapis.com /ajax/libs/jquery/1.11.0/ jquery.min.js»> </ script >

На

< script src=»js/ jquery.min.js»> </ script >

предварительно создав в папке соответствующий файл.

Выполним анализ еще раз.

Вот такого результата мы добились после оптимизации сайта с помощью Google Page Speed

Итог радует: с 63 поднялись до 81.

Осталась одна критическая ошибка, но она исправляется созданием мобильной версии сайта. У нас пока ее нет, поэтому при ее разработке в будущем будем учитывать этот параметр и постараемся убрать эффекты из шапки.

Заключение

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

Так что рекомендуем использовать этот полезный сервис, и ваш сайт будет радовать не только поисковые машины, но и ваших клиентов. Мы, в свою очередь, изложили в статье основные шаги и принципы работы с инструментом Google Page Speed глазами новичка.

Удачи в оптимизации!

Как узнать скорость загрузки сайта : WEBCodius

Скорость загрузки сайта важна. От этого зависит, будут покидать его посетители или нет. Будет сайт на первых позициях или нет.

Но прежде чем начнёте ускорять сайт, нужно вначале узнать — как долго он загружается? Вполне может оказаться, что сайт уже имеет достаточную скорость и ничего делать не надо. Ну а если скорость сайта слабая, то тут уж надо действовать.

Скорость веб-сайта складывается из двух слагаемых:

  1. Скорости сервера.

Это первое что нужно проверить. Скорость определяется производительностью и местоположением хостинга. Как и следует ожидать, хостинг должен быть шустрым. Подумайте о сервере, как о машине Формулы 1. Можно сколь угодно совершенствовать корпус автомобиля, но без нормального движка, гонку не выиграть!

То же самое и с сайтом. Скорость сервера, это первое, что нужно проверить.

  1. Загрузки всех данных (изображения, веб-дизайн, код, плагины, медиа)

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

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

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

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

Итак, начнём с проверки мощности и скорости двигателя, то есть, с проверки сервера.

1.Bitcatcha Server Speed Checker

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

Bitcatcha Server Speed Checker проверяет сервер с восьми разных точках мира и измеряет время отклика. После чего показывает среднюю разбивку.

Что считается хорошим результатом?

Быстрый и отзывчивый сервер должен получить оценку не меньше B +. Согласно требованиям Гугл, сервер должен давать ответ не более чем через 200 мс.

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

Проверить скорость сервера.

2.Google Page Insights

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

В Гугл настолько серьёзно относятся к этому, что даже разработали бесплатный инструмент для проверки скорости сайта под названием Page Insights. Который измеряет общую скорость сайта, и даёт развёрнутую информацию.

Всё, что нужно сделать, это вставить адрес веб-сайта в строку ввода, а дальше, гугл сам соберёт всю необходимую информацию. Максимальная оценка, которую даёт Гугл – 100 баллов. Оценивается версия для ПК и для мобильных устройств.

В результате Гугл выдаст оценку, а также список рекомендаций. И если оценка вашего сайта составила меньше 100, то прочитайте в этой статье о том, как улучшить этот показатель.

3.Сравнение сайтов.

Чтобы выиграть гонку, не нужно быть самым быстрым на всю вселенную)). Достаточно быть самым быстрым из тех, кто участвует в гонке.

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

Важно только то, что наш сайт должен опережать наших конкурентов.

В этом поможет сайт — WhichLoadsFaster. Вбиваете адреса интересующих сайтов и сравниваете их скорость.

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

Поэтому лучше не принимать результат проверки всерьёз. Но это забавный показатель того, насколько быстр ваш сайт в сравнении с другим.

4.Load Impact

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

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

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

Программное обеспечение имитирует реальный трафик, отправляя пинги из 10 разных мест, с различных мобильных сетей и браузеров. Если начинаете видеть большие пики трафика, приходящие на сайт, то пришло время использовать Load Impact, чтобы увидеть, справится сайт с большим трафиком или нет.

5.Pingdom

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

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

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

Измерить скорость сайта с помощью Pingdom.

Заключение.

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

Благодаря этим инструментам, можно узнать, нужно ли менять хостинг сайта, дизайн, нужно ли оптимизировать картинки, убрать лишний код. Попробуйте их все, и измерьте скорость сайта со всех сторон, сверху донизу.

Ну а если у вас остались вопросы, то задавайте их в комментариях!

Новый алгоритм Google — Speed Update. Как увеличить скорость загрузки сайта

Еще в январе 2018 Google анонсировал новый алгоритм ранжирования, созданный специально для мобильного поиска – Speed Update. Запуск произойдет буквально через несколько дней, в июле этого года.

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

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

Важно: Не стоит всеми силами стремиться увеличить скорость до 100 пунктов. Сайт должен работать корректно и не доставлять проблем пользователям. Достаточно вывести сайт в зеленую зону.

Оригинал выступления со встречи можно увидеть на этом видео:

Проверить скорость загрузки сайта можно с помощью официального инструмента Google PageSpeed.

Особое внимание обратите на эти проблемы:

  • Оптимизация изображений. Используйте сжатие изображений перед загрузкой на сайт.
  • JavaScript и CSS код, блокирующий отображение верхней части страницы. Если это технически возможно, все скрипты рекомендуем размещать в подвале страницы. Так они не будут мешать загрузке.

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

Скорость загрузки страниц — моя вики

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

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

Ориентировочные стандарты загрузки страницы:

  • Средняя — 2-3 секунды
  • Медленная — более 4-х секунд
  • Нормальная – быстрее 1-й секунды
  • Данные приблизительные, в целом нужно ориентироваться на скорость загрузки сайтов в своей тематике.

Google получает данные о скорости загрузки сайта/страницы из

  • Данные из Панели инструментов Google 
  • Время ответа роботу Google 
  • Браузер Google Chrome Тулбар 
  • Google Toolbar

В каких случаях нужно проверять скорость сайта и давать рекомендации:

  • Если сайт грузится больше 4 секунд (высокий приоритет задачи)
  • Если на сайте оптимизированы все остальные моменты и нужно получить бонус в ранжировании за счет оптимизации скорости (низкий приоритет задачи)

Как узнать скорость загрузки сайта

Переходим по ссылке: https://developers.google.com/speed/pagespeed/insights

Вводим название сайта в строку проверки и нажимаем проверить.

После чего получаем отчет для мобильных устройств и для компьютеров:

В данном отчете уже будут готовые рекомендации, которые нужно будет перенести в Тз:

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

а) Ping Dom

Показывает загрузку всех объектов (images, CSS, JavaScripts, RSS, Flash, frames/iframes) сайта в секундах. Цветными индикаторами показано начало загрузки, получение отклика, загрузка первого байта и окончание загрузки.

 

б) Gt Metrix

Много развернутой информации по загрузке сайта.

в) LoadImpact

Особое внимание заслуживает данный ресурс. Он создает небольшую ddos-атаку на сайт, благодаря чему удается определить не только скорость загрузки сайта, но и оценить, насколько большой поток посетителей он способен выдержать. Проще говоря, сервис имитирует одновременное посещение сайта большого числа людей. Их максимальное количество – 50 «имитированных» пользователей.

Начиная с первого «искусственного» посетителя, сервис постепенно, равномерно увеличивает их количество до 50-ти. При этом показано количество одновременных запросов, нагрузка на сервер сайта (скорость работы хостинга) и ряд других менее важных параметров. Всего ddos-атака на веб-ресурс длится пять минут. После этого сервис нарисует график, по которому можно судить об устойчивости сайта.

Как ускорить загрузку сайта?

Скорость загрузки сайта зависит от двух составляющих:  первая – это серверная часть (генерация страницы на сервере), а вторая – это клиентская часть (отображение сайта в браузере пользователя).

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

  • Производительность сервера
  • Нагрузка на сервер
  • Время отклика сервера

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

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

  • Уменьшите количество HTTP-запросов
  • Поместите все CSS в начале страницы, а JS — в конце
  • Уберите повторяющиеся и не используемые скрипты
  • Используйте кэширование
  • Оптимизируйте изображения
  • Используйте gzip- сжатие

Работа с кодом страницы

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

1. Настройка CSS. Сначала необходимо настроить CSS-код (файл стилей сайта). Во-первых, если есть возможность реализовать какой-то элемент страницы не в виде плагина или скрипта, а CSS, то именно файлу стилей следует отдать предпочтение. CSS имеет приоритет над другими вариантами кода. Во-вторых, в общем коде сайта или страницы необходимо подключение CSS. И лучше, если подключение к CSS-файлам будет прописано в «хедере» (header), а не в «теле» (body) кода. Благодаря этому страница сможет загружаться постепенно, т.к. при этом сразу будут применяться файлы стилей. Если же файлы CSS будут подключаться где-то в «body», то страница, пока все ее элементы не загрузятся, может не отображаться.

2. Минимализация кода. При любых ситуациях, да и на любых сайтах, стоит стремиться уменьшать объем кода (особенно скриптов и сценариев). Чем их будет меньше, тем меньший объем информации придется загружать браузеру пользователя, а значит и увеличится скорость работы страницы. «Выкинув» все скрипты, без которых можно обойтись, затем следует «почистить» код. Речь идет об удалении всех лишних пробелов, каких-то ненужных символов, комментариев по коду (они тоже загружаются) и знаков табуляции. Помогают это сделать различные сервисы по «чистке» кода страницы.

3. Оптимизация кода. И наконец, проделав два предыдущих действия, стоит заняться оптимизацией кода. Речь идет о грамотном расположении элементов, входящих в состав кода. Все сценарии следует располагать как можно ниже по коду, чтобы сначала загружалась более важная информация – тексты, видео, картинки и т.д. – а лишь после них отрабатывались скрипты. Конечно, скорость загрузки всей страницы окажется при этом такой же, но теперь пользователи получают нужную им информацию до того, как страница полностью загрузится. Другими словами, раньше посетителям приходилось ждать загрузки всей страницы, а теперь они могут пользоваться сайтом, как только загрузится основной контент, что происходит намного раньше.

Работа с изображениями

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

GIF – формат, подходящий в тех случаях, когда огромного качества изображения не требуется. Файлы с расширением .gif занимают меньший вес, нежели картинки других форматов, поэтому и скорость загрузки сайта будет выше. Отсюда вывод – стремитесь использовать изображения в формате .gif. Но нужно иметь ввиду, что используя GIF, вы «теряете» в цветопередаче, т.е. при этом ухудшается качество изображения.

JPG – еще один формат изображений, подходящий для фотографий. Данный формат стоит использовать, когда требуется получить золотую середину между качеством изображения и его объемом.

PNG – самый качественный формат, но и объем таких файлов наибольший. Использовать .png нужно только в тех случаях, когда требуется сохранить изображение в высоком качестве. Во всех других ситуациях лучше отдавать предпочтение .gif или .jpg.

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

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

Оптимизация изображений для увеличения скорости загрузки страниц сайта

3. Уменьшение размеров изображений. И наконец, можно уменьшать размеры изображений, от чего автоматически снижается размер файла. Очевидно, что в этом случае скорость загрузки страницы сайта повышается.

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

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

Использование кеша

И третье направление, над которым нужно работать, это использование кеша. Кеширование – это «запоминание» определенных деталей страницы браузером. Первый раз браузер загружает всю страницу (все скрипты и css-параметры) и при этом запоминает некоторые элементы. При повторных загрузках данного сайта все кешированные элементы не загружаются повторно, а берутся из браузера. Поэтому скорость загрузки страницы возрастает, причем значительно.

У кеширования есть один серьезный недостаток – из-за того что некоторые динамические элементы страницы (скрипты и стили css) запоминаются браузером, то при их изменении на сайте о них пользователю будет неизвестно (т.к. браузер показывает ему тот вариант, который он запомнил). Лишь когда кеш обновится станет заметно изменение.

Существует несколько способов включения кеширования.

Во-первых, это можно сделать с помощью плагинов. Существуют специальные плагины, которые формируют кеширование, что позволяет увеличить скорость загрузки сайта. Для каждого движка существуют свои плагины, например, для WordPress можно использовать «Hyper Cache».

Во-вторых, можно подключить специальные скрипты, по сути выполняющие те же действия, что и плагины. Однако качество их работы выше, но есть и серьезный недостаток – они платные. Одним из таких скриптов кеширования является MaxCache (стоимость около 10 долларов), позволяющий снизить нагрузку на сервер и увеличить скорость загрузки страницы в 100 раз.

Пример рекомендаций в Тз:

Сократите код JavaScript на следующих ресурсах, чтобы уменьшить их размер на 19,5 КБ:.

Сокращение http://www.site.com.ua/…RJwb5n2cPerOtTw34B6mzRiUNi1rZJbaQLiGU.js позволит уменьшить размер на 10,7 КБ после сжатия.

Сокращение http://www.site.com.ua/…mcLz8_00RMt9A9Ud5xsS4fiSi3ArVfSZMKjy4.js позволит уменьшить размер на 4,7 КБ после сжатия.

Сокращение http://www.site.com.ua/…MLrjr9xXAC0JufqSSch4oAbkZstSqYdc4uuck.js позволит уменьшить размер на 4,2 КБ после сжатия.

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

Бесплатные сервисы для проверки скорости загрузки вашего сайта

  • Медленные каналы связи у хостинга

  • Много «тяжелых» изображений

  • Файлы CSS и JS

  • Сложный дизайн

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

Что говорят исследования

Наверняка все где-то краем уха слышали про три секунды или про пять, которые пользователь готов подождать. Дело, кстати, не только в пользователях, но и в продвижении – у медленного сайта выше процент отказов, что негативно влияет на позиции в выдаче. В Google, если у вас медленно загружается мобильная версия, то пессимизируется в выдаче и десктопная – действует Mobile First Index.

Вот, что выяснили исследователи:

Если скорость загрузки сайта больше, чем 3 секунды, 53% пользователей не дождутся ее окончания, – Google

Это – общепринятое мнение, но хорошая скорость загрузки считается еще выше – 0,35–0,38 сек. Как посчитать это время? Для этого есть много бесплатных и платных сервисов, которые замеряют, насколько быстро сервер реагирует на запрос клиента, набранный в браузере. 

Для мобильной версии каждая лишняя секунда ухудшает конверсию на 20%, – аналитическая платформа Soasta

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

Со снижением скорости загрузки с 1 до 10 секунд, растет показатель отказов, – Google

Самое впечатляющее количество отказов происходит между третьей и пятой секундами: число увеличивается в три раза.

Медленная загрузка сайта раздражает больше всего, – Google

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

7 бесплатных сервисов для проверки скорости загрузки

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

Яндекс.Вебмастер

Один из самых популярных сервисов для проверки скорости – https://webmaster.yandex.ru/. Время ответа сервера он считает в миллисекундах, а также показывает код ответа сервера, причем он должен быть одного вида: 200 ОК. Если у вас он другого вида (404, 301 и др.), то скорость – это не главная ваша проблема. 

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

Google PageSpeed Insights

Аналогичный интуитивно понятный сервис от Google. Тут все еще проще: вставляешь адрес в строку, нажимаешь кнопку «Анализировать» и получаешь результат измерения скорости мобильной или десктопной версии, на выбор.

Результат замера выдается в виде баллов от 0 до 100, чем балл выше, тем лучше. Оптимален показатель 80+. Зеленая зона начинается от 90, но тотальный перфекционизм тут лишний, 100 баллов не набирает даже сам Гугл.

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

WebPagetest

WebPagetest – сервис с большим выбором условий тестирования. Вы можете указать нужное местоположение, гаджет, разные браузеры, то есть точнее проработать скорость загрузки по разные сегменты ЦА.

По итогам теста он выдает наглядный и подробный отчет в трех частях. Все оформлено в виде инфографики и легко воспринимается, если вы хотя бы немного знаете английский.

Sitespeed.ru

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

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

Web Page Analyzer

Суровый бесплатный сервис, работает по тому же принципу, что и остальные: вы ему – URL страницы, он вам – не слишком симпатичную, но информативную таблицу с результатами измерения.

mobiReady

Еще один крутой бесплатный англоязычный сервис – mobiReady. Он позволяет увидеть, как выглядит сайт на устройствах с разным размером экрана, что незаменимо на стадии тестирования мобильной версии. Также вы получите графический отчет и список проблемных мест.

GTMetrix

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

Этот сервис условно-бесплатный, так как на бесплатном тарифе можно проверять максимум 3 адреса, если требуется больше – нужно подключать платные. Кроме расширенного количества они включают и другой функционал: расширенные отчеты, запись видео с загрузкой и т. д.

Whichloadsfaster

Полезный сервис, если вы хотите сравнить скорость загрузки собственного сайта с сайтом конкурентов. 

Вы увидите кто в сколько раз быстрее, и собственно скорость загрузки.

Причины и решения проблемы

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

Медленные каналы связи у хостинга

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

Если же вы уже размещены неудачно – вариант один: менять хостинг и переносить все данные.

Много «тяжелых» изображений

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

  1. Уменьшить количество картинок. Сразу можно убрать стоковые изображения. Возможно, какие-то фотографии можно заменить инфографикой – она весит меньше. Уберите все картинки, которые разбавляют ваш текст, оставьте только иллюстрации. Где-то картинки можно заменить текстом. 

  2. Сжать картинки. Если вам абсолютно нечего выкидывать, можно уменьшить размер самих картинок. Для этого есть разные сервисы, например, https://compressor.io/. 

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

Файлы CSS и JS 

Большое количество анимации на сайте, сложные кастомные шрифты – это красиво, но в итоге вы получаете тонну кода. Если красивый шрифт дорог вам – оставьте его в заголовках, но не надо писать им весь сайт.

Сложный дизайн

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

Не нужно втыкать везде кнопку «Заказать», пары штук на странице более чем достаточно. Если вы зацепили посетителя – будьте уверены, он ее найдет, а если нет – то повесьте их хоть 20 штук, это не поможет. Если вы продаете дорогой и сложный товар – не нападайте на читателя с предложением купить на верхнем же экране, все равно он это не сделает, пока не изучит продукт со всех сторон.

Когда пользователь готов ждать

Всегда ли пользователи так нетерпимы к долгой загрузке? Есть очень старый эксперимент User Interface Engineering, который показал фактическое отсутствие корреляции между временем загрузки сайта и его восприятием пользователем. Так, люди говорили, что самый быстрый сайт – Амазон, который загружался дольше всего, а страница, который не несла никакой полезной для них информации, воспринималась как самая медленная, хотя в реальности была одной из самых быстрых. То есть, когда сайт нерелевантен, не дает пользователю нужной информации, человек относится к нему, как к пустой трате времени, а скорость загрузки кажется дольше, даже если это реально не так. 

И это подтверждается общими наблюдениями. Да, если пользователь ищет, где купить кухню, и переходит по разным сайтам из выдачи по этому запросу, то вероятность отказа в случае долгой загрузки высока. Если сайт будет грузиться 15 секунд, посетитель подумает, что он просто нерабочий, и закроет. Но те же самые 15 секунд он будет покорно ждать, если это его теплый уютный ВКонтактик с непрочитанной лентой и непросмотренными фоточками. 

Многое зависит от того, насколько пользователь замотивирован. Если он просто присматривается, серфит от нечего делать, вероятность отказа растет. В то же время, если он настроен купить и целенаправленно ищет продукт, он готов подождать. 

Что еще можно использовать:

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

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

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

  • Для некоторых сервисов более актуальны мобильные приложения. Все знают, что есть такая служба такси, как Uber, многие пользовались ею и пользуются регулярно. Но много ли кто был на их сайте? Он, кстати, тоже есть. То же самое можно сказать о каршерингах, сервисах проката велосипедов, самокатов. Вообще, если у вас бизнес с ритейлом, и вам нужно понимать, где находятся ваши клиенты, удобное и быстрое мобильное приложение будет кстати. Аптеки, магазины, салоны красоты, рестораны – для всех них оно будет использоваться не реже, чем сайт. 

Заключение

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

Компания Dial проведет грамотный аудит вашего сайта, и превратит его в современный, быстрый и красивый ресурс. Так же, как мы сделали это для компаний Аквалайн, ТД Богучарово, Элита, сервиса Мой Бизнес, интернет-магазинов Anna Anna, Скай и многих других.

Протестируйте свой сайт с помощью Google и посмотрите, как он работает на разных устройствах.

Знаете ли вы, что девять из десяти пользователей покинут мобильный сайт, если не смогут сразу найти то, что ищут? 1 Теперь подумайте о сайте вашей компании. Быстро ли он работает как на ноутбуках, так и на смартфонах? Если нет, вы, вероятно, теряете клиентов, пока страницы загружаются медленно. Но если вы не знаете, как сделать его более плавным, не волнуйтесь — мы здесь, чтобы помочь.

Сегодня мы представляем простой способ измерения производительности вашего сайта на разных устройствах — от мобильных до настольных — и даем вам список конкретных исправлений, которые помогут вашей компании быстрее общаться с людьми в Интернете.

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

Почему вы должны протестировать свой сайт

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

Чтобы не проиграть в эти решающие моменты, вам нужен сайт, который быстро загружается и удобен для мобильных устройств.Первый шаг — посмотреть, как работает ваш сайт. Мы можем помочь, оценив ваш сайт с точки зрения удобства для мобильных устройств, скорости мобильных и настольных компьютеров. Кроме того, этими результатами легко поделиться. (Кстати, если вы являетесь гуру сайтов, вы также можете посетить PageSpeed ​​Insights, которая является источником оценок.) Это качество взаимодействия с клиентами, когда они просматривают ваш сайт на своих телефонах.Чтобы быть удобным для мобильных устройств, на вашем сайте должны быть кнопки, на которые можно нажимать, на нем должно быть легко перемещаться с маленького экрана, а самая важная информация должна располагаться впереди и по центру.

  • Мобильная скорость: сколько времени требуется вашему сайту для загрузки на мобильных устройствах. Если клиенты будут ждать слишком долго, они перейдут к следующему сайту.
  • Скорость рабочего стола: сколько времени требуется вашему сайту для загрузки на настольных компьютерах. Скорость определяется не только силой интернет-соединения ваших клиентов, но и элементами вашего сайта.
  • Протестируйте свой сайт и узнайте, что работает, а что нет, и какие исправления следует принять во внимание.

    Мир стал мобильным. Теперь твоя очередь.

    5 способов оптимизировать ваш сайт для критериев скорости страницы Google

    В мае 2018 года Google выпустил Lighthouse 3.0, обновленную версию своего инструмента с открытым исходным кодом для аудита качества и скорости веб-страниц. Lighthouse 3.0 предлагает новые параметры вывода для отчетов, а также ряд изменений в способе измерения скорости и производительности сайта, например, введение First Contentful Paint в качестве показателя производительности и скорости, а также новые веса для аудита производительности.

    А с мая 2018? Google выпустил еще больше изменений. Именно поэтому сегодня мы делимся пятью способами оптимизации вашего сайта.

    Давайте начнем.

    Зачем оптимизировать скорость вашего сайта сейчас?

    Маяк продолжал развиваться в течение года после выхода версии 3.0. Google недавно объявила, что работает над «пакетами платформ» для Lighthouse, с помощью которых тестировщики могут получать советы по оптимизации скорости, характерные для CMS и библиотек кода, используемых на их сайтах.

    Так что, если вы используете Angular JavaScript, например, с WordPress, вам повезло, но другие варианты пакетов платформы уже находятся в стадии разработки с помощью сообщества GitHub.

    Источник изображения

    Google постепенно увеличивает важность скорости сайта как критерия ранжирования в поиске с момента первого введения индекса mobile-first в 2016 году, поэтому разумно обращать внимание на эти показатели и тенденции. Google выпустил около 62 обновлений настройки алгоритма в течение в среднем недели в 2018 году, поэтому обеспечение высокого рейтинга становится все более динамичной практикой.А учитывая относительную новизну индекса mobile-first, а также его непропорциональное влияние на посещаемость веб-сайта, логично, что большая часть усовершенствований алгоритма будет сосредоточена на мобильных устройствах.

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

    «Многие из этих показателей, на которые вы смотрите в Lighthouse, в первую очередь представлены вам в отношении стороны вещей, с которой сталкивается пользователь», — объяснил аналитик Webmaster Trends Джон Мюллер в феврале во время сеанса вопросов и ответов в Hangouts в рабочее время.«С нашей точки зрения, с точки зрения поиска, мы объединяем множество этих показателей, чтобы выяснить, как мы должны видеть этот сайт с точки зрения скорости».

    Имея все это в виду, мы собрали пять советов, которые помогут вам порадовать богов Google скоростью вашего сайта.

    1. Реализовать ленивую загрузку

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

    Источник изображения

    При ленивой загрузке за один раз загружается только часть веб-страницы — тот раздел, который зритель просматривает в эту секунду, поэтому вы откладываете загрузку следующей части до тех пор, пока посетитель не прокрутит ее вниз. Это сокращает время, необходимое для достижения таких показателей, как First Meaningful Paint и First Content Paint, которые являются двумя показателями, которые Lighthouse использует для измерения скорости и производительности сайта.

    Ленивая загрузка обязательна, если вы реализовали «бесконечную прокрутку», которая популярна на сайтах с большим количеством контента, но может помочь на всех типах сайтов. На самом деле, платформа веб-дизайна Duda обнаружила, что после реализации отложенной загрузки на сайтах, работающих на Duda, эти свойства получили в среднем 10 баллов в баллах Lighthouse — ничто, чтобы поколебать палку на

    2. Максимально используйте форматы изображений нового поколения

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

    Форматы следующего поколения включают JPEG 2000, JPEG XR и WebP. Эти форматы сжимают и конвертируют изображения, делая их намного меньше, чем традиционные PNG и JPG, но они не оказывают негативного влияния на качество изображения. Когда вы используете форматы нового поколения, вы можете значительно ускорить загрузку страниц, даже для визуальных элементов с большими размерами в пикселях, без ущерба для качества изображения.Посмотрите на эти данные от Insane Lab, которые показали, насколько файлы WebP меньше, чем файлы PNG:

    Google особенно рекомендует веб-мастерам использовать собственное новое форматирование WebP, которое поддерживается браузерами Chrome и Opera. WebP создает изображения, которые на 26% меньше, чем PNG, и на 25-35% меньше, чем форматы JPG.

    3. Используйте сеть доставки контента

    Сеть доставки контента или CDN — отличное решение для ускорения загрузки страниц, что является вторым по важности показателем для хорошей оценки производительности в Lighthouse 3.0.

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

    Источник изображения

    CDN

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

    4. Избавьтесь от ненужных плагинов

    Если у вас есть сайт, работающий на WordPress или аналогичной платформе, которая использует плагины для дополнительной функциональности, эти плагины могут снижать скорость отклика вашего сайта, влиять на его показатели интерактивности и снижать ваши показатели производительности Lighthouse 3.0.

    Некоторые плагины могут иметь жизненно важное значение для вашего сайта, например, ваш платежный процессор, но другие могут уже не иметь особого смысла. Многие плагины запрашивают информацию у сторонних серверов, что может еще больше замедлить работу. В недавнем опросе DigWP более 900 профессионалов WordPress указали количество плагинов, которое они обычно считают порогом «слишком много», при этом 75% респондентов согласны с тем, что 25 — это предел. Более трети респондентов рекомендовали 10 в качестве предела.

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

    5. Удалите правила CSS, которые вы не используете

    Правила CSS вашего сайта определены в файле main.css. Ее также называют внешней таблицей стилей, поскольку она хранится отдельно от HTML-кода сайта. Чтобы ваш сайт загрузил First Contentful Paint, что сильно влияет на производительность в соответствии с новой версией Lighthouse, браузер должен сначала получить, проанализировать и обработать каждую таблицу стилей CSS, чтобы определить, как будет отображаться контент.

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

    Источник изображения

    Минимизация ваших файлов CSS с помощью плагина, такого как Fast Velocity Minify, может значительно помочь вам с вашими баллами Lighthouse, но вы можете сделать больше, чтобы время загрузки CSS не сдерживало вас. Удаление всех неиспользуемых определений CSS еще больше ускоряет работу и оптимизирует производительность вашего веб-сайта для повышения рейтинга Google.

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

    Представление и дальнейшее развитие Lighthouse 3.0 следует рассматривать как еще одно напоминание о важности оптимизации вашего сайта в соответствии с последними критериями скорости Google. Избавившись от ненужных вам правил CSS и подключаемых модулей, используя CDN и форматы изображений нового поколения, а также используя отложенную загрузку по максимуму, вы можете оптимизировать свой сайт, сократить время загрузки страницы и повысить производительность, чтобы оставаться на одном уровне с Google. хорошие книги.

    Об авторе

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

    Обновление Google делает скорость веб-сайта жизненно важной

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

    Google будет оценивать взаимодействие пользователя со страницей с помощью Core Web Vitals, которые представляют собой показатели, которые оценивают вашу страницу по времени загрузки, интерактивности и стабильности контента при загрузке.Проще говоря, Core Web Vitals оценивает скорость вашего сайта. Если вы хотите, чтобы ваши страницы хорошо отображались в результатах поиска, вы должны убедиться, что ваш сайт хорошо оценивается по этим показателям. Больше информации из Search Engine Journal.

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

    Что это значит для вас, владельца бизнеса? Это означает, что пришло время проверить это и исправить, если это необходимо.Однако это не обновление вашего сайта, которое вы можете сделать самостоятельно; для этого потребуется ваш веб-разработчик.

    Что включает в себя Core Web Vitals?

    Даже если обновления сайта передаются вашему веб-администратору, важно понимать немного об обновлении Google и о том, что нужно делать.

    В вашем балле Core Web Vitals есть три компонента.

    • Largest Contentful Paint (LCP): время, необходимое для загрузки основного содержимого страницы.Идеальное измерение LCP составляет 2,5 секунды или быстрее.
    • Задержка первого ввода (FID): время, необходимое для того, чтобы страница стала интерактивной. Идеальное измерение составляет менее 100 мс.
    • Совокупное смещение макета (CLS): величина неожиданного смещения макета визуального содержимого страницы. Идеальное измерение меньше 0,1.

    Если эти пули заставляют вас чесать голову и тянуться к кнопке «Назад». Подожди! Оставайтесь с нами. Вам просто нужно знать, что происходит; вам не нужно знать, как оценить и решить эту проблему.

    Проверьте и улучшите свои основные веб-жизненные показатели

    К счастью, вы можете улучшить показатели Core Web Vital вашего сайта. Но не откладывайте, потому что обновление алгоритма Google произойдет в мае этого года. У вас есть время до 1 мая, чтобы ваш веб-сайт стал быстрее и готов обойти конкурентов. Но как?

    Как уже упоминалось, вам потребуется помощь вашего веб-администратора, и вам потребуется подтвердить Google Search Console для вашего домена (в любом случае это полезно!) Мы включили некоторую базовую информацию о Search Console в ссылка ниже.В противном случае вам просто нужно отправить электронное письмо своему веб-администратору, чтобы запросить обновление этого сайта.

    Полезная информация Search Console

    1. Начните здесь со страницы приветствия и выберите вариант слева для «Домен» https://search.google.com/search-console/welcome
    2. Вам понадобится учетная запись Gmail, чтобы подтвердить ее. Убедитесь, что ваш домен подтвержден с использованием учетной записи Gmail, которую вы, владелец бизнеса, контролируете.
    3. Мы рекомендуем, если вы уже настроили Google Analytics на своем сайте, вы должны использовать адрес Gmail, связанный с Google Analytics.Это позволит двум платформам обмениваться информацией.

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

    Нужна помощь?

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

    Если у вас есть сайт на WordPress и вам нужно качественное комплексное обслуживание, мы будем рады поговорить с вами!

    Свяжитесь с нами сегодня!

    Google Search Console начинает развертывание отчета о скорости

    Шесть месяцев назад Google начал тестирование нового отчета о скорости в Google Search Console, и теперь этот отчет начинает распространяться среди всех пользователей Search Console. Google объявил в понедельник.

    Что это за отчеты ? Отчеты «Скорость», расположенные в разделе «Улучшения» Google Search Console, помогают веб-мастерам быстро находить разделы и URL-адреса своих веб-сайтов, которые могут иметь проблемы со скоростью. Оттуда вы можете приступить к диагностике и устранению проблем, которые замедляют загрузку вашей страницы.

    Что показывают эти отчеты? Мы просматривали эти отчеты несколько недель назад, так что ознакомьтесь с подробной информацией здесь. Короче говоря, Google разделит ваши страницы на «быстрые», «умеренные» и «медленные».”

    Вот снимок экрана:

    Google поделится более подробной информацией о том, как улучшить скорость страниц, связав вас с инструментом PageSpeed ​​Insights.

    Использование отчета для мониторинга и отслеживания изменений. «Вы должны использовать этот отчет как для отслеживания своей производительности с течением времени, так и для отслеживания исправлений, которые вы внесли на свой веб-сайт», — сказал Google. «Если вы устраните проблему, используйте отчет, чтобы отслеживать, заметили ли пользователи улучшение производительности при просмотре исправленной версии вашего веб-сайта.”

    Почему мы заботимся . Как мы уже говорили ранее, скорость важна не только для рейтинга в Google, но и для посетителей вашего сайта и для показателей конверсии. Наличие этих данных в Google Search Console дает SEO-специалистам и веб-мастерам единое место для просмотра этой информации без необходимости использования инструментов PageSpeed. Кроме того, этот отчет предоставляет исторические данные об улучшениях или возможных проблемах с течением времени.


    Новое в поисковой системе

    Об авторе

    Барри Шварц, пишущий редактор Search Engine Land и член группы программистов для мероприятий SMX.Он владеет RustyBrick, нью-йоркской веб-консалтинговой фирмой. Он также ведет Search Engine Roundtable, популярный поисковый блог по очень сложным темам SEM. Личный блог Барри называется Cartoon Barry, и за ним можно следить в Твиттере здесь.

    Как повысить скорость страницы с помощью отчетов Google Analytics и других полезных инструментов

    Скорость страницы — это не только фактор ранжирования в поисковых системах, но и то, как долго посетитель остается на вашем сайте. На самом деле, 47% пользователей сети ожидают, что веб-сайт загрузится менее чем за 2 секунды, и 57% посетителей покинут страницу, загрузка которой занимает 3 секунды или более .   Сегодня пользователи мобильных устройств ожидают, что страницы на мобильных устройствах будут загружаться быстрее, чем на компьютерах. Поскольку мобильные устройства стали основным способом поиска в Интернете, оптимизация веб-сайта для всех устройств важнее, чем когда-либо прежде. Давайте начнем снижать скорость вашего сайта, выявляя ошибки на вашем сайте.

    Наиболее распространенные ошибки скорости сайта
    1. Использование плохо закодированных сторонних виджетов
    2. Использование низкопроизводительного хостинга
    3. Слишком много файлов JavaScript и CSS
    4. Слишком много обращений к серверу
    5. Не использует кэш браузера
    6. Не используется сеть доставки контента
    7. Отключенные заголовки HTTP Keep-Alive
    8. Не минимизировать код CSS и JavaScript
    9. Слишком много шрифтов, для загрузки которых требуется пропускная способность
    10. Не настроено окно просмотра для мобильных устройств
    11. Использование незакодированных фоновых градиентов
    12. Загрузка слишком большого количества скриптов в заголовок
    13. Использование скриптов, которые не могут загружаться асинхронно
    14. Не удается определить локальный резервный вариант
    15. Слишком много изображений
    16. Использование неоптимизированных изображений
    17. Использование растровых изображений, где можно использовать векторы
    Определение ошибок скорости сайта
    Отчет о скорости сайта Google Analytics

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

    Повышение скорости сайта с помощью этих инструментов
    Разработчики Google PageSpeed ​​Insights

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

    Соблюдайте правила скорости Google Developers:
    Модуль PageSpeed ​​

    Также от Google Developers модули PageSpeed ​​представляют собой «серверные модули с открытым исходным кодом, которые автоматически оптимизируют ваш сайт». Вы можете установить пакеты для Apache и выполнить сборку из исходного кода на Nginxon на своем веб-сервере.

    Мониторинг производительности сайта

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

    Сжатие изображений

    Чтобы сократить время загрузки страницы, сжимайте изображения с помощью сжатия Tinypng, Pixlr или G-Zip.

    Статьи о скорости сайта для чтения

    Прочтите следующие статьи, чтобы получить дополнительные сведения о вышеупомянутых ошибках скорости сайта:

    Есть вопросы или есть что добавить? Пожалуйста, прокомментируйте ниже, и мы свяжемся с вами.

    18 вопросов (и ответов) о Google, скорости сайта и SEO

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

    • Как Google на самом деле рассчитывает скорость страницы в своем алгоритме ранжирования?
    • Что я могу сделать, чтобы мои страницы работали быстрее в целях SEO?
    • Насколько важна скорость сайта для SEO?

    1.Отслеживает ли поисковый бот Google время загрузки?

    Многие считают, что Googlebot измеряет загрузку страницы, но нет, бот не имеет никакого отношения к измерению скорости.

    2. Использует ли Google свой инструмент PageSpeed ​​для измерения скорости страницы в целях ранжирования в поиске?

    По понятным причинам это сбивает с толку многих людей, потому что PageSpeed ​​— это название инструмента Google, используемого для оценки производительности страницы. Чтобы уточнить, скорость, с которой сайт загружается в браузере, является фактором ранжирования; однако Google не использует инструмент PageSpeed ​​в этом расчете.

    3. Используют ли они индекс скорости?

    Нет, я не думаю, что они используют SpeedIndex. Для тех, кто не знает, SpeedIndex — это метрика WebPagetest, представленная в 2012 году, которая пытается сделать акцент на визуальном прогрессе страницы, чтобы вычислить число как показатель производительности страницы. Это отличная инициатива, потому что отдельные показатели часто вводят в заблуждение. Это не составной показатель сам по себе, но фактический визуальный отклик страницы является ключом к расчету.

    Это то, что WebPagetest специально вычисляет при запуске теста. А поскольку Google использует панель инструментов и метрики загрузки, а не синтетические (я расскажу о механике этого в вопросе 5), SpeedIndex не является доступной им метрикой.

    4. Как насчет функции Google Analytics Site Speed?

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

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

    5. Как же Google собирает реальные данные о производительности?

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

    Вот как они это делают…

    Если вы установили панель инструментов Google в свой браузер и активировали функцию «Проверка PageRank», то вы помогаете Google измерять время загрузки для целей ранжирования в поиске. Панель инструментов измеряет фактическое время загрузки каждой страницы, которую вы посещаете, и отправляет результаты обратно в Google.Затем результаты агрегируются и используются для определения реальной скорости для каждой страницы.

    6. Какие браузеры использует панель инструментов Google?

    Функциональность панели инструментов, как и следовало ожидать, уже встроена в Chrome. Панель инструментов Google также доступна в виде надстройки для Internet Explorer 6+. Раньше он был доступен для Firefox 2–4, но Google прекратил поддержку Firefox в 2011 году.

    7. Что именно измеряет панель инструментов Google?

    Он измеряет время загрузки: время, необходимое для отображения всех ресурсов страницы в браузере — от видимых ресурсов, таких как текст и изображения, до тех, которые вы не видите, таких как сторонняя аналитика.(«Время загрузки» также известно как «время завершения документа» или «время загрузки».)

    Здесь есть большое предостережение: хотя время загрузки является важным показателем производительности, к нему нужно относиться с долей скептицизма, поскольку оно не является показателем того, когда страница становится интерактивной. Страница со временем загрузки 10 секунд может быть почти полностью интерактивной в течение 2-5 секунд. Это связано с тем, что время загрузки может быть увеличено сторонним контентом, таким как вышеупомянутая сторонняя аналитика, которую пользователи даже не могут видеть.

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

    8. Какие страницы измеряет Google?

    Google измеряет каждую страницу, посещенную пользователями на вашем сайте.

    9. Что? Даже страницы, которые я пометил как несканируемые?

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

    10. С точки зрения посещаемости сайта, в какой момент начинает действовать фактор скорости страницы? Мы говорим о сотнях тысяч просмотров страниц в месяц? Миллионы?

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

    Имейте в виду: если вы согласны с широко распространенным мнением о том, что скорость страницы составляет около 1% от общего веса алгоритма, это может объяснить, почему иногда скорость не так сильно влияет на ранжирование, особенно на сайтах с мало просмотров страниц.

    11. Что делать, если моя страница персонализирована и имеет разный контент для пользователей, прошедших проверку подлинности, но с тем же URL-адресом?

    Панель инструментов Google не различает персонализированный контент, если URL остается прежним. Все результаты усредняются вместе, чтобы определить окончательный балл.

    12. Как Google будет учитывать скорость страницы при ранжировании в мобильном поиске?

    Глава Google по поисковому спаму Мэтт Каттс объявил в прошлом месяце на SMX Advanced, что Google собирается развернуть версию своего коэффициента ранжирования по скорости для мобильных сайтов.Мэтт не уточнил, когда ожидается, что это изменение вступит в силу. Это согласуется с другим намеком Google на грядущую мобильную версию PageSpeed ​​Insights, но я не думаю, что они связаны по тем же причинам, что и в ответах на вопросы 2–4 выше.

    Основываясь на том, что мы знаем о том, как Google собирает реальные пользовательские данные с помощью панели инструментов Google для настольных компьютеров, можно с уверенностью предположить, что он может аналогичным образом собирать данные о мобильных пользователях через свое приложение Google Search. Имея от 100 до 500 миллионов текущих установок на устройствах Android и iOS, это достаточно большая группа пользователей, чтобы получать статистически значимые результаты.

    13. Повлияет ли предварительная загрузка контента на страницу на мой рейтинг?

    «Предварительная загрузка» — это передовой метод оптимизации внешнего интерфейса, который мы используем в нашем решении FastView здесь, в Radware. Это позволяет нашим клиентам постоянно отслеживать и анализировать, как посетители используют их сайт. Затем, используя эту информацию, он предсказывает, какие страницы люди, скорее всего, посетят в следующий раз, а затем отправляет ресурсы страницы в браузер посетителя, чтобы они ожидали в режиме ожидания, прежде чем посетитель даже щелкнет.

    Предварительная загрузка хороша тем, что создает иллюзию почти мгновенной загрузки страницы, но владельцы сайтов иногда спрашивают, является ли это уловкой, за которую Google их отклонит и, возможно, даже накажет. Короткий ответ — нет. Как я уже упоминал выше, оценка Google основана на измерении времени загрузки. Предварительная загрузка не обманывает систему. Это просто улучшает время загрузки.

    14. Поможет ли отсрочка ресурсов страницы моему рейтингу?

    «Отсрочка» — еще один отличный метод оптимизации. Это позволяет вам откладывать несущественные ресурсы страницы, такие как сторонние скрипты, чтобы они загружались после события onload. Отсрочка — это честная техника в книгах Google.Все, что помогает странице улучшить время загрузки, улучшит оценку этой страницы.

    15. Поможет ли более быстрое «время начала рендеринга» моему рейтингу?

    «Время начала рендеринга» отличается от «времени загрузки». Как следует из названия, «начать рендеринг» указывает, когда контент начинает отображаться в браузере пользователя. Хотя его можно измерить, начало рендеринга не указывает на то, полезен ли первый контент, заполняющий браузер, или это просто реклама и виджеты.

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

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

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

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

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

    17. Мой сайт уже работает довольно быстро. Есть ли точка отсечки, при которой ускорение не повлияет на его SEO-рейтинг?

    Страницы, которые уже работают быстро, вероятно, не заметят разницы. Если вы сокращаете время загрузки с 10 до 3 секунд, это значительное улучшение, которое, скорее всего, вам поможет. Если вы уменьшите время загрузки с 2 до 1 секунды, вы, вероятно, не увидите никаких реальных результатов.

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

    18. Насколько мне важна скорость страницы?

    Вопросы 1–17 касаются вопроса «Как они это делают?» вопросы. Сложнее ответить на вопрос «Насколько меня это должно волновать?» вопрос. Я читал аргументы в пользу того, что ускорение страниц практически ничего не сделало для улучшения поискового рейтинга, и я читал тематические исследования от компаний, которые говорят, что они сделали свои страницы быстрее и увеличили органический трафик где-то между 20 и 40 процентами.

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

    Почему вы должны заботиться о Google PageSpeed ​​Insights

    Если вам интересно, имеет ли значение оценка Google PageSpeed ​​Insights, наш короткий ответ: да.Оценка Google PageSpeed ​​Insights важна (и надежна).

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

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

    Начиная с июня 2021 года показатель Google PageSpeed ​​будет тесно связан с вашими показателями SEO, поскольку Core Web Vitals включен в новый фактор ранжирования Page Experience.

    В этой статье вы узнаете, почему Google PageSpeed ​​Insights важен и точен для измерения различных аспектов взаимодействия с пользователем на вашем сайте, включая производительность.

    Вы также поймете, почему вы всегда должны обращать внимание на время загрузки — Google PageSpeed ​​Insights все еще может немного вводить в заблуждение, и в WP Rocket мы очень заботимся об этом показателе!

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

    Вы получите ответы на все свои самые популярные вопросы и сомнения относительно важности PageSpeed ​​Insights, включая вечный вопрос: имеет ли значение показатель скорости страницы 100/100?

    Что такое Google PageSpeed ​​Insights и что означает показатель PageSpeed ​​

    Давайте вспомним основы.

    Google PageSpeed ​​Insights — это один из инструментов Google для измерения и улучшения производительности вашего сайта на мобильных и настольных устройствах.

    В первую очередь PageSpeed ​​Insights предоставляет вам общую оценку производительности страницы.

    Оценка Google PageSpeed ​​определяется Lighthouse, инструментом с открытым исходным кодом, разработанным командой Google. Lighthouse проводит различные аудиты, в том числе аудит производительности. После проведения аудита производительности и оценки нескольких показателей Lighthouse определит показатель производительности — 90 122, то есть тот же показатель, который предоставляет Google PageSpeed.

    Оценка Google PageSpeed ​​основана на лабораторных данных . Это означает, что Google PageSpeed ​​Insights через Lighthouse собирает данные о производительности в контролируемой среде.Моделирование выполняется с предопределенными настройками устройства и сети.

    Поскольку оценка Google PageSpeed ​​основана на предопределенных условиях, например на подключении к Интернету, она не отражает реальный опыт пользователя на 100 %.

    Домашняя страница WP Rocket — пример лабораторных данных

    Вот почему инструмент PageSpeed ​​Insights также предоставляет полевые данные. Реальные полевые данные основаны на агрегированных данных, которые Google Chrome собирает у пользователей и делает доступными в отчете об опыте использования Chrome (CrUX).

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

    Полевые данные, хранящиеся в CrUX, содержат все три Core Web Vitals . Вы можете быстро определить их по синему флагу: самая большая отрисовка содержимого (производительность загрузки), первая задержка ввода (интерактивность), совокупное смещение макета (визуальная стабильность).

    Домашняя страница WP Rocket — пример полевых данных

    . На данный момент вам полезно знать, что лабораторные данные содержат только самые большие оценки Contentful Paint и Cumulative Layout Shift.Метрика «Задержка первого ввода» не может быть измерена без реального взаимодействия с пользователем. Вот почему показатель производительности учитывает показатель «Общее время блокировки», используемый в качестве прокси.

    И последнее, но не менее важное: полевые данные ценны, потому что именно так Google оценивает рейтинг SEO — подробнее об этой теме в следующем разделе!

    Почему Google PageSpeed ​​важен (и почему он влияет на SEO)

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

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

    1. В июле 2018 года Google выпустил обновление Speed ​​Update, и скорость мобильной страницы стала прямым фактором ранжирования как для поиска Google, так и для рекламы.
    2. В июне 2021 года сигнал Page Experience станет фактором ранжирования SEO. Этот новый фактор ранжирования измеряет пользовательский опыт страницы . Он включает в себя несколько сигналов: удобство для мобильных устройств, HTTPS-безопасность, навязчивые межстраничные рекомендации, безопасный просмотр и уже упомянутые показатели Core Web Vitals .

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

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

    Несмотря на то, что оценка Google PageSpeed ​​в целом не является фактором ранжирования, вам необходимо позаботиться о показателях Core Web Vitals. Как мы уже говорили, они являются частью нового сигнала ранжирования Page Experience и будут влиять на вашу органическую видимость.

    Ниже приведены баллы, необходимые для каждого Core Web Vital. Вы должны начать думать о том, как их улучшить! (Подсказка: WP Rocket — это самый простой способ улучшить свои основные веб-жизненные показатели за несколько кликов).

    Баллы для каждого Core Web Vital

    Является ли Google PageSpeed ​​Insights надежным и точным?

    Да, Google PageSpeed ​​Insights теперь достаточно надежен и точен при измерении полного пользовательского опыта на вашем сайте.Благодаря различным включенным показателям он дает вам точное представление о том, как пользователи взаимодействуют с вашим сайтом.

    Инструмент стал еще надежнее благодаря последним изменениям.

    В ноябре 2018 года Google выпустил PageSpeed ​​5.0. В новой версии начали использовать упомянутый выше набор данных Chrome User Experience Report (CrUX). Он также начал использовать аудиты Lighthouse.

    Затем, в мае 2020 года, появился Lighthouse 6.0. Были добавлены новые метрики — те же самые, которые вы сейчас видите в инструменте PageSpeed ​​Insights и которые отражают общую производительность и взаимодействие с пользователем.

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

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

    Подождите… значит ли это, что показатель PageSpeed ​​не отражает скорость веб-сайта? Честный ответ: это зависит.

    Почему показатель Google PageSpeed ​​не равен производительности загрузки страницы

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

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

    Для ясности: у вас может быть хороший показатель PageSpeed, но ваш сайт не может быть таким быстрым. Или у вас может быть быстрый веб-сайт и плохой показатель PageSpeed.

    Мы поделимся несколькими примерами — они могут вам понравиться!

    • Следование рекомендациям PageSpeed ​​Insights не всегда сделает ваш сайт быстрее.

      Возьмем популярную рекомендацию по удалению JavaScript, блокирующего рендеринг. Если вы решите эту проблему, ваш показатель PageSpeed ​​улучшится. Однако, если вы измерите время загрузки с помощью Pingdom, вы не обязательно заметите улучшение.
    • Чем ниже показатель PageSpeed, тем больше улучшится время загрузки, но не ожидайте пропорционального увеличения. Если ваш показатель Google PageSpeed ​​подскочил с 10 до 90, вполне вероятно, что время загрузки улучшится — скажем, оно уменьшится с 2 до 1,5 с.
      Если ваша оценка Google подскочит с 80 до 90, время загрузки уменьшится лишь незначительно — например, с 2 с до 1,9 с.

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

    Время загрузки — это просто время загрузки страницы.С другой стороны, оценка Google PageSpeed ​​​​учитывает шесть показателей, которые выходят за рамки этого.

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

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

    • Если время загрузки велико, вы, скорее всего, потеряете пользователей и конверсии.
    • Если ваш показатель PageSpeed ​​невелик, скорее всего, показатели Core Web Vitals также не будут хорошими. И ваш сайт будет оштрафован с точки зрения SEO. Не забывайте: на Core Web Vital приходится 55% оценки PageSpeed.

    Как рассчитывается показатель Google PageSpeed ​​Insights

    Мы видели, как оценка Google PageSpeed ​​влияет на эффективность SEO. Теперь давайте подробнее рассмотрим показатели, которые могут повлиять на вашу оценку.

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

    Что такое хороший показатель Google Pagespeed?

    Если вам интересно, к какой оценке Google PageSpeed ​​вам следует стремиться, знайте, что хорошая оценка начинается с 90 — порога, дающего вам зеленый цвет.

    Счет делится на три сегмента:

    • Хорошо: ваша оценка 90 или выше (зеленый)
    • Требует улучшения: ваша оценка от 50 до 90 (оранжевый)
    • Плохо: ваша оценка ниже 50 (красный).

    Показатели и веса PageSpeed ​​Insights

    Оценка скорости страницы Google включает шесть показателей:

    Важно знать, что каждая метрика имеет разный вес.

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

    Здесь вы можете увидеть, как рассчитывается вес:

    Говоря о Core Web Vitals, вы можете заметить, что самая большая отрисовка контента и общее время блокировки — это показатели, которые имеют наибольшее значение. Они оба составляют 55% от общего балла.

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

    Посмотрите, насколько плохим станет показатель производительности, если вы увеличите производительность «Максимальная отрисовка контента» или «Общее время блокировки»:

    Как меняется оценка производительности в соответствии с LCP и TTB

    Улучшив обе метрики, вы также уменьшите время загрузки. Насколько она уменьшится, зависит от вашего первоначального балла — как мы объяснили в примерах выше.

    В июне 2021 года, Маяк 8.0 увеличен вес метрики Совокупное смещение макета, которая теперь составляет 15%

    Теперь вы понимаете, какие показатели наиболее важны для SEO и оптимизации производительности. Пришло время получить хорошие результаты и быстро улучшить как Core Web Vitals, так и время загрузки за один раз!

    Google PageSpeed ​​Insights для мобильных устройств и компьютеров: в чем разница?

    Единственная разница между Google PageSpeed ​​Insights для мобильных устройств и настольных компьютеров — это оценка, которую вы можете получить.Получить хорошую мобильную оценку PageSpeed ​​сложнее, чем добиться такой же оценки на настольном компьютере.

    Это связано с тем, что соединение на мобильном устройстве работает медленнее. Просто как тот.

    По умолчанию Lighthouse имитирует соединение 3G. Сравнивать мобильную оценку с настольной версией несправедливо. Подключение к рабочему столу всегда будет быстрее.

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

    Как улучшить низкий показатель PageSpeed ​​для мобильных устройств

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

    Вы решите проблемы с производительностью на мобильных устройствах, следуя двум упущенным передовым методам: изменению размера и отображению правильных изображений для мобильных устройств и оптимизации размеров изображений (не только размеров!).

    Вот несколько практических примеров:

    • Допустим, у вас есть слайдер, содержащий очень большое изображение — около 2000 пикселей.Изображение будет хорошо с рабочего стола, где среднее разрешение по ширине составляет 1900 или 1400 пикселей. С другой стороны, максимальная ширина на мобильных устройствах составляет 700 пикселей.
      Размеры изображения будут иметь существенное негативное влияние на мобильные устройства. И это добавит к проблеме с подключением 3G.

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

    • Размер файлов изображений также может привести к снижению производительности мобильных устройств.Если вы оптимизируете изображение от 1 МБ до 500 КБ, ваша страница будет работать быстрее. Чем меньше размер вашей страницы, тем быстрее будет загружаться страница. Это особенно верно, когда у вас более медленное соединение. Вот почему оптимизация изображения всегда будет иметь более значительное влияние на ваш мобильный счет, чем на настольный компьютер. Чем хуже ваше соединение, тем критичнее оптимизация изображения.

    Имеет ли значение получение оценки Google PageSpeed ​​100/100 на мобильных устройствах?

    Мы будем максимально честными.Почти невозможно получить мобильное устройство с 100 баллами по причинам, описанным выше. На десктопе такую ​​оценку получить проще.

    Правда разницы между 95 и 100 нет никакой — как для мобилы, так и для десктопа. Что касается производительности Web Core Vitals, ваша цель должна состоять в том, чтобы получить зеленый балл. А зеленый счет начинается с 90 — этого будет достаточно.

    Не нервничайте! Google не собирается наказывать вас за то, что у вас 97 баллов вместо 100. Пользовательский опыт останется прежним — и это главное.Но… если вы все еще хотите набрать 100 % в тесте Google Page Speed, ознакомьтесь с нашим примером и узнайте лучшие советы по ускорению!

    Как насчет PageSpeed ​​Insights и других инструментов для тестирования производительности и скорости?

    Давайте рассмотрим два основных инструмента производительности и скорости. У вас будет еще одно доказательство того, что Google PageSpeed ​​Insights — надежный инструмент, а время загрузки — немного другой показатель.

    Сравнение GT Metrix и Google PageSpeed ​​Insights

    Разница между PageSpeed ​​Insight и GTmetrix заключается в расположении, используемом для теста производительности.Они оба теперь используют показатели производительности Lighthouse, поэтому оценка должна быть одинаковой.

    Тем не менее, вы можете увидеть расхождение между двумя оценками.

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

    С одной стороны, Google PageSpeed ​​Insights рассчитает ваш балл, используя ближайший сервер. С другой стороны, если у вас нет учетной записи в GTmetrix, вы будете использовать сервер по умолчанию, расположенный в Ванкувере.

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

    Вы можете увидеть, как ваша оценка производительности может меняться в зависимости от расположения сервера:

    Оценка производительности может варьироваться в зависимости от местоположения сервера.

    Google PageSpeed ​​Insights и Pingdom

    Нельзя сравнивать Google PageSpeed ​​Insights и Pingdom. Pingdom не использует Lighthouse и не предоставляет никакой информации о Core Web Vitals.

    Он просто выставляет оценку на основе времени загрузки.

    Уровень производительности Pingdom

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

    Подведение итогов

    Google PageSpeed ​​Insights быстро развивается. Это приобрело неоспоримую важность благодаря Core Web Vitals, которые очень скоро изменят вашу органическую производительность.

    Инструмент Google надежен, и теперь вы знаете, как критически оценивать показатель производительности и каждую метрику, не забывая при этом о времени загрузки!

    Дополнительная информация о тестировании веб-производительности поможет вам понять, каковы приоритеты и каким должен быть ваш подход.

    Leave a Reply