Вт. Окт 26th, 2021

Что значит для изображений обновление по опыту просмотра страничек от Google

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

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

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

Примечание. Гугл представил свои планы в отношении Page Experience в мае 2020 года и объявил в ноябре 2020 года, что его развертывание начнется в мае 2021 года. Но с тех пор Google отложил свои планы по постепенному развертыванию на середину июня 2021 года. Это было изготовлено для того, чтобы дать администраторам сайтов время сначала справиться с изменяющимися критериями, вызванными пандемией COVID-19.

Предыстория

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

Core web Vitals (CWV) были введены, чтоб помочь веб-разработчикам решать проблемы, связанные с попытками оптимизации рейтинга поисковых систем с внедрением тестируемых показателей — то, что тяжело сделать с такой очень субъективной вещью, как пользовательский опыт.

Для этого Гугл выделил три ключевых показателя (то, что он именует «ориентированными на пользователя показателями производительности»). Вот они:

LCP (Largest Contentful Paint): самый большой элемент при начальной загрузке веб-страницы. Как правило, это огромное изображение или заголовок. Скорость загрузки самого огромного элемента контента играет огромную роль в том, как быстро пользователь воспринимает общую скорость загрузки странички.

FID (First Input Delay): время, которое проходит меж тем, как пользователь впервые взаимодействует со страничкой, и когда основной поток будет свободен для обработки действия браузером. Это может быть нажатие кнопки, ссылки либо взаимодействие с любым другим динамическим элементом. Задержки при содействии со страницей, очевидно, могут расстраивать юзеров, поэтому крайне важно поддерживать низкий уровень FID.

Cumulative Layout Shift (CLS): вычисляет визуальную стабильность странички при ее первой загрузке. Алгоритм учитывает размер частей и расстояние, на которое они передвигаются, в зависимости от области просмотра. Странички, которые загружаются с высокой нестабильностью, имеют возможность вызывать ошибки у пользователей, что также приводит к их разочарованию.

Эти метрики произошли от более простых, которые использовались в течение некоторого времени, таких как SI (Speed Index), FCP (First Contentful Paint), TTI (Time-to-interactive) и т.д.

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

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

Что поменяется? Исследование страницы поиском Google

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

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

Core Web Vitals: внедрение тех же, неизменных, основных Web Vitals. Гугл установил правила и рекомендовал рейтинги, которые вы сможете найти здесь. Вам необходим общий «неплохой» рейтинг CWV, чтобы претендовать на «не плохое» качество страницы.

Удобство использования на мобильных устройствах: URL-адрес не должен содержать ошибок, связанных с удобством использования мобильных устройств, чтоб получить оценку «хорошее» качество страницы.

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

HTTPS: страницы должны обслуживаться через HTTPS, чтоб соответствовать требованиям.

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

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

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

Еще одна отменная новость для пользователей, не использующих AMP, заключается в том, что сейчас все страницы будут иметь право на получение основных новостей как в браузере, так и в приложении Гугл News. Хотя Google заявляет, что странички могут претендовать на звание Top Stories «независимо от их оценки Core Web Vitals либо статуса работы со страницей», трудно представить, что это не играет роли для соответствия требованиям на данный момент или в будущем.

Главный вывод: что это означает для изображений на вашем сайте?

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

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

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

Что вы сможете сделать, чтобы не отставать?

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

Изображения наращивают общий размер страниц вашего веб-сайта, в особенности если изображения неоптимизированы (т. е. несжатые, неверного размера и т. д.)

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

Различные контексты (браузеры, ОС и т. Д.) Имеют различные форматы для оптимального рендеринга изображений. Но большинство изображений по-прежнему используются в формате .JPG / .PNG.

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

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

Чтоб оптимизировать ваши графические ресурсы, особенно с упором на улучшение CWV, вам нужно:

Уменьшите нагрузку изображения

Реализуйте действенное кеширование

Ускорте доставку

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

Удостоверьтесь, что изображения адаптивны

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

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

ImageEngine — это умственная сеть CDN изображений с поддержкой устройств, которую вы сможете использовать для обслуживания изображений вашего сайта (включая GIF-файлы). ImageEngine использует обнаружение устройств WURFL для анализа контекста доступа к страничкам вашего веб-сайта (устройство, размер экрана, DPI, ОС, браузер и т. Д.) И соответственной оптимизации ваших изображений. На основе этих критериев он может улучшить изображения, разумно изменяя их размер, форматируя и сжимая.

Это вполне автоматическое решение по принципу «установил и запамятовал», которое практически не требует вмешательства после установки. CDN имеет более 20 глобальных точек присутствия с логикой, интегрированной в пограничные серверы, для более резвой работы в разных регионах. ImageEngine утверждает, что добивается коэффициента попадания в кеш до 98% +, а также понижает полезную нагрузку изображения на 75% +.

Пошаговый тест + как использовать ImageEngine для улучшения восприятия странички

Чтобы проиллюстрировать разницу, используя образ CDN, таковой как ImageEngine, я покажу вам практический тест. Во-1-х, давайте посмотрим, как оценивается страница с не малым количеством графического контента с помощью PageSpeed Insights. Это обычная страница, но состоит из большого количества качественных изображений с некоторыми интерактивными элементами, такими как кнопки и ссылки, а также текст.

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

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

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

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

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

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

Что значит для изображений обновление по опыту просмотра страничек от Google

Итак, как видите, у нас есть некие проблемы. К счастью, PageSpeed Insights отмечает два присутствующих CWV, LCP и CLS. Как видите, из-за большой полезной нагрузки изображения (примерно 35 МБ) у нас есть смехотворная LCP практически 1 минута.

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

TTI и TBT также были ниже номинала. С момента возникновения первого элемента на странице до того момента, когда страничка станет интерактивной, пройдет не менее 2-ух секунд. Как видно из возможностей для улучшения и диагностики, практически все проблемы были связаны с изображениями:

Что значит для изображений обновление по опыту просмотра страничек от Google

Настройка ImageEngine и проверка результатов

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

Установить ImageEngine практически на хоть какой веб-сайт относительно просто. Сначала перейдите на ImageEngine.io и подпишитесь на бесплатную пробную версию . Просто сделайте простой трехэтапный процесс регистрации, в котором вам нужно:

предоставить веб-сайт, который вы желаете оптимизировать,

местоположение в Вебе, где хранятся ваши изображения, а потом

скопируйте адрес доставки, который ImageEngine назначает вам.

Последний будет иметь формат {случайная строчка} .cdn.imgeng.in, но его можно будет поменять из панели управления ImageEngine.

Чтоб обслуживать изображения через этот домен, просто вернитесь к разметке собственного веб-сайта и обновите атрибуты src <img>. К примеру, с:

На:

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

Вот результаты моей испытательной страницы ImageEngine после ее настройки:

Что значит для изображений обновление по опыту просмотра страничек от Google

Как видите, результаты фактически безупречны. Все показатели были улучшены, получив зеленоватый цвет — даже Speed Index и LCP, на которые существенно повлияли большие изображения.

Как вы сможете видеть, ImageEngine уменьшил общую полезную нагрузку странички до 968 КБ, сократив содержимое изображения приблизительно на 90%:

Что значит для изображений обновление по опыту просмотра страничек от Google

Заключение

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

Другие метрики, которые имеют возможность отображаться в их инструментах, такие как TTFB, TTI, FCP, TBT, либо, возможно, совершенно новые метрики, могут сыграть еще огромную роль в будущих обновлениях.

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

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

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

Докладывает webformyself.com

от Admin

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *