Изображения LazyLoad для повышения производительности SEO и удобства использования

1. Как работает отложенная загрузка изображений
2. Эффективность изображения SEO стратегия
3. Преимущество отложенной загрузки изображений
4. Ленивая загрузка изображений с использованием Javascript
5. Ленивая загрузка изображений для WordPress
6. Ленивая нагрузка от WP Rocket

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

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

Google даже выпустил несколько бесплатных инструментов, которые помогут веб-мастерам улучшить свои сайты: PageSpeed ​​Insights Tool и Lighthouse Audits Tool ,

Хорошие результаты Google PageSpeed ​​Insights

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

Одной из основных проблем производительности / удобства использования SEO являются изображения, изображения, как правило, являются самыми большими ресурсами данных / полосы пропускания, загружаемыми на веб-странице. Например, на этом сайте полные снимки экрана (я обычно делаю много снимков) составляют около 1900 пикселей на 1100 пикселей (некоторые имеют размер более 250 КБ ПОСЛЕ оптимизации изображения). На некоторых веб-страницах может быть более дюжины изображений без стратегии оптимизации производительности изображений, что может означать, что посетителям придется загружать несколько МБ изображений на одной веб-странице!

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

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

Над сгибом в браузере

На приведенном выше снимке экрана домашней страницы этого сайта на настольном ПК показано указанное выше содержание сгиба , оно включает 4 изображения (изображение заголовка, одно изображение основного содержимого и два изображения виджета «размер миниатюры»), которое ДОЛЖНО загружаться как можно быстрее ( особенно для мобильных устройств с более медленными подключениями), чтобы обеспечить удобство работы с пользователем, любые задержки при загрузке вышеуказанного фолд-контента будут раздражать посетителей, а процент уйдет!

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

Если бы браузеры были более продвинутыми, они загружали бы только те изображения, которые нужны пользователю, так как они им нужны (поскольку они прокручивают), ниже изображения сгиба будут загружаться лениво (загружаться позже): это не так, как работает FireFox / Chrome в 2018 году.

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

Как работает отложенная загрузка изображений

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

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

Удалось сделать снимок экрана с отложенной загрузкой изображения с помощью Google Chrome Screenshot Extension, который делает полный снимок экрана веб-страницы, включая все вышеперечисленные сгибы И ниже сгиба контента (он прокручивается очень быстро).

Снимок экрана, показывающий отложенную отложенную загрузку изображений

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

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

Оригинальный скриншот имеет размеры 1300 на 13 000 пикселей, и перед загрузкой с помощью загрузчика мультимедиа WordPress и модуля оптимизации изображений его размер уменьшился до 1,3 МБ!

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

Из-за этого огромного размера для одного изображения не имеет смысла загружать его полностью в этой статье (1,3 МБ и 13 000 пикселей в высоту не работает), поэтому я выбрал уменьшенную версию, которая составляет 550 пикселей на 5500 пикселей, которая создается моей темой WordPress SEO. Размер этого изображения составляет 350 КБ, он все еще имеет большой размер, а при высоте 5500 пикселей он все еще слишком высок. Поэтому обрезали небольшую часть полных 1300px на 13000px, чтобы показать только одно из изображений отложенной загрузки с задержкой, и изменили его размер до 550px на 400px (15 КБ: вручную загрузили это изображение с помощью FTP, но могли бы использовать загрузчик мультимедиа WordPress. ).

Теперь у нас есть изображение разумного размера (550 на 400 пикселей), которое вы можете увидеть выше.

Если щелкнуть изображение выше, оно перейдет на веб-страницу (страницу вложения WordPress) с загрузкой изображения размером 550 на 5500 пикселей, а если щелкнуть это изображение, будет загружено полное изображение размером 1300 на 13 000 пикселей.

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

Преимущество отложенной загрузки изображений

