В статье:

1. Что такое Core Web Vitals от Google
2. Как проверить скорость загрузки страницы в онлайн инструменте
3. Как оптимизировать показатели Core Web Vitals
4. Как уменьшить вес страниц сайта и ускорить загрузку
5. Как оптимизировать и сжать картинки

Разобрали все составляющие Core Web Vitals и способы оптимизировать каждый этап загрузки сайта. Здесь о работе с кодом, макетом, шрифтами и изображениями.

Что такое Core Web Vitals от Google

Поисковик анализирует удобство страницы для пользователей. Для этого у него есть Page Experience — набор требований к сайту для оценки пользовательского опыта и качества страницы. В него входит мобилопригодность, наличие HTTPS, отсутствие навязчивых попапов, быстрая загрузка. 

В 2021 году Google не просто измеряет скорость, а отдельно оценивает этапы загрузки. Для измерения он использует набор показателей — Google Core Vitals. Он стал фактором ранжирования Google с середины июня 2021 года.

В Google Core Vitals входят три основных параметра:

• Скорость появления контента
  LCP, Largest Contentful Paint — время, за которое браузер отрисовывает самый крупный видимый объект в области просмотра.

• Отзывчивость
  FID, First Input Delay — время между первым взаимодействием пользователя со страницей и ответом браузера.

• Визуальная стабильность
  CLS, Cumulative Layout Shift — оценка сдвигов макета во время загрузки страницы.

Google рекомендует использовать пороговые значения этих трех параметров для оценки удобства пользователей. Если страницы получают оценки выше пороговых значений LCP, FID и CLS, то они проходят оценку Core Web Vitals.

Как проверить скорость и этапы загрузки страницы

Есть онлайн-инструменты для проверки. Прогоните сайт через pr-cy.ru/speed_test от PR-CY: он бесплатно проанализирует загрузку сайта поэтапно, в соответствии с параметрами Google Core Vitals. Работает на API Google.

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

Фрагмент проверки

Как оптимизировать показатели Core Web Vitals

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

LCP: как ускорить отрисовку контента

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

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

Этапы отрисовки

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

На LCP влияют четыре фактора, их можно оптимизировать:

• ускорить время ответа сервера;

• решить блокировку рендеринга JavaScript и CSS;

• ускорить загрузку ресурсов;

• оптимизировать рендеринг на стороне клиента.

Как поработать над каждым из пунктов, подробно разобрали в статье про LCP.

FID: как ускорить время реакции страницы

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

Чем меньше времени тратится, тем лучше. Оптимальный показатель FID — не дольше 100 миллисекунд.

Для ускорения реакций страницы есть несколько решений:

• сократить время выполнения JavaScript;

• разбить длинные задачи на части;

• отложить неиспользуемый JavaScript;

• следить за размером подгружаемых библиотек JavaScript;

• оптимизировать выполнение сторонних скриптов;

• использовать web-workers

Как выполнить каждый из пунктов, написали в подробной статье про FID.

CLS: как убрать сдвиги макета страницы

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

Из-за сместившихся кнопок пользователь промахнулся

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

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

Для вычисления нужны два компонента:

• общая область на экране, которую занимает элемент до и после сдвига;

• расстояние, на которое он сдвинулся.

Область и расстояние сдвига

Оптимальный показатель CLS —не больше 0,1 на 75% сессий.

В статье про CLS подробнее разбираем, как это работает и что делать для оптимизации.

Что еще влияет на загрузку страницы: оптимизируем CSS

Стили страницы влияют на скорость отрисовки самого большого видимого элемента и визуальные сдвиги макета.

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

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

Сравнение загрузок страницы

Кроме критических и некритических CSS можно поработать со стилями изображений, рекламой, скриптами, фреймами и шрифтами.

Все эти возможности разобрали в отдельном материале.

Как уменьшить вес страниц сайта и ускорить загрузку

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

Как оптимизировать код верхней части страницы

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

Есть несколько методов:

• удалить лишние символы и скрипты из верхней части кода;

• настроить асинхронную загрузку с jQuery;

• ускорить получение первых байтов (TTFB);

• объединить и сократить JavaScript и CSS;

• настроить загрузку из кэша на стороне пользователя;

• использовать CDN.

О каждом методе с примерами есть в статье.

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

