Как повысить производительность сайта с помощью Google Pagespeed принципы работы сервиса


Содержание материала:

Новый алгоритм PageSpeed: как повысить показатель PageSpeed — наш опыт и советы

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

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

Из статьи вы узнаете:

Как проверить PageSpeed сайта и как алгоритм PageSpeed поменялся в 2020 году

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

Сервис начисляет баллы за скорость сайта в десктопной и мобильной версиях. Максимальное количество — 100.

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

Скорость сайта Facebook в десктопной версии

До изменений в работе алгоритма баллы начислялись за соблюдение правил и выполнение задач:

PageSpeed Insights говорит, что сайт — молодец: не использует редиректы, CSS в контенте без прокрутки, — подчиняется правилам. Поэтому сайт получает 100 баллов

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

Загрузка страницы оценивается по нескольким характеристикам:

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

Эти характеристики сравниваются с показателями лучших сайтов и превращаются в баллы — точной процедуры оценки никто не знает.

До изменений в алгоритме наш PageSpeed в десктопной версии был в районе 90 баллов из 100 — это так называемая зеленая зона. После обновления алгоритма мы попали в красную зону — упали с 90 до опасных 33 баллов в десктопной версии и с 40 до 23 в мобильной.

Поэтому приняли решение срочно оптимизировать страницы, чтобы вернуть былую славу.

Что мы сделали, чтобы повысить показатель PageSpeed

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

Для тестов взяли несколько страниц — в частности, нашу страницу виртуального хостинга.

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

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

С чем мы экспериментировали для ускорения загрузки сайта:

  • вместо мгновенной загрузки чата делали отложенную на 6 секунд загрузку,
  • подключали параметр lazyload, чтобы изображения подгружались отложенно,
  • подключали не общий файл CSS, а только его кусочек для нужной страницы,
  • отключали Google Tag Manager с кучей JavaScript.

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

В результате поняли, что самая действенная комбинация — это подключать кусочек CSS для нужной страницы, делать отложенную на 6 секунд загрузку чата и отключать Google Tag Manager. Таким образом, наша скорость в десктопной версии выросла с 33 до 59 баллов, в мобильной — с 23 до 38.

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

После уменьшения времени до одной секунды ситуация улучшилась. Кроме этого мы оставили общий JavaScript, который подключался после загрузки HTML-файла. В итоге PageSpeed в десктопной версии вырос до 92 баллов, а в мобильной — до 42:

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

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

Мы также заметили, что баллы PageSpeed могут колебаться в пределах даже одного дня. При эксперименте с одним и тем же сайтом в течение 10 минут количество баллов за скорость колебалось — сначала сервис выдавал 34 балла, через 10 минут — 43. Это зависит от работы 3G/4G сетей, используемых компанией-аналитиком Lighthouse для предоставления данных, варьируемого времени ответа сервера и базы данных для загрузки ресурсов страниц — иконок, изображений, шрифтов, CSS.

Советы, как ускорить загрузку сайта и улучшить показатель PageSpeed

  • Проверяйте разные комбинации факторов на одной странице, чтобы понять, что лучше всего оптимизирует сайт — один фактор вряд ли значительно влияет на скорость.
  • PageSpeed Insights дает подсказки, как увеличить скорость загрузки сайта. Он говорит, где что проседает, и что нужно сделать, чтобы оптимизировать это:

Пример советов по оптимизации загрузки сайта Facebook

    • Обращайте внимание также на скорость сайта в мобильной версии — Google Page Insights дает аудит по десктопной и мобильной версиям. Оптимизированные сайты под мобильную версию становятся сегодня все важнее для поисковиков.
    • Первыми проверяйте изображения — часто проблема в том, что они не оптимизированы. Топ-замечаний Google — загружайте картинки в новых форматах, правильно вставляйте код картинок. Google также выпустила экспериментальное приложение Squoosh, которое помогает сжимать изображения.
    • Используйте формат JPEG для изображений — он сжимается без потери качества.
    • Загружайте фоновые картинки через внешний, или сторонний CSS.
    • Минимизируйте пробелы и теги комментариев — каждая буква или пробел занимает один байт HTML-кода.
    • Критично важно оптимизировать или как можно меньше использовать Javascript — в экспериментах компании Milestone после удаления внутреннего Javascript с сайта баллы за Pagespeed выросли с 49 до 87. Также не стоит использовать сторонний Javascript.
    • Удаляйте ненужный CSS. Когда вы используете преднастроенные темы и плагины WordPress, в них обычно содержится больше кода, чем нужно. Когда PageSpeed Insights проанализирует страницу, нажмите на «Сократить HTML» — «Посмотреть содержание» — он подскажет, как ускорить загрузку страниц.
    • Оптимизируйте базы данных — по мере роста проекта базы данных растут и работают медленнее. Поэтому нужно регулярно избавляться от спама, ненужных таблиц. Удалить ненужные данные можно вручную через phpMyAdmin в разделе SQL или с помощью сторонних плагинов.
    • Уменьшайте количество редиректов и удаляйте лишние плагины.
    • Настройте кэширование на стороне браузера. Для этого в файле .htaccess пропишите директивы: Expires — отвечает за актуальность кэша: можно установить срок от недели до года. Last-Modified и ETag — устанавливают в кэше уникальный id для каждого url.
    • Попробуйте использовать инструменты Google для оптимизации загрузки.
    • После внедренных улучшений регулярно мониторьте PageSpeed сайта и проводите работы по его оптимизации. А сервис PageSpeed Insights всегда поможет вам с этим — подскажет, как ускорить работу сайта.

Как повысить производительность сайта с помощью Google Pagespeed: принципы работы сервиса

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

Самый простой инструмент оценки технической оптимизации проекта — Google PageSpeed Insights

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

  1. Оптимизируйте изображения. Эту задачу мы предлагаем решить с помощью разработанного нами модуля оптимизации изображений под Битрикс
  2. Включите сжатие.
  3. Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы. Самый неоднозначный, на наш взгляд, пункт.
  4. Используйте кеш браузера. Решаем настройкйо сервера.
  5. Сократите JavaScript. Битрикс нам в помощь
  6. Сократите время ответа сервера. Как можно ускорить наш хостинг.
  7. Сократите CSS. Битрикс помогает в решении этой задачи.
  8. Сократите HTML Битрикс помогает в решении этой задачи.

Теперь рассмотрим каждый пункт оптимизации подробнее:

Шаг 1. Оптимизация изображений

CMS Bitrix

  1. Заходим на сайт MarketPlace Bitrix;
  2. Нажимаем на кнопку «Установить»

