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


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

Автоматизированный юзабилити-аудит: миф или легенда?

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

Мы заинтересовались поиском сервисов для автоматической оценки юзабилити после того, как нам на глаза попалась статья на Cossa.ru про инструмент для аудита веб-страниц Lighthouse (от Google). В статье сказано, что это проект «созданный для анализа производительности, дизайна и юзабилити сайтов».

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

Lighthouse: обзор возможностей на примере анализа сайта USABILITYLAB

На странице Lighthouse написано, что сервис способен оценивать быстродействие, доступность (accessibility), прогрессивные веб-приложения и т.п. Оценки дизайна и юзабилити в явном виде в числе функций Lighthouse нет. Кроме того, инструмент работает с отдельными веб-страницами, а не с сайтом целиком.

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

Первым делом мы решили посмотреть, что скажет Lighthouse про наш дом: www.usabilitylab.ru. Для анализа было выбрано несколько различных по структуре страниц.

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

1. Производительность (performance). Данная метрика скорее техническая и обычно не входит в стандартные отчёты, формируемые при юзабилити-аудитах. Однако многие юзабилисты считают, что скорость отклика системы важна для удобства пользователя. Например, Якоб Нильсон в своё время публиковал статью про это.

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

Рекомендации по повышению быстродействия страницы https://usabilitylab.ru/services/

2. Прогрессивные веб-приложения (progressive web app). Наличие современных технологий сделает удобнее работу пользователя в таких проектах, как gmail, dropbox, oprosso, basecamp и т.п. Здесь собраны оценки, касающиеся соответствия страницы требованиям к современным технологиям веб-приложений: возможность отправлять уведомления, работать в оффлайн, добавлять ярлык веб-приложения на рабочий стол, а также ряд технических рекомендаций по адаптации к мобильным устройствам.

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

3. Доступность (Accessibility). Сейчас этот параметр становится не менее значимым, чем юзабилити. Lighthouse анализирует ряд метрик, связанных с контрастностью цветов и адаптацией сайта под специализированные экранные дикторы. Это важно для удобства людей с ограниченными возможностями здоровья.

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

    Анализ цветового контраста проведён некорректно. Lighthouse нашел проблемы там, где они явно отсутствовали (и по нашим меркам, и при анализе другими инструментами). Кроме того, указание на проблемы с контрастностью в отчёте не наглядное: вместо скриншотов и цифровых показателей приведён лишь кусок HTML-кода — из-за чего не сразу получилось понять, о каких элементах вообще идёт речь.

Выдержка из отчёта по доступности

Lighthouse: оценка других сайтов

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

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

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

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

А теперь сравним результаты с известным сайтом из области e-commerce: интернет-магазин Ламода.

Отчёт по главной странице сайта ЛаМода: https://www.lamoda.ru

Вот что получилось:

Параметр/страница https://usabilitylab.ru/usability/ https://www.lamoda.ru/
Производительность 87 74
Хотя скорость загрузки обоих сайтов примерно одинакова, нашему сайту удалось набрать больше баллов за более быструю прорисовку контента, т.к. структурно сайт более прост и не нагружен скриптами с долгой отрисовкой.
Прогрессивность 55 36
Результаты невелики у обоих сайтов, но в данном случае результат Lamoda низок за то, что он недостаточно быстро загружается при мобильном интернете и имеет мобильную версию на отдельном домене — Lighthouse при этом считает, что она отсутствует, анализируя основной домен.
SEO 89 80
В плане поисковой оптимизации оба сайта схожи, но Lighthouse срезал Ламоде несколько баллов за не найденную на нём мобильную версию, которая нынче является важной для хороших позиций в поиске.

Опроссо — это веб-сервис для проведения опросов, тестов и сбора данных, и его можно рассматривать как веб-приложение. Мы решили взглянуть, как Lighthouse оценит его по параметру Progressive Web App.

Отрезок отчета по www.oprosso.com в авторизованной зоне

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

Lighthouse: краткие итоги

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

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

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

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

Nibbler

Nibbler — cервис автоматизированной оценки сайтов по четырем параметрам: доступность (Accessibility), опыт (Experience), маркетинг (Marketing) и технологии (Technology). Нас интересовал в первую очередь раздел «Experience», где, судя по описанию, должно быть показано, насколько сайт отвечает запросам пользователей и «Marketing», оценивающий то, насколько сайт популярен и хорошо продвигается. Итак, скормив Нибблеру ссылку на наш родной https://usabilitylab.ru мы получили отчёт.

Скриншоты разделов «Юзабилити» и «Маркетинг» из полного отчета сервиса Nibbler

Результаты опять нас не порадовали. Из относительно интересного здесь есть лишь метрика «mobile», которая оценивает наличие на сайте версии для мобильных устройств, и «Facebook Page», анализирующая связь сайта со страницей в Facebook. Однако в целом все оценки не имеют отношения ни к юзабилити, ни к UX. Кроме того, некоторые из этих параметров, такие как наличие версии для печати, на наш взгляд уже не актуальны.

Woorank

Woorank — еще один сервис, в описании которого указано, что он проводит полноценный маркетинговый и юзабилити-аудит. Чтобы получить отчет, надо зарегистрироваться на сайте и подписаться на бесплатный двухнедельный пробный период, причем сайт требует ввести для этого реквизиты банковской карты. На выходе он выдает длинный-длинный отчёт, где есть специальный раздел под названием «Юзабилити».

Отчёт по «юзабилити» в сервисе Woorank

Видно, что как и в случае с Nibbler, отчёт включает в себя малоинтересные технические параметры, из нового есть разве что «Custom 404 Page», но её наличие быстрее и проще проверить вручную.

SEOWins

Последний сервис, о котором мы поговорим — SEOWins. Он бесплатно анализирует сайт и строит несколько отчётов, один из которых как раз посвящен юзабилити. Давайте посмотрим, что в него входит.

Видно, что этот отчёт не сильно отличается от тех, что мы уже рассматривали раньше. В нем анализируются технические параметры, содержание которых, на наш взгляд, сомнительно и не связано с юзабилити. Например, определение установленного в мета-тегах языка и кодировки текстов сайта на сегодняшний день не так важно, т.к. современные браузеры безошибочно автоматически определяют кодировку, а большинство сайтов представлено в юникоде (UTF-8). А параметр «Dublin Core» в самом конце списка показывает, используется ли на сайте международный стандарт описания метаинформации для различных информационных ресурсов. Однако на сегодняшний день нет однозначной информации об актуальности стандарта для веб-сайтов. Таким образом, связи критериев отчёта с UX и юзабилити тут нет.

Итоги

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

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

  1. соответствие структуры страниц задачам пользователей;
  2. логичность структуры;
  3. понятность текстов и названий разделов;
  4. достаточность текстов и иллюстраций.

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

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

Подписывайтесь на наш Телеграм, чтобы не пропустить выход новых полезных статей!

Плагин Lighthouse от Google — провести основной аудит SEO видео

Здравствуйте дорогие читатели блога Интернет Бизнес

Маяк является бесплатным расширением браузера Chrome, позволяя базовым аудитам оценивать качество веб-сайта — его производительность, адаптацию к требованиям поисковых систем и потребностям пользователей. Хотя информация, представленная плагином google lighthouse, не продвинута, стоит использовать их для устранения ошибок. И Google расширяет функциональность этого инструмента — недавно был добавлен параметр SEO Audit для проверки оптимизации сайта.

Аудиты, доступные в расширении Google Lighthouse

Мы проверим веб-сайт в следующих категориях, используя плагин google lighthouse:

  • Производительность — служба проверяется на производительность, оптимизированный код страницы, минимальное время загрузки для отдельных скриптов, CSS, JavaScript и т. Д.
  • Прогрессивное веб-приложение — проверка касается соответствия сайта требованиям технологии прогрессивных веб-приложений . Прогрессивные сетевые приложения — это инновационное решение, благодаря которому веб-сайт должен выглядеть и вести себя как интернет-приложение,
  • доступность — аудит в области доступности / удобства использования веб-сайта, включая такие элементы, как: раскраска страниц, названия отдельных разделов, структура сайта, распространение контента,
  • Лучшие практики — передовая практика, связанная с проектированием и увеличением видимости веб-сайтов, например, с использованием протокола HTTPS,
  • SEO — основные рекомендации по оптимизации сайта для поиска Google.

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