Преимущество ленивой загрузки изображений пользователю, когда он впервые посещает веб-страницу с большим количеством изображений, верхняя часть содержимого (что выше сгиба) загружается быстрее (они могут быстрее взаимодействовать) И любые важные ресурсы загружаются в нижней части HTML-кода (наполовину важный javascript, например) загружает ПЕРЕД указанными ниже изображениями сгиба, которые в данный момент не нужны пользователю (изображения не находятся над сгибом, они не нужны).

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

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

Ленивая загрузка изображений с использованием Javascript

В фоновом режиме (код веб-сайта) был изменен стандартный код изображения, поэтому браузер не распознает его как код изображения, пока javascript не «изменил» его.

На практике это простая концепция, переименовывать атрибут scr во что-то, что браузер по умолчанию не распознает как изображение: на моем сайте атрибут scr переименован в data-lazy-src.

Создайте еще один атрибут scr с пользовательскими данными ( src = ”data: image / gif; base64, R0lGODdhAQABAPAAAP /// wAAACwAAAAAAQABAEACAkQBADs =» ), который функция javascript фактически заменит содержимым атрибута «data-lazy-src», когда изображение в окне просмотра (когда пользователь прокручивает изображение в поле зрения).

Как работает отложенная загрузка изображений с использованием Javascript

Вы можете увидеть на скриншоте выше (исходный код HTML этой страницы сайта) измененный код.

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

Ленивая загрузка изображений для WordPress

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

К сожалению, большинство плагинов для отложенной загрузки WordPress используют Jquery (раздутую библиотеку javascript) для ленивой загрузки изображения: с помощью Jquery веб-мастер добавляет дополнительный ресурс (jquery).

Я избегаю использования функций, требующих Jquery, я считаю, что он распух на ~ 250 КБ без сжатия и ~ 25 КБ минимизирован, и хотя это усложняет жизнь, он заставляет задуматься о том, НУЖНА ли вам какая-то конкретная тяжелая функция JavaScript.

Даже минимизированная версия Jquery с подключением 1 Мбит / с может добавить 250 мс к времени загрузки, но это может показаться не слишком большим, но Amazon провела исследование, которое обнаружило, что каждые 100 мс задержка стоила им 1% в продажах! Это означает, что если Amazon добавляет функцию, которая требует Jquery, она должна приносить убытки от 2% до 3% в продажах!

Примечание. Ленивая загрузка плагинов WordPress - не единственный способ добавления Jquery на сайт WordPress, это почти норма для любой яркой функции WordPress (например, слайдеров изображений) для использования Jquery и других раздутых библиотек JavaScript. Я написал статью об оптимизации изображений для уменьшения использования данных и у веб-сайта, который я использовал в качестве примера, были AWFUL PageSpeed ​​Insights Results на рабочем столе 8/100 (самый низкий, который я видел). Снимок экрана домашней страницы сайта, на которой показаны некоторые загруженные файлы JavaScript.

Темы и плагины WordPress Добавление раздутых библиотек Jquery Javascript

Чирикать изображение

Посмотрите на все связанные с Jquery файлы и другие файлы Javascript, добавленные темой WordPress, и несколько плагинов WordPress: этот сайт загружается ДЕЙСТВИТЕЛЬНО, ДЕЙСТВИТЕЛЬНО медленно!

Цель сайта - продвинуть автора детской книжки с картинками, на сайте нет ничего особенного, требующего всего этого Jquery / Javascript, владелец добавил функции ярких слайдеров и т. Д. (Которые не добавляют ничего ценного для пользовательского опыта), требующие загрузки CRAP Javascript!

Домашняя страница содержит 11 МБ данных, для которых требуется 111 запросов. Для сравнения, на домашней странице SEO Gold требуется 250 КБ данных, включая 19 изображений, для которых требуется 11 запросов!

В WordPress есть несколько JS-файлов Jquery в папке «/ wp-includes / js / jquery /», а детский сайт для авторов загружает следующие файлы:

/wp-includes/js/jquery/jquery.js = 95 КБ
/wp-includes/js/jquery/jquery-migrate.min.js = 10 КБ
/wp-includes/js/jquery/ui/core.min.js = 4 КБ
/wp-includes/js/jquery/ui/widget.min.js = 7 КБ
/wp-includes/js/jquery/ui/position.min.js = 7 КБ
/wp-includes/js/jquery/ui/menu.min.js = 10 КБ
/wp-includes/js/jquery/ui/autocomplete.min.js = 9 КБ

Это всего лишь файлы Jquery js для WordPress, которые занимают более 140 КБ.

Вышеприведенное не включает в себя пользовательские js-файлы Jquery, добавленные темой, а также плагины и файлы javascript, отличные от jquery.

Плюс также есть куча CSS-файлов!

В любом случае, вернемся к ленивой загрузке изображений плагинов WordPress.

Ленивая нагрузка от WP Rocket

К счастью, я нашел плагин для WordPress, который не использует Jquery под названием Lazy Load от WP Rocket (это бесплатно). Javascript, стоящий за Lazy Load от WP Rocket, составляет ~ 10 КБ без сжатия и ~ 4 КБ минимизировано. Он делает то же самое, что и плагины отложенной загрузки на основе Jquery, но добавляет только javascript специально для функции отложенной загрузки.

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

Я разрабатываю свою собственную тему WordPress SEO, поэтому не знаю, как Lazy Load от WP Rocket работает с другими темами. Я обнаружил, что только лениво загруженные изображения в Одиночных сообщениях (веб-страницах, подобных этой) и Статических страницах не работают с изображениями, загруженными в разделы архива (например, Категории) сайта.

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

Я создал исправление, изменил свои пользовательские изображения категории (архива) и т. Д., Чтобы использовать те же фильтры, что и для миниатюры публикации: Lazy Load от WP Rocket добавляет фильтр миниатюр записей, поэтому при запуске пользовательской функции через миниатюру публикации фильтруется отложенная загрузка. фильтры используются в вашей функции.

Это полный код моей темы (он не будет работать на вашем сайте, он использует другие функции, такие как «ipq_get_theme_image ()» и «st_auto_thumb_wid_ors ()», которых у вас не будет).

if (function_exists ('rocket_lazyload_get_option') && rocket_lazyload_get_option ('images') && $ image_id! = '') {
?&gt; <a href="<?php the_permalink(); ?&gt; "> <? php
echo apply_filters ('post_thumbnail_html', ipq_get_theme_image ($ image_id, array (
массив (st_auto_thumb_wid_ors (), st_auto_thumb_hei_ors (), true)
),
массив ('class' => st_auto_thumb_align_ors ())
)); ?&gt; </a> <? PHP
// Если Rocket LazyLoad не активен, проверьте, есть ли изображение.
} elseif ($ image_id! = '') {
?&gt; <a href="<?php the_permalink(); ?&gt; "> <? php
echo ipq_get_theme_image ($ image_id, array (
массив (st_auto_thumb_wid_ors (), st_auto_thumb_hei_ors (), true)
),
массив ('class' => st_auto_thumb_align_ors ())
); ?&gt; </a> <? PHP
}

Важной частью является:

apply_filters ('post_thumbnail_html', custom_theme_image_function (.........));

Я также добавил бы

if (function_exists ('rocket_lazyload_get_option') && rocket_lazyload_get_option ('images')) {
Код для запуска, когда активна Lazy Load by WP Rocket и установлена ​​опция images
}

Без этого ваш сайт будет зависать при отключении плагина.

Дэвид Лоу: Внештатный SEO Эксперт

Дэвид Лоу: внештатный SEO-консультант с более чем 15-летним опытом в SEO и поисковом маркетинге ... Создатель нескольких тем WordPress SEO и плагинов SEO.

Веб-сайт - SEO Gold

Похожие

Комментарии