В появившееся диалоговое окно вбиваем адрес сайта

Нажимаем кнопку «Установить»

MarketPlace перебрасывает нас в административную часть сайта.

Нажимаем кнопку «Загрузить»

В появившемся диалоговом окне отмечаем галочку «Я принимаю лицензионное соглашение» и нажимаем на кнопку «Принять»

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

Технологии | Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

Алек­сандр Гусев

Раз­ра­ба­ты­ва­ет сай­ты, Ux/UI-канал

Всего материалов: 1

Как улучшить скорость загрузки сайта: обзор PageSpeed Insights от Google

Один из пока­за­те­лей хоро­шей рабо­ты сай­та – ско­рость. И пер­вич­ной загруз­ки стра­ниц, и рабо­ты в целом. Быст­рее загру­зит­ся глав­ная стра­ни­ца – быст­рее поль­зо­ва­тель уви­дит вашу инфор­ма­цию и с боль­шей веро­ят­но­стью оста­нет­ся на сай­те, если при­шел впер­вые. Веб-раз­ра­бот­чик, it-волон­тер Алек­сандр Гусев (сту­дия «Биз­нес-Ате­лье») рас­ска­зал, как про­ана­ли­зи­ро­вать ско­рость сай­та с помо­щью сер­ви­са PageSpeed Insights.

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

Сер­вис Page Speed Insights от Google пред­на­зна­чен для про­вер­ки ско­ро­сти загруз­ки стра­ниц сай­та. Скрин­шот экра­на уста­нов­ки.

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

  • 0 – 49 (мед­лен­но): крас­ная зона;
  • 50 – 89 (средне): оран­же­вая зона;
  • 90 – 100 (быст­ро): зелё­ная зона.

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

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

Количество и размер картинок на сайте

Если на глав­ной стра­ни­це 100 кар­ти­нок и каж­дая весит по мега­бай­ту (пото­му что на мони­то­ре редак­то­ра сай­та она смот­рит­ся кра­си­во, чет­ко и ярко), то раз­мер всех изоб­ра­же­ний лег­ко уле­та­ет за 100 Мб. И одно дело, когда кар­тин­ка нуж­на на сай­те имен­но в боль­шом раз­ре­ше­нии и имен­но в том виде, в каком она выгру­же­на с фото­ап­па­ра­та.

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

Все рав­но в подав­ля­ю­щем боль­шин­стве фото­гра­фия на сай­те будет или совсем ста­тич­на (она не будет откры­вать­ся по кли­ку мыши), или же будет откры­вать­ся во всплы­ва­ю­щем окне, кото­рое мень­ше раз­ме­ра экра­на. А это в боль­шин­стве сво­ем мони­то­ры с раз­ре­ше­ни­ем до 1920 px, кон­крет­ные циф­ры будут вид­ны в ана­ли­ти­ке сай­та. Поэто­му, если раз­мер новост­ной мини­а­тю­ры на уровне кода огра­ни­чен 640px, то загру­жать на это место кар­тин­ку в full-hd раз­ре­ше­нии про­сто ни к чему. Она все рав­но ужмет­ся до ука­зан­ных ей 640px по ширине.

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

Squoosh – сер­вис Google для сжа­тия фото­гра­фий без поте­ри каче­ства. Скрин­шот экра­на.

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

Отложенная загрузка

Дру­гой момент, кото­рый так­же отно­сит­ся к гра­фи­ке и есть в перечне пунк­тов оцен­ки PageSpeed, это так назы­ва­е­мая lazy load (лени­вая загруз­ка). Хотя мне боль­ше нра­вит­ся вари­ант «отло­жен­ная загруз­ка», так как он точ­нее отра­жа­ет суть. Но даль­ше по тек­сту буду исполь­зо­вать «лени­вую загруз­ку», что­бы не путать.

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

Посе­ти­тель, в свою оче­редь, недо­уме­ва­ет, сколь­ко еще стра­ни­ца будет загру­жать­ся и когда уже это кон­чит­ся? И он либо дожи­да­ет­ся загруз­ки всей этой кра­со­ты, либо ухо­дит с сай­та. Так вот, lazy load под­гру­жа­ет толь­ко те кар­тин­ки, кото­рые нахо­дят­ся в поле види­мо­сти или вот-вот попа­дут в него.

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

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

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

Дру­гой пункт, каса­ю­щий­ся гра­фи­ки, это «исполь­зуй­те совре­мен­ные фор­ма­ты изоб­ра­же­ний». Если вкрат­це, то не исполь­зуй­те bmp, а исполь­зуй­те webp. Это хоть и край­но­сти, но доволь­но близ­кие к истине. У каж­до­го фор­ма­та изоб­ра­же­ния есть свое пред­на­зна­че­ние, и исполь­зо­вать png в тех кар­тин­ках, где нет про­зрач­но­сти, не сто­ит, сго­дит­ся и jpg. Тот же webp, кото­рый реко­мен­ду­ет сер­вис, конеч­но, хорош. Совре­мен­ный, с хоро­шим сжа­ти­ем, но при этом его под­держ­ка бра­у­зе­ра­ми еще не пол­ная.

WebP – фор­мат сжа­тия изоб­ра­же­ний с поте­ря­ми и без потерь каче­ства, пред­ло­жен­ный Google. Скрин­шот экра­на.

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

Кеширование

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

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

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

Правильные приоритеты

Важ­ный момент для пер­фек­ци­о­ни­стов: «хочу, что­бы у мое­го сай­та было 100 бал­лов из 100». Оно, конеч­но, при­ят­но, когда ваше­му сай­ту выда­ли 100 бал­лов и в мобиль­ной вер­сии, и для ком­пью­те­ров, но зача­стую овчин­ка не сто­ит выдел­ки. Какие-то пунк­ты сер­ви­су могут не нра­вить­ся, и все тут. И сайт уже нор­маль­но рабо­та­ет, и гру­зит­ся быст­ро, а PageSpeed’у все мало и мало.

На при­ме­ре мое­го лич­но­го фото­сай­та alexangusev.ru инте­рес­но наблю­дать как раз эту кар­ти­ну. На сего­дня я докру­тил его до 91 бал­ла для мобиль­ной вер­сии и 99 бал­лов – для ком­пью­тер­ной вер­сии. При этом это сайт с фото­гра­фи­я­ми, то есть каче­ство изоб­ра­же­ний для меня очень и очень важ­но. На сего­дня все фото, что есть на сай­те, я про­пу­стил через тот же Squoosh и оста­вил на мини­маль­но удо­вле­тво­ря­ю­щих меня уров­нях. И сде­лав этот в пер­вый раз, был несколь­ко удив­лен, когда PageSpeed вновь выдал мне реко­мен­да­цию «настрой­те под­хо­дя­щий раз­мер изоб­ра­же­ний». Но, пар­дон, у меня нет цели сде­лать все фото пик­сель­ны­ми в уго­ду сер­ви­су, что­бы полу­чить желан­ную сот­ню бал­лов. Поэто­му сей­час этот пункт я уже мыс­лен­но про­пус­каю и из реко­мен­да­ций для себя исклю­чаю.

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