Что мы узнаем благодаря опции «Аудит SEO» в Маяк?

SEO Audit проанализирует, соответствует ли наш сайт 10 вопросам, связанным с базовой оптимизацией:

  • Он имеет тег , ответственный за масштабирование сайта и его адаптацию к мобильным устройствам,
  • Имеет название и описание,
  • Возвращает правильный код состояния HTTP,
  • Ссылки содержат описательные привязки (так называемый описательный текст), которые позволяют поисковым системам ознакомиться с темой страницы, на которую ссылаются ссылки гиперссылки,
  • Он не блокируется перед индексацией,
  • Правильно реализованы hreflang и rel = канонические теги
  • Он не содержит плагинов, которые неправильно интерпретируются большинством настольных и мобильных поисковых систем,
  • Использует четкие размеры шрифта.

Как мы видим, SEO Audit анализирует очень основную оптимизацию сайта. Однако, используя этот модуль, вы можете проверить, что важно для Google, а также узнать дополнительные советы и подсказки, которые помогут нам адаптировать веб-сайт к требованиям поисковых систем . В каждой точке есть кнопка « Узнать больше» , чтобы ссылаться на материалы и руководства, подготовленные Google.

Как установить и запустить плагин google lighthouse?

Чтобы провести аудит сайта с помощью Google, нам необходимо иметь браузер Chrome. то:

  1. Перейдите в магазин Google, выберите плагин google lighthouse и установите его.
  2. Значок маяка появится в правом верхнем углу браузера.
  1. Перейдите на выбранную страницу, нажмите на расширение и кнопку Мы выбираем типы проверок, а затем запускаем проверку, нажимая « Создать отчет».
  1. Через некоторое время мы получим аудит веб-сайта вместе с инструкциями по дальнейшему его оптимизации.
Топ-пост этого месяца:  Как вставить код после первого абзаца

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

LightHouse — Маяк, инструмент Google нового поколения

13 ноября 2020 года компания Google выпустила инструмент Lighthouse для комплексной проверки сайта, сменив привычный нам PageSpeed Insights.

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

Принцип проверки

Есть 3 способа, как проверить сайт:

  1. Зайти на PageSpeed Insights и осуществить проверку ресурса (отсутствует проверка PWA — «Progressive Web App»);
  2. Зайти на web.dev и протестировать свой сайт (отсутствует проверка PWA);
  3. Зайти в инструменты разработчика браузера Google Chrome или Яндекс.Браузера, где найти вкладку «Audits» и осуществить проверку, включая раздел PWA.

Что ищет Маяк?

Инструмент содержит 111 аудитов, распределенных по 5 разделам: Performance, PWA, Best Practices, SEO, Accessibility.

Чек-лист от LightHouse

Производительность (Performance)

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

Reduce server response times (TTFB);

Properly size images;

Serve static assets with an efficient cache policy;

Minimize main-thread work;

Reduce JavaScript execution time;

Minimize Critical Requests Depth;

Eliminate render-blocking resources;

Defer offscreen images;

Defer unused CSS;

Efficiently encode images;

Serve images in next-gen formats;

Enable text compression;

Preconnect to required origins;

Avoid multiple page redirects;

Preload key requests;

Use video formats for animated content;

Avoids enormous network payloads;

Avoids an excessive DOM size;

User Timing marks and measures;

All text remains visible during webfont loads.

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

Включает в себя 15 проверок:

Does not respond with a 200 when offline;

User will not be prompted to Install the Web App;

Does not register a service worker;

Is not configured for a custom splash screen;

Site works cross-browser;

Page transitions don’t feel like they block on the network;

Each page has a URL;

Page load is fast enough on 3G;

Redirects HTTP traffic to HTTPS;

Has a meta name=»viewport» tag with width or initial-scale;