Картинки, видео и разные интерактивные элементы много весят и тормозят сайт. Можно сжать тяжелые элементы, для это есть алгоритмы, самые популярные сейчас — это gzip и brotli. Brotli сжимает сильнее, чем gzip, у него больше уровней. Но на высоких уровнях его скорость меньше.

Способы ускорить загрузку:

• уменьшить размер HTML;
• использовать сжатие gzip или brotli;
• использовать минификацию, то есть сократить HTML, CSS и JS;
• использовать кэш браузера для ускорения;
• сжать фотографии, иллюстрации и другую графику: подобрать разрешение, уменьшить количество цветов, прописать параметры в CSS и сжать сами файлы.

К примеру, при уменьшении количества цветов качество этой картинки почти не страдает, зато сильно уменьшается вес. Слева направо: 32 бита (16M цветов), 7 бит (128 цветов), 5 бит (32 цвета).

Три варианта сжатия

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

Все способы разбираем в подробной статье.

Что используют самые быстрые страницы интернета: исследование 5,2 млн страниц

Команда блога Backlinko во главе с Брайаном Дином провели исследование страниц из выдачи Google и проверили, какие способы ускорения используют самые быстрые страницы. В выборке было 5,2 млн страниц из десктопной и мобильной выдачи, так что результат стоит посмотреть.

Что изучали:

• Общая скорость загрузки
• Как CDN влияет на скорость загрузки
• Какие фреймворки самые быстрые
• Как сжатие файлов влияет на скорость
• Какое сжатие изображений эффективнее ускоряет загрузку
• Сайты на каких CMS грузятся быстрее

Несколько интересных тезисов:

1. Средняя скорость загрузки первого байта (TTFB) — 1,286 секунды на десктопе и 2,594 секунды на смартфоне. Среднее время полной загрузки страницы — 10,3 секунды на десктопе и 27,3 секунды на мобильном.

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

3. Для загрузки на десктопе на скорость сильнее влияет использование CDN, на мобильных — количество запросов HTML.

4. Если сравнивать разные способы оптимизировать картинки, использование адаптивных изображенийвыходитна первое место.

Больше интересного в переводе выводов исследования.

Как оптимизировать и сжать картинки

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

Как сжимать картинки и заполнять SEO-атрибуты

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

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

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

Качество картинок важно, оно должно быть не хуже, чем у конкурентов. Минимум 1080 px по высоте для полного изображения и минимум 640 px в ширину для превью.

Не стоит использовать тег picture для настройки разных форматов картинок для разных устройств. Это увеличит количество узлов в DOM-дереве.

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

Большая часть советов основана на вебинаре специалиста технического SEO и реверс инжиниринга Деми Мурыча (Demi Murych). Речь не только о сжатии и уменьшении веса, но и о требованиях по размерам, качеству, уникальности и актуальные советы по заполнению метатегов.

Как настроить отложенную загрузку картинок — lazy loading изображений

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

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

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

Картинки загружаются по мере просмотра:

Отображение картинок с отложенной загрузкой

Выбор варианта зависит от поведения пользователей на сайте.

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

Нужно ли использовать формат изображений WebP

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

Сравнение свойств популярных форматов изображений

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

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

Эти материалы позволят разобраться с оптимизацией страниц, чтобы ускорить загрузку и привести показатели Core Web Vitals в норму. Как вы ускоряете сайт, какие способы используете? Поделитесь в комментариях!

Источник

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

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

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

В статье

1. Вести ежедневник сложнее, чем кажется

2. Что такое система Bullet journal

   1. Какой блокнот выбрать

   2. Структура ежедневника

   3. Условные обозначения для списка дел

3. Как вести Bullet journal ежедневник

   1. Содержание

   2. План на год

   3. План на месяц

   4. Ежедневный план

   5. Коллекции

   6. Оформление страниц

4. Вести Bullet journal ежедневник или нет: плюсы и минусы

Вести ежедневник сложнее, чем кажется

Идея вести ежедневник со списком задач многими воспринимается в штыки: не хочется тратить на это время. Так было и у нашего автора из блога PR-CY, но потом позиция «я и так всё помню» дала сбой. Какие-то дела приходилось откладывать, а потом они забывались. Вечером вместо ощущения продуктивного дня оставалась тревога — всё ли сделано? Что нужно сделать завтра?

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