Топ-пост этого месяца:  Заработок на партнерках — 21 партнерская программа приносящая мне доход, что такое реферальные

Резю­ме: каж­дый пункт диа­гно­сти­ки сер­вис сопро­вож­да­ет неболь­шим опи­са­ни­ем по воз­мож­но­стям опти­ми­за­ции и ссыл­ка­ми либо на Кодекс WordPress, либо на ката­лог пла­ги­нов с уже гото­вы­ми их вари­ан­та­ми для исполь­зо­ва­ния. Как раз одним из таких пла­ги­нов явля­ет­ся Autoptimize – он поз­во­ля­ет про­стым про­став­ле­ни­ем гало­чек внут­ри акти­ви­ро­вать ту или иную настрой­ку, напря­мую вли­я­ю­щую на пока­за­те­ли PageSpeed. Это и вклю­че­ние лени­вой загруз­ки для кар­ти­нок, и сжа­тие и кеши­ро­ва­ние скрип­тов, пере­нос скрип­тов в футер и сжа­тие HTML. Широ­кое поле для твор­че­ства, глав­ное, что­бы не во вред сай­ту.

Autoptimize пред­на­зна­чен для опти­ми­за­ции сай­та на WordPress. Скрин­шот экра­на.

Само­му пла­ги­ну вполне сто­ит дове­рять, если:

  • он сов­ме­стим вплоть до вер­сии WordPress 5.2.3 (на сего­дня акту­аль­ней неку­да);
  • у него более мил­ли­о­на актив­ных уста­но­вок (не абы как);
  • послед­нее обнов­ле­ние было 4 дня назад (по состо­я­нию на 16.09.2020);
  • у него 4,7 бал­ла из 5 воз­мож­ных (по оцен­кам поль­зо­ва­те­лей).

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

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

Google Pagespeed Insights — в погоне за скоростью загрузки сайта.

Статья о том, как проверить скорость загрузки сайта в Гугл, с помощью инструмента PageSpeed Insights.

Скорость загрузки сайта Google Page speed insights: проверка и оптимизация

В поисковой системе Google — скорость загрузки важный фактор ранжирования документов в системе сильно коррелирует с позициями сайта (следует также учесть релевантность документа интенту запроса).

Важным инструментом при проведении технической оптимизации сайтов под Google — считать 2 инструмента: «Проверка оптимизации для мобильных» и «PageSpeed Insights».

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

PageSpeed Insights

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

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

После завершения проверки Google дает основные рекомендации в отчетах:

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

Рассмотрим каждый пункт отдельно чуть позже.

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

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

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

Если возникают «Проблемы при загрузке страницы» — можно посмотреть подробнее что не так.

Чаще всего в этом блоке присутствуют ошибки с жалобами на то, что роботу Googlebot заблокирован доступ в файле robots.txt. Если это скрипты или файлы счетчиков, систем статистики — внешние хосты, то ничего предпринимать не надо.
А если это внутренние ресурсы, влияющие на отображение, заблокированы в robots.txt — то рекомендую их открыть для индексации. Их можно увидеть в отчете «Заблокированные ресурсы», чаще всего это скрипты, стили и картинки.

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

PageSpeed Insights — 100% из 100% — миф, за которым не стоит гнаться.

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

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

Скрипт: сохраняем внешние скрипты на свой сервер.

Поделюсь кодом этого PHP-скрипта костыля:

Кладем этот скрипт в корень сайта и настраиваем крон, к примеру, раз в 3 дня. Если будут изменения в скриптах — они учтутся в локальной копии на нашем сайте.

Такой небольшой хак — результат 99%.

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

Переместите все CSS-стили и JavaScript-файлы в самый низ сайта, после контента.

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

Используйте следующие методы оптимизации:

Атрибуты для подключаемых скриптов:

  • onload=»async» — для первоочередных ресурсов, без которых сайт будет некорректно работать, это позволит загружать страницы асинхронно. Рекомендуется для: jquery, lazyload;
  • async — для скриптов, которые могут загружаться асинхронно и не особо влияют на функционал сайта. Рекомендуется для: скриптов социальных сетей, кнопок поделиться, скриптов, не влияющих на отдельные части сайта.
  • defer — применяйте для скриптов, которые должны включиться после рендеринга страниц и сильно зависимы от выше стоящих скриптов jquery, lazyload.

Функции для встроенных скриптов:

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

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

Expires

Более простой вариант кеширования страниц с помощью браузеров.

Cache-Control

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

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

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

Пример. Вначале прописываем DEFLATE:

И активируем сжатие:

Не используйте переадресацию с целевой страницы

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

Используйте адаптивную верстку страниц и избегайте цепочек перенаправлений — это позволит повысить эффективность сайта в эпоху Mobile-First Indexing.

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

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

Пути и варианты решений:

  • Производить автоматический ресайз картинок под отображаемые размеры изображения (обрезка до нужных пропорций);
  • Автоматически сжимать изображения без их потери качества, либо оптимизировать вручную каждую картинку с помощью сервиса tinypng;
  • Указывать ширину и высоту изображений с помощью атрибутов width и height;
  • Обрабатывать тяжёлые фото в Photoshop — снижаем разрешение до 72 пикселей на дюйм;
  • Объединить все небольшие иконки в один файл — для их вывода использовать CSS-спрайты;
  • Использовать отложенную загрузку изображений, к примеру, с помощью плагина LazyLoad. Минус в том, что картинки не индексируются по этим специальным атрибутам, поэтому лучше применять для всех второстепенных графических элементов.

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

Сократите CSS

Лучшим вариантов будет просто скачать оптимизированные файлы, которые предлагает сам Google, либо получить сжатые файлы через GTMetrix. Еще как вариант: использовать приведенный мною выше скрипт — редактировать несжатый файл, а получать на выходе оптимизированный css-файл.

Сократите HTML

К примеру, для ModX Revo и написал плагин «miniHTML»:

Такой метод позволяет убрать дублирующиеся пробелы, лишние переносы строк, табуляции. По факту, это замедляет процесс генерации страницы, если не включено кеширование. Решать вам — тратить ресурсы сервера на сжатие страниц программным способом или пропустить этот пункт. Выгода небольшая — 0-2%.