Contains some content when JavaScript is not available;

Address bar matches brand colors;

Content is sized correctly for the viewport;

The short_name won’t be truncated on the homescreen.

Методы наилучшей практики (Best Practices)

Ищет все, от использования HTTPS до исправления пропорций изображения.

Включает в себя 15 проверок:

Does not use HTTP/2 for all of its resources;

Links to cross-origin destinations are unsafe;

Includes front-end JavaScript libraries with known security vulnerabilities;

Browser errors were logged to the console;

Avoids Application Cache;

Uses passive listeners to improve scrolling performance;

Avoids requesting the geolocation permission on page load;

Page has the HTML doctype;

Detected JavaScript libraries;

Avoids requesting the notification permission on page load;

Avoids deprecated APIs;

Allows users to paste into password fields;

Displays images with correct aspect ratio.

Оптимизация поисковых систем (SEO)

Проверяет наличие базовых рекомендаций, таких как canonical, title, различные мета-теги.

Включает в себя 13 проверок:

Page is mobile friendly;

Structured data is valid;

Has a meta name=»viewport» tag with width or initial-scale;

Document uses legible font sizes;

Document has a title element;

Document has a meta description;

Links have descriptive text;

Document has a valid hreflang;

Document has a val >

Document avoids plugins;

Page has successful HTTP status code;

Page isn’t blocked from indexing;


robots.txt is valid.

Доступность (Accessibility)

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

Включает в себя 46 проверок:

[id] attributes on the page are not unique;

frame or iframe elements do not have a title;

The page has a logical tab order;

Interactive controls are keyboard focusable;

Interactive elements indicate their purpose and state;

The user’s focus is directed to new content added to the page;

User focus is not accidentally trapped in a region;

Custom controls have associated labels;

Custom controls have ARIA roles;

Visual order on the page follows DOM order;

Offscreen content is hidden from assistive technology;

Headings don’t skip levels;

HTML5 landmark elements are used to improve navigation;

The page contains a heading, skip link, or landmark region;

Document has a title element;

Background and foreground colors have a sufficient contrast ratio;

html element has a [lang] attribute;

html element has a valid value for its [lang] attribute;

Image elements have [alt] attributes;

Links have a discernible name;

Lists contain only li elements and script supporting elements ( script and template );

List items ( li ) are contained within ul or ol parent elements;

[user-scalable=»no»] is not used in the meta name=»viewport» element and the [maximum-scale] attribute is not less than 5;

[accesskey] values are unique;

audio elements contain a track element with [kind=»captions»];

input type=»image» elements have [alt] text;

No element has a [tabindex] value greater than 0;

Cells in a table element that use the [headers] attribute only refer to other cells of that same table;

th elements and elements with [role=»columnheader»/»rowheader»] have data cells they describe;

[aria-*] attributes match their roles;

[role]s have all required [aria-*] attributes;

Elements with [role] that require specific children [role]s, are present;

[role]s are contained by their required parent element;

[role] values are valid;

[aria-*] attributes have valid values;

[aria-*] attributes are valid and not misspelled;

Buttons have an accessible name;

dl ‘s contain only properly-ordered dt and dd groups, script or template elements;

Definition list items are wrapped in dl elements;

Form elements have associated labels;

Presentational table elements avoid using th , caption or the [summary] attribute;

object elements have [alt] text;

The document does not use meta http-equiv=»refresh» ;

[lang] attributes have a valid value.

Выводы

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

Вы можете обратиться в нашу веб-студию, мы имеет большой опыт в технической оптимизации сайтов, работаем с различными CMS: Bitrix, ModX, WordPress, Joomla.

Стоимость работ по оптимизации сайта по PageSpeed Insights уточняйте у наших менеджеров.

Измерение веб-сайтов с помощью средств оптимизации Mobile-First

Дата публикации: 2020-06-07

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

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

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

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

Скорость страницы, коэффициент отказов и конверсия

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

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

SEO и социальные медиа

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

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

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

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

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

Инструменты профилирования и бенчмаркинга

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

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

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

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

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

Lighthouse

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

