«
»
GooglePageSpeed InsightsWEB

Повысьте оценку Google PageSpeed Insights для изображений

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

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

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

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

Скорость имеет значение.

Что такое Google PageSpeed Insight?

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

Этот PageSpeed также дает отчеты для изображений?

Да.

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

Источник –Google Lighthouse

Но почему изображения?

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

О каких проблемах с изображениями сообщает Google?

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

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

WebP, JPEG2000 и JPEG XR – это современные форматы изображений, поддерживаемые в браузере, которые обеспечивают лучшее сжатие и визуальное качество по сравнению со старыми форматами JPG и PNG. Более высокое сжатие при сохранении визуального качества означает, что ваши изображения потребляют меньше данных по сети и загружаются быстрее.

Обратите внимание:
среди этих трех форматов WebP – тот, который получил максимальное распространение. Firefox также принимает его, теперь он поддерживается более чем на 80% устройств . Тем не менее, и JPEG2000, и JPEG XR на самом деле не догнали поддержку браузеров на 13% и 4% соответственно. JPEG2000 поддерживается в Safari, тогда как JPEG XR поддерживается в браузерах IE. С такими низкими показателями усыновления вы можете полностью отказаться от них, чтобы сэкономить некоторые усилия. Инструмент Google PageSpeed также не сообщает о случаях, когда JPEG2000 и JPEGXR не используются.

Как это сделать?
Вы можете использовать ImageKit.io для автоматической доставки изображений в нужном формате. Он поддерживает преобразование в WebP, однако не поддерживает JPEG2000 или JPEGXR.

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

Правильно подобранные изображения

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

Изображение, кликаемое с помощью цифровой зеркальной камеры, может иметь размер более 5000×3000 пикселей, а это не то, что вам нужно на вашем веб-сайте. Возможно, вам понадобится это изображение на трех разных страницах вашего веб-сайта, каждая из которых имеет разное требование к размеру – страницу сведений о продукте (размером около 1000×1000 пикселей), страницу со списком продуктов (размер 400×400 пикселей) и домашнюю страницу веб-сайта (эскиз размером 100×100 пикселей). , Таким образом, вы должны изменить размер и обрезать исходное изображение размером примерно 5000×3000 пикселей на эти три размера.

Если у вас есть отзывчивый веб-сайт, и вы хотите знать, как загрузить правильный размер изображения на разные устройства, вам следует подумать о реализации атрибутов srcset и sizes тега img вместо простого тега src. Эти новые расширенные атрибуты позволяют предоставить браузеру список URL-адресов изображений и спецификации для их использования. Затем браузер автоматически загружает правильный URL-адрес изображения из списка доступных для каждого устройства. Посмотрите здесь для более подробной информации об этом.

Неэффективное изменение размера часто является основной причиной увеличения веса изображения на веб-странице.

Как это сделать?
Для этого лучше всего использовать решение для изменения размера изображения в реальном времени, например ImageKit.io, которое позволяет изменить размер и обрезать изображение до любого размера, просто указав его в URL-адресе. Это имеет два преимущества –

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

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

Эффективно кодировать изображения

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

Как правило, уровни сжатия определяются по шкале от 1 до 100, где 100 – лучшее качество (или самое низкое сжатие). Lighthouse , который используется в Google PageSpeed, проверяет изображение на уровень сжатия 85.

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

Как это сделать?
ImageKit.io обеспечивает сжатие в реальном времени непосредственно с URL.

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

Отложить закадровые изображения

В наши дни распространены длинные веб-страницы, простирающиеся на несколько свитков. Типичная страница со списком продуктов электронной коммерции содержит сотни продуктов на одной странице, у каждого из которых есть собственное изображение. Это означает, что страница может загружаться где-то между 100–200 изображениями, что примерно равно 1 МБ изображений на странице.

Хотя, когда пользователь впервые загружает страницу, он не может видеть всю страницу. Он просто смотрит на первую страницу сайта, которая помещается на его экране. Это будет означать, что только первые 10–20 товаров или баннеров будут видны пользователю при первой загрузке страницы. Следовательно, оставшиеся 80–100 изображений не нужно загружать, пока пользователь не начнет прокручивать страницу вниз.

Это уменьшает количество изображений, необходимых для загрузки в самом начале, освобождая ресурсы устройства (сетевые и вычислительные ресурсы) для обработки других ресурсов веб-страниц, таких как JS, CSS и т.д. , В свою очередь, ускоряя загрузку страницы.

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

Помимо того, что упомянуто в связанном руководстве выше, современные браузеры также намереваются поддерживать отложенную загрузку изображений с помощью атрибута «loading». Это, вероятно, будет доступно начиная с Chrome 76 для настольных устройств. До тех пор, пока не выйдет, методы Javascript, упомянутые в руководстве, будут хорошо работать во всех браузерах.

Служите статическим ресурсам с эффективной политикой кэширования

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

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

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

Изображения должны кэшироваться в течение длительного периода времени (обычно год или более). Тем не менее, после того, как PageSpeed Insight попробовал и протестировал с разным временем кеширования, он ищет время кеширования не менее 180 дней для этого конкретного предупреждения. Это предупреждение будет появляться для ресурсов со временем кэширования менее 180 дней.

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

ПОСЛЕДНИЕ МЫСЛИ

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

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

Источник записи: https://blog.imagekit.io/improve-your-google-pagespeed-insights-score-for-images-41711d7e34c6

Связанные записи
Chrome DevToolsGoogleGoogle ChromeWEB

Запускайте фрагменты JavaScript на любой странице с помощью Chrome DevTools

WEBПолезные сайты

50 бесплатных сайтов для ваших проектов графического дизайна в 2020 году | Бесплатные Графика, Фото и Видео стоки, Шрифты, Макеты и не только

JoomlaWEBWordPressПлагиныПолезные сайты

Обзор уникального конструктора страниц Nicepage 2020 (WordPress, Joomla, HTML и не только)

CSSWEBПримеры

Мистический inline-flex и что он делает - Stas Bagretsov - Medium