Сократите JavaScript

Как писалось выше можно получить готовые сжатые скрипты с помощью сервисов, а можно сжимать их php-скриптами.

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

Тут рекомендациями могу служить следующее:

  • переход на более мощный хостинг;
  • переход на последнюю версию PHP (7.*);
  • обновление CMS и её компонентов, плагинов. ;
  • оптимизация PHP-кода.

Выводы

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

Совет. Проводите оптимизацию в первую очередь с самых посещаемых страниц — отчет «Страницы входа» или «Адрес страницы» в Яндекс.Метрике вам в помощь.

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

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

Есть также документация по Google PageSpeed insights (на англ. яз.).

В следующей статье я расскажу особенности оптимизации скорости загрузки сайта с помощью инструмента GTMetrix.

Пишите свои комментарии и замечания! ;))

Обновлено: 19.04.2020 4116 (в день: 9.777)

Как улучшить позиции сайта с помощью Google Pagespeed Insights (инструкция)

Предположим у вас есть хорошо настроенный сервер, но производительность сайта оставляет желать лучшего.
Вы вложились в SEO но до сих пор Google ранжирует ваш сайт в выдаче ниже, чем предполагалось. Что делать?
Google PageSpeed Insights может помочь вам. Как? Читайте в этой статье.

Предположим у вас есть хорошо настроенный сервер, но производительность вашего сайта оставляет желать лучшего. Задержка ответа сайта занимает секунды и сервер не может обработать более 100 одновременных пользователей. Вы вложились в SEO, но до сих пор чувствуете, что поисковик Google ранжирует ваш сайт в выдаче ниже, чем предполагалось и, о боже, даже не в ТОП 10. Что делать? Как Google PageSpeed Insights может помочь вам? Давайте начнём с основных положений.

ПРОИЗВОДИТЕЛЬНОСТЬ — ЭТО ВАЖНЫЙ ФАКТОР РАНЖИРОВАНИЯ.

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

ВЛИЯНИЕ МОБИЛЬНОЙ ВЕРСИИ САЙТА

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

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

ОПТИМИЗАЦИЯ ПОД GOOGLE PAGESPEED INSIGHTS ПОМОГАЕТ УВЕЛИЧИТЬ ПРОИЗВОДИТЕЛЬНОСТЬ

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

Вы можете использовать PageSpeed Insights бесплатно со страницы project или следуйте инструкции по установке расширения Google PageSpeed Insights Plesk в вашей панели Plesk

ПОЯСНЕНИЯ К РЕКОМЕНДАЦИЯМ PAGESPEED INSIGHTS

1. Избегайте переадресаций целевой страницы

Переадресации могут вызвать ощутимые задержки, если запрос переадресуется несколько раз на конечный адрес откуда в итоге отсылаются данные клиенту. Каждая переадресация инициирует свою процедуру HTTP запроса-ответа (с возможным поиском DNS и ТСP согласованием), которая может значительно снизить производительность сайта, особенно для мобильных устройств со слабым интернет соединением.

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

Также убедитесь, что настроен правильный редирект в один шаг с http://example.com на https://www.example.com . Люди привыкли набирать короткий адрес вашего домена в адресной строке браузера. Но ваш сайт должен работать только на https (для большей защиты и лучшего рейтинга) и возможно использовать www как субдомен.

Заметки SEO: 301 редирект с HTTP на HTTPS

HTTPS становится важным фактором в ранжировании Google. Поисковый движок отдает предпочтение сайтам, которые используют HTTPS протокол для обеспечения безопасных подключений между двумя конечными объектами — клиентом и сервером. Проверьте возможность активации 301 редиректа на ваших доменах как только вы установили SSL-сертификаты.

Пользователям Plesk поможет расширение Security Advisor для активации бесплатных SSL-сертификатов. И вы можете активировать 301 редирект через опцию «Настройки хостинга» в панели управления.

Говоря о редиректах, Plesk поддерживает из своей коробочной версии 301 редиректы, дружественные к SEO. Т.е. если вы устанавливаете бесплатный SSL сертификат Lets’Encrypt (о том, как его установить из панели Plesk, читайте в этой статье (прим. редакции Русоникс)), то Плеск поможет вам переключиться на безопасный протокол без потери в поисковом рейтинге.

2. Включите сжатие

Всегда отсылайте пользователям контент сжатым с помощью GZIP или Deflate . Эти способы сжатия проверяют может ли быть сжат запрошенный ресурс такой как HTML картинки или JS/CSS файлы. Сжатие уменьшает количество байтов, передаваемых через сеть, до 90%. Это сокращает общее время загрузки всех ресурсов, что приводит к ускорению времени загрузки и лучшему юзабилити. Для сжатия важным является то, что обе стороны (и клиент и сервер) понимают примененный алгоритм сжатия. В так называемых полях HTTP заголовков происходит обмен поддерживаемыми алгоритмами.

Большинство современных браузеров уже поддерживают сжатие по умолчанию. На серверной стороне вы можете использовать специальные модули такие как mod_deflate (в Apache) или ngx_http_gzip_module (в Nginx)

Plesk поддерживает сжатие из коробочной версии

Не переживайте, сервер Plesk уже имеет предустановленные необходимые модули сжатия. Вам лишь необходимо активировать эту опцию вручную для всех доменов где нужно использовать сжатие. Вы можете добавить необходимый код в .htaccess (apache) или web.config (nginx) в корневой директории вашего сайта или прямо в панели Plesk, что ещё проще.

Перейдите в закладку «Сайты и домены» и выберите «Настройки apache и nginx». Если вы используете веб-сервер apache, то вам нужно добавить следующий код в текстовом поле под опцией «Дополнительные директивы apache».

Выберите текстовое поле следующей опции «Дополнительные директивы для HTTPS» если вы используете HTTPS.

AddOutputFilterByType DEFLATE text/plain text/html text/xml;
AddOutputFilterByType DEFLATE text/css text/javascript;
AddOutputFilterByType DEFLATE application/xml application/xhtml+xml;
AddOutputFilterByType DEFLATE application/rss+xml;
AddOutputFilterByType DEFLATE application/javascript application/x-javascript

Если вы используете nginx, добавьте следующий код в текстовом поле «Дополнительные директивы nginx»

gzip on; gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_disable «msie6»;
gzip_types text/plain text/css text/javascript text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss;

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

3. Настройте кеширование браузером

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