Lighthouse доступен на вкладке «Аудит» в инструментах разработчика Chrome. Чтобы начать работу, откройте страницу, которую вы хотите оптимизировать в Chrome Dev Tools, и выполните аудит. Обычно я выполняю все аудиты, но для наших целей вам нужно только проверить флажок «Производительность»:

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

Отчеты Lighthouse

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

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

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

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

Предостережения о Lighthouse

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

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

WebPagetest

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

Чтобы начать работу, перейдите на WebPageTest.org, введите URL-адрес страницы, которую вы хотите протестировать, а затем выберите мобильное устройство, которое вы хотите использовать для тестирования. Кроме того, откройте дополнительные настройки и измените скорость соединения. Мне нравится тестировать Fast 3G, потому что даже когда пользователи подключены к LTE, скорость соединения редко LTE:

После отправки теста (и ожидания любой очереди) вы получите отчет о скорости страницы:

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

Бенчмаркинг

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

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

Топ-пост этого месяца:  Творческая студия YouTube что это, как зайти и как работать

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

Уменьшение объема

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

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

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

Вкладка «Покрытие»

К счастью, у Chrome Developer Tools есть инструмент, который помогает оценить раздувание в файлах: вкладка «Покрытие». На вкладке «покрытие» анализируется охват кода при навигации по сайту. Он предоставляет интерфейс, который показывает, сколько кода в данном CSS или JS-файле фактически используется.

Чтобы открыть вкладку «Покрытие», откройте «Инструменты разработчика Chrome» и нажмите три точки в правом верхнем углу. Перейдите в раздел «Дополнительные инструменты» → «покрытие».

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

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

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

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

Следующие шаги

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

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

Автор: Jon Raasch

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

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Автоматический SEO-аудит сайта с помощью расширения Lighthouse для браузера Chrome

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

Расширение Lighthouse – это автоматизированное программное обеспечение с открытым исходным кодом. Будет полезно для анализа веб-страниц на предмет эффективности SEO-процессов, позволит проверить доступность веб-ресурсов в режиме реального времени, проанализировать совместимость с другими средствами для оценки сайтов. Встроенная технология внутреннего SEO-аудита Lighthouse в интернет-браузере Chrome поможет избежать подводных камней в процессе «белой» оптимизации, найти потенциальные резервы для улучшения работы интернет-проекта.

Особенности Lighthouse Chrome

  • Расширенные категории SEO-аудита – практическая помощь разработчикам и веб-мастерам для базовой проверки работоспособности SEO-параметров на любой веб-странице.
  • Локальная работа – функционал Lighthouse функционирует в виде локального расширения в браузере Chrome. Запускайте контрольную проверку на страницах в виртуальной и реальной среде. Проверяйте тестируемые, общедоступные и страницы, где производится вход с авторизацией пользователя.
  • Практические рекомендации – представленный перечень аудируемых проверок разработан для проверочного анализа базовой SEO-оптимизации. Разработчики сайтов и практикующие веб-мастера с любым уровнем подготовки получат развернутые рекомендации, чтобы найти возможности для корректной оптимизации.
  • Ограничения аудита – текущий список SEO-аудита не является окончательным списком; он не даёт SEO-гарантий достижения топовых мест в выдаче Google или в иных поисковых системах.

Возможности расширения Lighthouse Chrome

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

Перечень анализируемых параметров

  • Якорный текст (Descriptive Anchor Text).
  • Мета-теги (Title, Description).
  • Возможность для сканирования страницы (Crawled).
  • Код состояния HTTP (Status Code).
  • Валидные коды «Hreflang», «Rel=Canonical».
  • UX-критерии (размеры шрифтов, удобство для чтения, дополнительные плагины и др.).

Как использовать новую опцию

В 2020 году разработано два способа провести сео-аудит сайта:

1. Расширение «Lighthouse» в браузере Google Chrome.

2. Специальные инструменты разработчика Chrome Developer в браузере Chrome Canary.

Google Lighthouse проведет SEO-аудит страниц вашего сайта

В Lighthouse, расширении Google Chrome для вебмастеров, теперь доступна функция SEO-аудита.