Нападение на список дел

Обычно в таких случаях советуют вести ежедневник, причем именно от руки, потому что это полезно для мозга. О пользе рукописных заметок говорит медик Ульям Клемм в своей статье «Почему письмо от руки может сделать вас умнее» («Why Writing by Hand Could Make You Smarter»), где он собрал результаты исследований по теме. При письме от руки активируются несколько областей мозга, которые не задействованы во время печати на клавиатуре, мозг развивает ощущение управления движением и мышление. Также исследования показывают, что упражнения в скорописи развивают визуальное распознавание и память.

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

Что такое система Bullet journal

Систему Bullet Journal или BuJo создал Райдер Кэрролл, дизайнер цифровых продуктов из Нью-Йорка. Проблемы с обучением и концентрацией сподвигли Райдера придумать способ, который помог бы ему сосредоточиться на задачах.

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

Bullet journal — система организации записей с помощью пунктов и блоков, от английского «bullet» — пуля, пункт. Оформление Bullet journal поможет создать удобную карту целей, оформить список идей и мыслей, вести ежедневник с задачами, составлять подборки.

Какой блокнот выбрать для Bullet journal

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

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

Сначала разберем, из чего состоит блокнот в системе BuJo, а потом объясним процесс его заполнения на разворотах Bullet journal.

Структура ежедневника

BuJo состоит из связанных модулей:

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

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

Условные обозначения для списка дел

Создатель BuJo придумал значки, которые визуально разделяют пункты:

• задачи — точка;
• события — кружок;
• заметки — тире.

Оформление заметок

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

• задачу поставили — точка;
• задачу выполнили — зачеркнутая точка;
• перенесли в список дел на ближайший день— знак >, похож на стрелку вправо;
• отправили в долгосрочные планы в список дел на месяц — знак <, стрелка влево;
• добавили приоритетность важной задаче — ! или *.

Оформление статуса задач

Если эти обозначения кажутся вам непривычными или непонятными, придумайте свои. К примеру, как это сделал пользователь @_c.ti_:

Посмотреть эту публикацию в Instagram

Публикация от ⠀⠀⠀⠀⠀⠀⠀Cristina Golovina (@_c.ti_) 29 Мар 2018 в 2:56 PDT

Как вести Bullet journal ежедневник

Посмотрите обучающее видео от автора методики (на английском) или ознакомьтесь с нашими рекомендациями:

Приступаем к оформлению Bullet journal. Рассмотрим каждый из модулей.

Содержание

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

Как выглядит содержание

План на год

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

Разметка планов на год

План на месяц

Следующий разворот — план дел на месяц. Укажите страницы и внесите их в содержание.

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

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

Разворот месяца

Ежедневный план

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

Визуально разделить события, задачи и заметки помогают условные обозначения — точка, кружок, тире. Задача может состоять из нескольких подпунктов, для них увеличьте отступ от края. К важным задачам добавьте свое обозначение — «!» или «*».

Выполненную задачу отмечаем крестиком. Если задача стала неактуальной, зачеркиваем. Если сегодня не успели что-то выполнить, перенесите задачу на другой день и отметьте знаком > или отправьте ее в план на другой месяц со знаком <.

В идеале не должно остаться ни одной задачи без отметки о ее статусе.

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

Коллекции

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

Пример страницы со списком

Оформление страниц

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

Посмотреть эту публикацию в Instagram

Публикация от Лиза, твой любимый блогер (@lisa.summerland) 23 Ноя 2019 в 2:27 PST

Система Bullet journal — вести ежедневник или нет?

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

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

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

Bullet journal — один из способов организовать учет задач в ежедневнике. Вы пробовали этот метод? Расскажите, как отслеживаете планы вы?

Источник

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

«Добавьте подсчет калорий на свои карточки с рецептами или вы рискуете выпасть из результатов поиска!»

Me: *Trying to create a food blog that doesn’t participate in diet culture.*

Google: Enable calorie counts on your recipe cards or risk not appearing in search results! pic.twitter.com/XQVKo4ofXC

— Rebecca Eisenberg (@ryeisenberg) January 15, 2020

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

Твит веб-мастера получил небывалый резонанс в кругу SEO-специалистов. Опасения докатились и до Google, как итог Дэнни Салливан выступил с опровержением:

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

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

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

Источник