Вы можете использовать два поля в заголовке ответа: cache-control и ETag . С помощью Cache-Control вы можете определить как долго браузер может кешировать индивидуальные ответы. ETag создаёт ревалидацию токенов с помощью которых браузер может легко определять изменения файлов.

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

4. Уменьшите время ответа сервера.

PageSpeed Insights выводит это сообщение, когда сервер не отвечает через определённое время (>200ms) . Время ответа обозначает время, которое нужно браузеру для загрузки HTML кода для вывода. На этот параметр может влиять множество причин.

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

Вопрос в том как найти эти «узкие места»? Вы можете использовать расширение New Relic для решения или с помощью тестирования ресурсом Webpagetest где можно увидеть как браузеры отображают страницы и какие файлы замедляют ваш сайт.

5.Уменьшите HTML, CSS&JS

Сервер может уменьшить объём таких ресурсов, как HTML код или JS и CCS файлы, перед отправкой их в браузер. Это сохранит много байтов данных, что увеличивает скорость загрузки ресурсов. Уменьшение объёма — это процесс оптимизации кода без потери нужной информации, чтобы сайт для посетителя отображался корректно.

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

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

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

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

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

Также есть смысл объединять все файлы в один файл (1 файл для CSS и JS) для уменьшения количества HTTP запросов. В общем, опредённо следует активировать HTTP/2 на вашем сервере. Новая версия протокола имеет очень положительное влияние на производительность сайта.

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

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

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

Content-Delivery-Networks (CDN) такие как CloudFlare, могут оптимизировать картинки для вас автоматически.

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

8.Оптимизация видимого контента

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

Также важно структурировать HTML код, который загружает «тяжёлый» контент первым. Например если рядом с вашей статьей есть боковая панель, то разместите ее после статьи в HTML коде так, чтобы браузер отображал статью перед боковой панелью.

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

Google PageSpeed Insights расширение в Плеск

Если вы ещё не делали этого установите расширение в Плеск «Google PageSpeed Insights Plesk » сегодня и улучшите производительность веб-сайта и позиции в поисковой выдаче.

Перевод: Сергей Гордеев (Русоникс)
Оригинал

Как увеличить скорость загрузки сайта: 8 практических советов

Время чтения | 8 min read

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

Топ-пост этого месяца:  Вывод выбранного изображения на странице

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

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

Давайте рассмотрим их подробнее.

1. Оптимизируйте загрузку скриптов и CSS-стилей

JavaScript/jQuery используются практически на любом современном сайте, так как с их помощью удобно реализовать интерактивные элементы и динамический контент. Но когда браузер загружает страницу для отображения в ответ на запрос пользователя, он должен полностью загрузить все такие скрипты, что может замедлять работу, если их слишком много или они неправильно реализованы (render-blocking Java Script).

Есть несколько вариантов решения:

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

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

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

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

Одним из наиболее известных поставщиков такой услуги является Cloudflare. Тарифы стартуют от 5 долларов, в зависимости от поставщика.

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

3. Включите кэширование сайта

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

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

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

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

Большой объем неоптимизированных изображений как правило является основной причиной медленной загрузки страниц сайта. Одна и та же картинка может весить как 300 килобайт, так и 130, причем визуально пользователь не заметит разницы. А теперь представьте себе, что таких картинок на сайте десятки, сотни и даже тысячи.

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

Также можно обрабатывать изображения при помощи графических редакторов или специальных онлайн-сервисов для оптимизации, таких как Iloveimg.com или TinyPNG.com.

5. Проведите ревизию плагинов и компонентов

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

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

Вариантов решения проблемы несколько:

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

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

6. Оптимизируйте базу данных и код

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

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

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

7. Проанализируйте дизайн и компоновку страниц

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

Несколько примеров из практики:

  • лендинги на 5-6 экранов, перегруженные графикой и прочими элементами;
  • завешанная графическими баннерами страница СМИ;
  • результаты поиска или сортировки фильтрами без ограничения по количеству элементов;
  • посадочные страницы услуг, на которых попытались внедрить все 100500 советов по оптимизации конверсии и т. д.

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

8. Проверьте производительность сервера и движка

Иногда проблема не в самом сайте, а в месте его размещения. Первое, что происходит, когда пользователь вводит url в браузере – отправка запроса на сервер, чтобы получить информацию и данные. Если производительность сервера низкая, независимо от качества оптимизации остальных вещей, ответ всегда будет медленным. Google PageSpeed Insights показывает время ответа сервера во время проверки.

Аналогичная ситуация и с географическим расположением серверного оборудования. Если сервер находится в России, а пользователь запрашивает данные из США, обмен данными потребует времени.

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

Как проверить скорость загрузки сайта через онлайн-сервисы

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

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

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

Выводы

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

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

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

Если есть вопросы – пишите в комментариях!

Как повысить скорость загрузки сайта, руководствуясь советами Google?

Автор: Феликс Таркомнику (Felix Tarcomnicu), интернет-предприниматель и онлайн-маркетолог со стажем. Работает в должности CMO в Monitor Backlinks (Лондон). Автор множества статей о продвижении в социальных медиа, интернет- и email-маркетинге, SEO, продвижении при помощи контекстной рекламы и др.

Сегодня скорость загрузки страниц сайта является критически важным фактором, определяющим его юзабилити. Этот аспект входит в перечень 100 факторов ранжирования, значимых для продвижения сайта в поиске. И такая ситуация сложилась неспроста: в наши дни едва ли можно отыскать настолько терпеливого пользователя, который был бы готов ждать загрузки страницы дольше 5 секунд. Отсюда вывод: если сайт загружается недостаточно быстро – его владелец попросту теряет пользователей и клиентов.

Многочисленные эксперименты и исследования показывают, что более 50% переходов на сайты совершается с мобильных устройств. Это значит, что пользователи ждут от современных ресурсов не просто быстрой, а моментальной загрузки. Причём, на самых различных устройствах. Учитывая этот аспект, автор статьи наглядно продемонстрирует, как ресурсу https://monitorbacklinks.com/ удалось добиться показателя загрузки страниц 100/100 (для десктопов и мобильных устройств) по результатам проверки сайта с помощью инструмента Google PageSpeed Insights.

Предпосылки для эксперимента

Справедливости ради стоит отметить, что сайт исторически загружался довольно быстро. Однако первичное тестирование при помощи инструмента проверки скорости загрузки страниц от Google выявило, что показатель скорости загрузки мобильной версии сайта составляет 59/100. Тогда как скорость загрузки десктоп-версии ресурса оказалась несколько выше – 95/100.