С помощью расширения можно проверить состояние:

  • Анкоров.
  • Полей Title и Description.
  • Кода состояния HTTP.
  • Атрибутов hreflang и rel=canonical.

Также расширение проверяет, читабелен ли шрифт на странице и доступна ли она для индексации.

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

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

Краткое руководство по Google Lighthouse Tools

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

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

Lighthouse – ваш личный SEO-инспектор.

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

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

Зачем это Google?

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


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

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

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

Вам не нужно быть гением SEO, чтобы пользоваться инструментами Lighthouse

Самый простой способ использовать инструменты Lighthouse – через Google Chrome DevTools. Если вы еще этого не сделали, установите Chrome, а затем скачайте расширение Lighthouse из интернет-магазина Google. После установки вы увидите светло-голубую кнопку Lighthouse на панели задач Google.

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

Во-первых, откройте на сайт или конкретную страницу, которую вы хотите исследовать. Затем нажмите на кнопку Lighthouse Tools на панели задач Google.

Приложение Lighthouse запустится в правом верхнем углу. Чтобы начать отчет, нажмите кнопку “Создать отчет”. Затем Lighthouse начнет анализ указанного сайта. После завершения откроется новое окно с отчетом.

В отчете будет представлен всесторонний анализ следующих факторов:

  • Производительность. Насколько быстро работает ваш сайт (например, как быстро загружаются страницы и т.д.)?
  • Прогрессивные веб-приложения. Считают ли посетители ваш сайт современным, похожим на приложение?
  • Доступность. Насколько доступны веб-страницы? Какие у них уязвимые стороны?
  • Рекомендации. Соответствует ли ваш сайт рекомендациям Google?
  • SEO. Нужно ли пересмотреть или улучшить SEO, чтобы помочь вашему сайту лучше ранжироваться?

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

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

Почему Lighthouse необходимо регулярно использовать для тестирования сайта

Является ли Lighthouse всеобъемлющим инструментом, который способен проверить каждый аспект вашего сайта? Нет. Но он и не претендует на это. Инструмент даже рекомендует проводить более глубокое тестирование некоторых элементов, таких как доступность сайта.

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

Вот несколько причин, почему стоит использовать Lighthouse в качестве инструмента для регулярного тестирования сайта:

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

Кто сможет научить быть первым в рейтинге Google лучше, чем сам Google?

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

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

Как работает 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% веб-трафика поступает с мобильных устройств. Поэтому постоянно сдедите за скоростью загрузки вашего сайта.

Новая функция в расширении Lighthouse для SEO-проверки страниц

Поисковая компания Google обновила расширение Lighthouse для браузера Chrome – появилась функция проверки качества поисковой оптимизации страниц.

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

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

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

Есть два способа применения инструмента Lighthouse.

С помощью установки расширения Lighthouse в браузере:

  • после установки значок появится на панели возле командной строки
  • в меню Options можно отметить все необходимые пункты проверки
  • открыть страницу, которую вы хотите проверить, нажать на значок сервиса, а затем на кнопку Generate report
  • через некоторое время в отдельном окне откроется страница с результатом SEO- проверки заданной страницы

В браузере для разработчиков Chrome Canary:

В настоящий момент расширение Lighthouse – это пока только базовый анализ качества поисковой оптимизации страниц. В будущем компания Google планирует расширять возможности сервиса.

Новое руководство для асессоров Google — обновления, на которые стоит обратить внимание

С последнего обновления руководства для асессоров прошёл год, а 20 июля была опубликована новая 164 страничная версия правил оценки качества контента . Именно на основании оценок асессоров обучается формула ранжирования. Это значит, что важно знать критерии оценки качества и спамности URL / сайтов / авторов, чтобы занимать высокие позиции в выдаче.

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

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

Первое изменение очевидно уже из оглавления руководства: раздел «Репутация веб-сайта» переименован в «Репутация веб-сайта и автора основного контент» — “Research on the Reputation of the Website or Creator of the Main Content.”

Раздел «Низкое качество» был расширен до «Худшее качество» и включает пункт о репутации автора. То есть личность и авторитет автора теперь играют важную роль при оценке контента.

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

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

Цель веб-страниц

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

Ранее основным критерием оценки страниц с видео была, собственно, возможность это видео посмотреть. В обновлённом руководстве — возможность им поделиться. В качестве примера используется кнопка “share”: «поделиться милым видео с котиком».

Такое же изменения характерно для страниц блогов — делиться и ещё раз делиться.

«Кошелёк или жизнь» — YMYL-страницы

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

Ранее понятие YMYL (Your Life Your Money) включало в себя «счастье», «здоровье» и «финансовую стабильность», теперь к нему добавилась «безопасность». Google не даёт расширенного определения для последнего, но это означает, что число страниц, попадающих в категорию YMYL может значительно расшириться.

Репутация

Исследование автора контента

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

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

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

Рейтинг качества страницы

Google полностью переписал данный раздел, теперь асессоры должны:

Понять истинное назначение страницы. Документы не несущие ценности, без видимой пользы или распространяющие насилие, ненависть, дезинформирующие или обманывающие пользователей получают «Худший» (Lowest) рейтинг.

В противном случае, рейтинг основывается на факторах, описанных в разделах ниже: «Самый высокий», «Высокий», «Средний», «Низкий» и «Худший».

Самые важные факторы

Цель и назначение документа.

Экспертность, авторитетность и надёжность контента (E-A-T).

Основное содержание и количество контента.

Информация о веб-сайте и авторах.

Репутация сайта и автора.

Критерии оценки экспертности, авторитетности и надёжности (E-A-T)

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

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

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

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

В качестве примеров хороших новостных сайтов Google приводит BBC и USA Today. Для новостных сайтов необходимо иметь редакционную политику, и у таких гигантов она конечно же есть:

Характеристики страниц «высокого» ранга

Снова «цель» и «польза» — от предоставления ценной информации и покупок товаров до намерения рассмешить пользователя. Да, в руководстве написано и об этом.

Смешить пользователей должны, конечно, эксперты (E-A-T) с хорошей репутацией. А продавать товары и предлагать услуги интернет-магазины с понятной политикой обслуживания клиентов. Всё очевидно.

Характеристики страниц «самого высокого» ранга

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

В качестве примера страниц высочайшего качества в руководстве используется Твиттер. Неудивительно как-то:

Характеристики страниц «низкого» ранга

Уже догадались? Верно — «цель» и «польза». Раздел тоже претерпел некоторые изменения, хотя они предсказуемы. Например: если страница, возможно, создавалась с намерением принести пользу, но репутация автора подвела, или ему не хватило опыта для раскрытия темы, асессор имеет право снизить оценку. Другими словами все перечисленные выше положительные критерии со знаком «минус» играют против нас.

Что касается комментариев и контента, который могут добавлять пользователи, то они не обесценивают показатели E-A-T, но предполагают более глубокое изучение оцениваемого асессором сайта.

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

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

Покупают готовые работы.

Не проверяют информацию или искажают факты.

Пишут без редактирования.

Не оставляют ссылок на источники.

Заполняют материалы отвлекающими картинками или другим мешающим чтению контентом.

Копируют текст из чужих работ.

Злоупотребляют общеизвестными фактами и используют общие фразы типа «ни для кого не секрет».

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

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

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

Отвлекающие рекламные объявления

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

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

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

Страницы, созданные с целью обмана:

Использующие чужие логотипы, названия и так далее.

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

Любые документы, пытающиеся манипулировать пользователем.

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

Маскирующие рекламу под основной контент.

Запросы товаров — поиск информации и изучение предложений

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

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

Многие товары подразумевают длительное изучение, ознакомление с техническими характеристиками.

Интернет-магазины попадают в категорию YMYL, поэтому к ним применяются самые высокие требования, особенно это касается магазинов, предлагающих дорогие товары.

Выводы

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

Резюмируя, выделим самые важное для наших сайтов:

Цель и польза страницы.

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

Качество и объём информации.

Репутация и сведения о сайте и авторе.

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

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