В качестве итоговой цели команда разработчиков monitorbacklinks.com поставила условие: добиться показателя 100/100. Исправления очевидных недочётов на ресурсе позволили несколько повысить скорость загрузки – до 87/100, но к идеалу не привели. Путём методичных технических усовершенствований разработчикам ресурса в конечном итоге удалось получить желаемый результат:

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

Как повысить скорость загрузки страниц: технические приёмы

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

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

Шаг #1. Оптимизируем изображения на сайте

Следуя рекомендациям инструмента PageSpeed Insights, команда разработчиков сайта monitorbacklinks.com оптимизировала все изображения на ресурсе, повысив скорость загрузки страниц за счёт уменьшения размеров файлов. Применение инструментов Compressor.io и TinyPNG позволило уменьшить вес файла на 80% без потери качества изображений.

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

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

Шаг #2. Оптимизируем файлы CSS и JavaScript

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

Чтобы устранить ошибки и несколько облегчить код сайта было решено установить потоковый сборщик проектов на JS Gulpjs. Инструмент в автоматическом режиме создает новый файл CSS и удаляет все недочёты в коде. Новые файлы также автоматически создаются для всех вносимых в код изменений. В случае с сайтом monitorbacklinks.com внедрение Gulpjs позволило сократить объём файла CSS с 300 КБайт до 150 КБайт только за счёт устранения лишних знаков в коде. Проверить правильность кода можно также следуя рекомендациям специального раздела Руководства Google.

Тем, кто использует WordPress с этой же целью можно порекомендовать установить специальный плагин Autoptimize. Оптимизированные файлы можно загрузить и из PageSpeed Tool. Процесс будет выглядеть примерно так:

Шаг #3.Используем кэш браузера

О том, как увеличить скорость загрузки сайта путем кэширования регулярно задумывается большинство специалистов. Чтобы устранить проблему на ресурсе, командой разработчиков monitorbacklinks.com было решено перенести все статические файлы (изображения, CSS, Javascript и др.) в сеть доставки и дистрибуции контента (CDN).

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

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

Принцип работы сети CDN можно описать в виде следующей схемы:

Итак, после переноса всех JavaScript и CSS в CDN на главном сервере ресурса остались лишь HTML-файлы. Перенос в сеть доставки и дистрибуции контента всех объёмных графических файлов позволил заметно сократить время ожидания загрузки содержимого страниц пользователями из удалённых регионов.

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

Часть проблем удалось устранить за счёт переноса кода счётчиков социальных сетей (Twitter, Facebook, Google+) и части статических изображений в CDN. Как выяснилось позднее, наибольшее влияние на сайт оказывал код счётчика Google Analytics, присутствие которого в разы утяжеляло ресурс.

Поскольку удалять код счётчика с сайта команда разработчиков категорически не хотела, было решено создать специальный скрипт, который бы автоматически запускался каждые 9 часов и проверял настройки кода счётчика GA. В качестве условия было задано, что скрип автоматически загружает на сервер код счётчика Google Analytics, только если тот был существенно обновлён. Это позволило разместить JavaScript-код Google Analytics на собственном сервере, минуя этапы загрузки обновлений кода счётчика с серверов Google после фиксации каждого малейшего изменения на сайте. Если никаких изменений на сайте зафиксировано не было, код счётчика Google Analytics загружался из кэша.

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

На скриншоте ниже показано, как данная процедура позволила уменьшить размер файла главной страницы сайта до 15,5 КБайт:

Шаг #4. Удаляем из верхней части страницы код JavaScript и CSS, блокирующий отображение

Данный аспект является одним из наиболее трудных в реализации, поскольку требует значительных технических навыков от команды разработчиков сайта. Рекомендации инструмента от Google во всех подобных случаях сводятся, как правило, к предложению отложить загрузку этих ресурсов, загружать их асинхронно или встроить их самые важные компоненты непосредственно в код HTML. В случае с ресурсом monitorbacklinks.com требовалось перенести все коды на JavaScript и верхней части страницы и из её центральной части в подвал. Процедуру было необходимо проделать для всех страниц ресурса.

Тем, кто использует WordPress можно посоветовать воспользоваться плагином от Autopmize. При этом в настройках необходимо снять отметку с пункта «Force JavaScript in » и отметить пункт «Inline all CSS».

Шаг #5. Настраиваем сжатие

Сжатие ресурсов с помощью функций gzip или deflate позволяет сократить объем данных, передаваемых по сети. Именно такая рекомендация обычно появляется после проверки сайта при помощи PageSpeed Insights.

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

Шаг #6. Улучшаем опыт мобильных пользователей

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

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

В случае с ресурсом monitorbacklinks.com никаких существенных изменений вносить не потребовалось.

Заключение

В статье были перечислены самые основные шаги и пункты, выполнение которых гарантирует сайту значительное улучшение показателей по итогам проверки с помощью инструмента PageSpeed Insights от Google. В случае с рассматриваемым сайтом, удалось получить идеальный результат – 100/100. Однако в данном случае тщательной оптимизации подверглись все внутренние страницы ресурса.

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

  1. Использование сети доставки и дистрибуции контента (CDN).
  2. Уменьшение количества блокирующих скриптов на странице (с этой целью необходимо удалить из верхней части страницы код JavaScript и CSS, блокирующий отображение. Все подобные файлы должны располагаться внизу страницы).
  3. Оптимизация изображений и сжатие графических файлов.

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

Как увеличить скорость загрузки WordPress. Сервис Google PageSpeed Insights

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

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

Оптимизируем WordPress по сервису PageSpeed Insights

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

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

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

Первое с чего начнем, так это с включения gzip сжатия, чтобы уменьшить объем данный в передачи между отправителем и получателям. Такая функция, по идее, активирована по умолчанию на многих хостингах. Если она у вас не активирована, тогда вставляем следующий код в конфигурационный файл .htaccess .

Код для сервера Nginx:

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

Это один из пунктов, где встречается не совсем правильная рекомендация. Речь идет не обо всех файлах, подключаемых в теге head, а только о тех, которые отвечают за корректность отображения сайта. Если мы перенесем, допустим, основной файл стилей в самый низ, то сайт в первые секунды загрузки будет загружаться без стилей. Стало быть, пользователь увидит беспорядочную страницу с разброшенными веб-элементами и абсолютно без стилей (т.е. «голую»).

Поэтому не нужно менять подключение стилей сайта и переносить их в подвал или ставить в последнюю очередь. А вот насчет остальных есть смысл пересмотреть их расположение. У плагина Better WordPress Minify есть встроенный менеджер файлов css и js. С помощью его можно легко менять подключение скриптов, то есть переносить из head в footer.

Подключение скриптов

Что касается подключения своих скриптов к теме, то лучше всего объединять их в один файл, чтобы уменьшит количество запросов. А после подключить не через тег script , как обычно, а через файл functions.php в футер сайта, таким образом:

Подключение скрипта только на определенной странице.

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

Подключение скрипта только внутри статьи.

Все довольно просто: меняем только функцию условия. Для подключения из дочерней темы нужно изменить функцию пути на эту get_stylesheet_directory_uri() .

Подключение стилей

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

Топ-пост этого месяца:  Тонирование фотографий с помощью градиентов и режимов наложения

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

Подключение библиотеки jQuery

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

Отключаем стили плагинов

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

Пример из WP-Pagenavi

Копируем его уникальный идентификатор – это wp-pagenavi, а после в файле functions.php вашей темы вставляем такой код:

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

Переносим все скрипты в footer

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

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

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

Разве что в виде исключений, если того требует желание добиться максимальной оценки. Имеется пару вариантов: отказаться от их использования, переместить скрипты на свой сайт. Для Google аналитика есть специальный плагин Complete Analytics Optimization Suite , который позволит загружать библиотеку локально.

Насчет Яндекса чуть сложнее, так как для него нет подобных плагинов. Можно провести лишь эксперимент: скачать скрипт метрики по адресу https://mc.yandex.ru/metrika/watch.js, сохранить его на сайте, а в подключении изменить путь скрипта. Насколько правильно он будет работать – не знаю. Это просто один из вариантов.

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

Код для сервера Nginx:

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

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

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

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

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

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

Сокращение JavaScript, CSS, HTML

Сокращение файлов позволяет уменьшить вес кода путем удаления всех ненужных деталей, таких как пробелы, переносы, комментарии и прочее. В итоге остается чистый читабельный код со стороны браузера. Это в какой-то мере помогает ускорить передачу и уменьшить время отклика сервера. На WordPress’e есть много плагинов, минимизирующих код. Вот самые популярные:

Они будут на лету сокращать файлы.

А лучше всего взять просто копию любого файла, переименовать его, к примеру, script.min.js , поместить туда сокращенный код и подключить вместо того, что был. Во всяком случае это можно проделать с теми файлами, которые вы практически никогда не редактируете или очень редко. По окончании проверки сервиса PageSpeed Insights дается ссылка на скачивания всех сокращенных файлов.

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

Google Pagespeed Insights — в погоне за скоростью загрузки сайта.

Статья о том, как проверить скорость загрузки сайта в Гугл, с помощью инструмента PageSpeed Insights.

Скорость загрузки сайта Google Page speed insights: проверка и оптимизация

В поисковой системе Google — скорость загрузки важный фактор ранжирования документов в системе сильно коррелирует с позициями сайта (следует также учесть релевантность документа интенту запроса).

Важным инструментом при проведении технической оптимизации сайтов под Google — считать 2 инструмента: «Проверка оптимизации для мобильных» и «PageSpeed Insights».

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

PageSpeed Insights

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

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

После завершения проверки Google дает основные рекомендации в отчетах:

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

Рассмотрим каждый пункт отдельно чуть позже.

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

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

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

Если возникают «Проблемы при загрузке страницы» — можно посмотреть подробнее что не так.

Чаще всего в этом блоке присутствуют ошибки с жалобами на то, что роботу Googlebot заблокирован доступ в файле robots.txt. Если это скрипты или файлы счетчиков, систем статистики — внешние хосты, то ничего предпринимать не надо.
А если это внутренние ресурсы, влияющие на отображение, заблокированы в robots.txt — то рекомендую их открыть для индексации. Их можно увидеть в отчете «Заблокированные ресурсы», чаще всего это скрипты, стили и картинки.

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

PageSpeed Insights — 100% из 100% — миф, за которым не стоит гнаться.

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

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

Скрипт: сохраняем внешние скрипты на свой сервер.

Поделюсь кодом этого PHP-скрипта костыля:

Кладем этот скрипт в корень сайта и настраиваем крон, к примеру, раз в 3 дня. Если будут изменения в скриптах — они учтутся в локальной копии на нашем сайте.

Такой небольшой хак — результат 99%.

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

Переместите все CSS-стили и JavaScript-файлы в самый низ сайта, после контента.

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

Используйте следующие методы оптимизации:

Атрибуты для подключаемых скриптов:

  • onload=»async» — для первоочередных ресурсов, без которых сайт будет некорректно работать, это позволит загружать страницы асинхронно. Рекомендуется для: jquery, lazyload;
  • async — для скриптов, которые могут загружаться асинхронно и не особо влияют на функционал сайта. Рекомендуется для: скриптов социальных сетей, кнопок поделиться, скриптов, не влияющих на отдельные части сайта.
  • defer — применяйте для скриптов, которые должны включиться после рендеринга страниц и сильно зависимы от выше стоящих скриптов jquery, lazyload.

Функции для встроенных скриптов:

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

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

Expires

Более простой вариант кеширования страниц с помощью браузеров.

Cache-Control

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

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

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

Пример. Вначале прописываем DEFLATE:

И активируем сжатие:

Не используйте переадресацию с целевой страницы

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

Используйте адаптивную верстку страниц и избегайте цепочек перенаправлений — это позволит повысить эффективность сайта в эпоху Mobile-First Indexing.

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

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

Пути и варианты решений:

  • Производить автоматический ресайз картинок под отображаемые размеры изображения (обрезка до нужных пропорций);
  • Автоматически сжимать изображения без их потери качества, либо оптимизировать вручную каждую картинку с помощью сервиса tinypng;
  • Указывать ширину и высоту изображений с помощью атрибутов width и height;
  • Обрабатывать тяжёлые фото в Photoshop — снижаем разрешение до 72 пикселей на дюйм;
  • Объединить все небольшие иконки в один файл — для их вывода использовать CSS-спрайты;
  • Использовать отложенную загрузку изображений, к примеру, с помощью плагина LazyLoad. Минус в том, что картинки не индексируются по этим специальным атрибутам, поэтому лучше применять для всех второстепенных графических элементов.

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

Сократите CSS

Лучшим вариантов будет просто скачать оптимизированные файлы, которые предлагает сам Google, либо получить сжатые файлы через GTMetrix. Еще как вариант: использовать приведенный мною выше скрипт — редактировать несжатый файл, а получать на выходе оптимизированный css-файл.

Сократите HTML

К примеру, для ModX Revo и написал плагин «miniHTML»:

Такой метод позволяет убрать дублирующиеся пробелы, лишние переносы строк, табуляции. По факту, это замедляет процесс генерации страницы, если не включено кеширование. Решать вам — тратить ресурсы сервера на сжатие страниц программным способом или пропустить этот пункт. Выгода небольшая — 0-2%.

Сократите JavaScript

Как писалось выше можно получить готовые сжатые скрипты с помощью сервисов, а можно сжимать их php-скриптами.

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

Тут рекомендациями могу служить следующее:

  • переход на более мощный хостинг;
  • переход на последнюю версию PHP (7.*);
  • обновление CMS и её компонентов, плагинов. ;
  • оптимизация PHP-кода.

Выводы

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

Совет. Проводите оптимизацию в первую очередь с самых посещаемых страниц — отчет «Страницы входа» или «Адрес страницы» в Яндекс.Метрике вам в помощь.

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

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

Есть также документация по Google PageSpeed insights (на англ. яз.).

В следующей статье я расскажу особенности оптимизации скорости загрузки сайта с помощью инструмента GTMetrix.

Пишите свои комментарии и замечания! ;))

Обновлено: 19.04.2020 4117 (в день: 9.779)

Как работает Google PageSpeed: улучшите свой рейтинг и рейтинг в поисковых системах

По некоторым статистическим данным в декабре 2020 Google в России обошла Яндекс по объемам поискового трафика и её доля составила 53,5%, в то время, как у Яндекса – 42,7%. Такая ситуация заставляет нас обратить особое внимание на оптимизацию сайтов под требования Google. И значительную помощь в этом нам окажет такой сервис от мирового поискового монстра, как PageSpeed.

В этой статье мы покажем, как PageSpeed вычисляет критическую скорость.

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

В прошлом году Google внесла два существенных изменения в свои алгоритмы индексирования и ранжирования поиска:

  • в марте индексация стала основана на мобильной версии страницы , а не на настольной.
  • в июле алгоритм ранжирования SEO был обновлен, чтобы включить скорость страницы в качестве фактора ранжирования для мобильных страниц и объявлений.

Из этого мы можем сформулировать две истины:

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

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

Чтобы понять, как эти изменения повлияют на нас с точки зрения производительности, нам нужно понять базовую технологию. PageSpeed 5.0 — это полный пересмотр предыдущих выпусков. Теперь он питается от Lighthouse и CrUX (Chrome User Experience Report).

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

Что изменилось в PageSpeed 5.0?

До версии 5.0 PageSpeed проводил серию эвристик для страницы сайта. Если страница имеет большие несжатые изображения, PageSpeed предложит сжатие изображений. Отсутствуют кэш-заголовки? Предложит это сделать.

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

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

Как и PageSpeed, Lighthouse также имеет оценку производительности. В PageSpeed 5.0 оценка производительности берется непосредственно из Lighthouse. Оценка скорости PageSpeed теперь такая же, как и оценка производительности Lighthouse.

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

Что такое Google Lighthouse?

Lighthouse — это проект с открытым исходным кодом, которым управляет специальная команда из Google Chrome. За последние пару лет он стал инструментом бесплатного анализа производительности.

Lighthouse использует протокол удаленной отладки Chrome для чтения информации о запросах сети, измерения производительности JavaScript , соблюдения стандартов доступности и измерения ориентированных на пользователя временных показателей, таких как First Contentful Paint, Time To Interactive или Speed Index.

Как Lighthouse вычисляет балл производительности

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

Для создания общей оценки производительности используются 6 показателей:

  • Время до интерактивного (TTI)
  • Индекс Скорости
  • Первая удовлетворительная краска (FCP)
  • Первый CPU Idle
  • Первая значимая краска (FMP)
  • Предполагаемая Задержка Ввода

Lighthouse применит модель оценки 0-100 к каждой из этих метрик. Этот процесс работает путем получения мобильных 75% и 95% из архива HTTP, а затем примененит log normal функцию.

Следуя алгоритму и справочным данным, используемым для вычисления времени загрузки первого контента, мы можем видеть, что если странице удалось стать “интерактивной” за 2,1 секунды, время до интерактивной метрической оценки будет 92/100.

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

Метрический Утяжеление
Время до интерактивного (TTI) 5
Индекс Скорости 4
Первая Удовлетворительная Краска 3
Первый CPU Idle 2
Первая Осмысленная Краска 1
Предполагаемая Задержка Ввода 0

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

В будущем это также может быть улучшено путем включения наблюдаемых пользователем данных из набора данных отчета Chrome User Experience.

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

Используя приведенный выше пример, если мы изменим (время) интерактивное с 5 секунд до 17 секунд (глобальный средний мобильный TTI), наш счет упадет до 56% (он же 56 из 100).

В то время как, если мы изменим первую удовлетворительную краску на 17 секунд, мы получим 62%.

Время интерактивного (TTI) является наиболее эффективным показателем для вашей оценки производительности.

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

Перемещение иглы на TTI

На высоком уровне есть два существенных фактора, которые оказывают огромное влияние на TTI:

  • Количество JavaScript, загружаемых на страницу
  • Время выполнения задач JavaScript в основном потоке

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

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

Эффективные меры по сокращению количества скриптов с ваших страниц:

  • Просмотрите и удалите полинаполнения, которые больше не требуются для вашей аудитории.
  • Понять важность каждой сторонней библиотеки JavaScript. Используйте webpack-bundle-analyser или source-map-explorer для визуализации размера каждой библиотеки.
  • Современные инструменты JavaScript (например, Webpack) могут разбивать большие приложения JavaScript на ряд небольших пакетов, которые автоматически загружаются при навигации пользователя. Этот подход известен как разделение кода и чрезвычайно эффективен в улучшении TTI.
  • Работники службы будут кэшировать результат байт-кода проанализированного + скомпилированного скрипта . Если вы сможете использовать это, устройства посетителей будут использовать меньше времени для анализа и компиляции, после чего она будет смягчена кешем.

Время контроля до взаимодействия

Чтобы успешно выявить существенные различия в пользовательском опыте, мы предлагаем использовать систему мониторинга производительности (например, Calibre !) что позволяет испытывать минимум 2 прибора; быстрый рабочий стол и мобильный телефон ниже-среднего класса.

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

Углубленное ручное профилирование

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

Отличной заменой для использования реального устройства является использование режима эмуляции аппаратного обеспечения Chrome DevTools.

Как насчет других показателей?

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

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

Отслеживание прогресса и внесение значимых улучшений

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

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

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

Понравилась статья? Поделитесь

Вас может заинтересовать:

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

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

Для чего нужна оптимизация сайта? Какую роль она играет в продвижении?

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

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

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

Добавить комментарий