Отложенная загрузка изображений с помощью intersection observer api

What is lazy loading?

Lazy loading is essentially delaying the loading of images until a user scroll downs the page (images enter within the viewport).

Why is this awesome? Well, let’s say you have a long-form blog post with 100 images in it. By default, the browser will try to load all 100 of those images when someone visits the post. Even with optimized images, this can take a while, especially on mobile.

But if you lazy load the images, it will only load the images towards the top of the page that visitor can see in their browser. The number of images varies based on the type of browser, what type of lazy loading is being used, the size of the viewport, etc. But regardless, the idea is that it usually cuts down on 85%+ of the requests right off the bat.

Download / Install

Dev version:	jquery.lazyloadxt.js	jquery.lazyloadxt.extra.js
Minified version:	jquery.lazyloadxt.min.js	jquery.lazyloadxt.extra.min.js

Effects:

Dev version:	jquery.lazyloadxt.fadein.css	jquery.lazyloadxt.spinner.css
Minified version:	jquery.lazyloadxt.fadein.min.css	jquery.lazyloadxt.spinner.min.css

Addons:

	jquery.lazyloadxt.script.js	jquery.lazyloadxt.script.min.js
	jquery.lazyloadxt.srcset.js	jquery.lazyloadxt.srcset.min.js
	jquery.lazyloadxt.print.js	jquery.lazyloadxt.print.min.js
	jquery.lazyloadxt.bg.js	jquery.lazyloadxt.bg.min.js
	jquery.lazyloadxt.autoload.js	jquery.lazyloadxt.autoload.min.js
	jquery.lazyloadxt.bootstrap.js	jquery.lazyloadxt.bootstrap.min.js
	jquery.lazyloadxt.jquerymobile.js	jquery.lazyloadxt.jquerymobile.min.js

Get full snapshot of Lazy Load XT: lazy-load-xt-master.zip

If you have any feature to request or bug to report please use
GitHub issues.

Еще немного о плейсхолдерах

Напомню, плейсхолдер (placeholder) — это заглушка, которое показывается пока загружается изображение. Как только изображение будет загружено заглушка будет заменена оригинальным изображением.

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

Плейсхолдер доминирующего цвета

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

Источник изображения — https://manu.ninja/dominant-colors-for-lazy-loading-images

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

Плейсхолдер низкого качества (LQIP)

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

Плейсхолдер низкого качества (LQIP)

Вот HTML-код изображения.

Что такое ленивая загрузка

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

Без плагинов такой тип загрузки можно подключить только с помощью написания довольно сложной структуры из смеси php/js/css. Также можно использовать готовые решения. Например, jquery.lazyload.js. Но практически все плагины с данной функцией так или иначе используют данную библиотеку. Потому, в данном случае гораздо целесообразнее использовать готовое решение.

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

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

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

Условия таковы:

• только бесплатные плагины;

• доступны в репозитории WordPress;

• обновлялись не позднее, чем пол года назад.

Поехали!

Lazy Load by WP Rocket

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

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

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

Smush

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

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

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

WordPress Infinite Scroll — Ajax Load More

Вылезает по запросу в списке плагинов для WordPress. Ну, просто смотрите на скрины.

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

Lazy Load Optimizer

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

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

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

PageSpeed Ninja

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

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

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

A3 Lazy Load

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

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

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

Сделайте сайт быстрым

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

? Demos

Didn’t find the that exactly matches your case? We have demos!

The demos folder contains 30+ use cases of vanilla-lazyload. You might find there what you’re looking for.

Type	Title	Code	Demo
Content	Simple lazy loaded images, not using any placeholder	Code
Content	Lazy images that use an inline SVG as a placeholder	Code
Content	Lazy images that use an external SVG file as a placeholder	Code
Content	Lazy responsive images with	Code
Content	Lazy responsive images with the tag and the attribute (art direction)	Code
Content	Lazy responsive images with and (using )	Code
Content	Lazy responsive images with and (using plain )	Code
Content	Lazy video with multiple tags	Code
Content	Lazy loading background images	Code
Content	Lazy loading multiple background images	Code
Content	Lazy WebP images with the tag and the attribute for WebP	Code
Asynchronous loading LazyLoad with requireJS	Code
Asynchronous loading LazyLoad + InterserctionObserver with requireJS	Code
Asynchronous loading LazyLoad with	Code
Asynchronous loading multiple LazyLoad instances with	Code
Technique	Fade in images as they load	Code
Technique	Lazily create lazyload instances	Code
Technique	Lazily execute functions as specific elements enter the viewport	Code
Technique	How to manage the print of a page with lazy images	Code
Technique	A popup layer containing lazy images in a scrolling container	Code
Settings	Multiple scrolling containers	Code
Settings	Single scrolling container	Code
Methods	How to LazyLoad	Code
Methods	Adding dynamic content, then LazyLoad	Code
Methods	Adding dynamic content, then LazyLoad passing a NodeSet of elements	Code
Methods	Load punctual images using the method	Code
Methods	Load all images at once using	Code
Test	Test for multiple thresholds	Code
Test	Test behaviour with hidden images	Code
Test	Test performance, lazy loading of hundreds of images	Code
Native	Test the native lazy loading of images WITHOUT any line of javascript, not even this script	Code
Native	Test the native lazy loading of images conditionally using the option (see API)	Code

Принцип работы атрибута loading

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

Событие load запускается, как только загружается полное изображение после первого запроса (для изображений размером менее 2 КБ) или после второго. Это событие может не запускаться для определенных изображений, из-за того, что не выполняется второй запрос.

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

Убедитесь, что ваши серверы поддерживают HTTP-заголовок Range: 0-2047 и ответьте кодом состояния 206 («Частичный контент»), чтобы исключить доставку полноразмерного изображения дважды.

Поговорим об отложенном контенте. Движок рендеринга Chrome Blink определяет, загрузку какого контента и на какой срок следует отложить. Полный список требований можно найти в документации. Ниже приводится краткое описание ресурсов, загрузка которых может быть отложена:

• Изображения и фреймы на всех платформах, на которых установлено loading=»lazy».
• Изображения на Chrome для Android, где включен Data Saver и которые удовлетворяют следующим требованиям:
  • loading=»auto» или значение unset;
  • атрибуты width и height больше 10px;
  • не созданы программно с помощью JavaScript.
• Фреймы, которые удовлетворяют следующим требованиям:
  • loading=»auto» или значение unset;
  • из стороннего источника (домен или протокол, который отличается от тех, что были на странице встраивания);
  • если высота и ширина превышает 4 пикселя (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
  • если для фреймов не установлено display: none или visibility: hidden (чтобы предотвратить отложенную загрузку небольших следящих фреймов);
  • если они не расположены за границами экрана из-за отрицательных координат x или

Lazy Loading and CDN

Lazy loading and content delivery networks (CDNs), such as Imperva’s CDN, are two ways to improve page load time and optimize the end-user experience. A CDN helps by placing resources on a cache server closer to the user, allowing them to access it much faster.

How does lazy loading compare to a CDN for website performance optimization?

• Lazy loading avoids unnecessary resource downloads or code execution. However it can’t help when the user actually requests large or numerous resources.
• A CDN caches resources and can serve them to users much faster – but it may transmit unnecessary resources which users don’t actually need.

Асинхронная загрузка картинок и фреймов

«Презентацию» скрипта lazy-load следует начать с некоторых разъяснений. Во-первых, для правильной работы скрипт должен запускаться после полной загрузки HTML и постройки DOM-дерева, т. е. наступления события . Во-вторых, в HTML-разметке у элементов, которые планируется загружать асинхронно, будет присутствовать атрибут , указывающий на оригинальный источник ресурса, — с его помощью происходит поиск элементов, для которых необходимо инициализировать lazy-load, поэтому, чтобы отложенная загрузка заработала на желаемом элементе, к нему достаточно будет добавить указанный атрибут с источником. В-третьих, при использовании скрипта следует заранее позаботиться о шаблонах, которые станут отображаться взамен оригинального элементов. Наконец, настройки скрипта учитывают варианты отображения оригинального контента — по требованию пользователя и автоматически, для чего применяются описанные выше события: ,  — непосредственно на самих элементах, а , и  — для окна браузера, если требуется отследить попадание во viewport.

JavaScript

В качестве единственного аргумента в метод init() функции «ленивой» загрузки должен передаваться объект с предварительными настройками, содержащий:

1. название селектора, по которому через выбираются необходимые элементы;
2. указание на событие, активирующее замену атрибута на оригинальный, — , или (попадание во viewport);
3. callback-функцию, вызываемую во время загрузки источника.

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

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

CSS-оформление

Чтобы добавить к lazy-элементам CSS, можно указать следующие селекторы:

Благодаря callback-функции к загружаемой картинке можно добавить класс и настроить эффект появления на свой вкус. В примере ниже это реализовано посредством и .

Инструкция по установке Lazy Load 2.0 на сайт

Итак, все как обычно.

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

2. Далее в секцию HEAD на всех страницах вашего сайта подключите ранее загруженный скрипт:

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

3. Перед закрывающим тегом </body> вы вставляете скрипт вызова плагина и стиль для скрытия отложенных изображений при отключенном в браузере JavaScript:

«img» в скрипте означает, что «лениво» загружаться будут все изображения. Можно поставить ограничение в виде определенного CLASS или ID.

4. Затем (не обязательно, но желательно), в секцию HEAD (обязательно в нее, а не в другое место или отдельный файл стилей) вставьте следующие правила:

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

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

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

Стандартная конструкция вставки изображения в HTML выглядит так:

Различия с кодом ваших изображений могут быть лишь в разного рода атрибутах. Главное здесь то, что ранее используемый атрибут «src» вы заменяете на «data-src»:

Оригинальное изображение в теге <noscript> (как и сам тег) не обязательно, но желательно. Оно будет отображаться в том случае, если на стороне пользователя (в его браузере) отключена работа JavaScript.

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

По желанию можно не удалять атрибут «src» и прописывать в нем ссылку до превью (уменьшенной копии):

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

Предвидя ваш вопрос «У меня куча изображений на сайте, мне что теперь, все руками изменять?», отвечу – я придумал один способ, как можно автоматизировать этот процесс.

Browsers with disabled JavaScript

As JavaScript may be disabled in the browser (e.g. it may be a feature phone with limited javascript support or browser
with Noscript addon), it is usually recommended to add a fallback image in tag, mark initial image with
attribute and hide it using CSS (otherwise browsers with disabled javascript will display both images).
Lazy Load XT plugin removes this class ( option) at image initialization. So, final code should be
like:

img.lazy{displaynone;}

<imgclass="lazy"data-src="lazy.jpg"width="100"height="100"><noscript><imgsrc="lazy.jpg"width="100"height="100"></noscript>

We recommend to keep the order of attributes in both tags, because of such a code will be effectively gzipped.

Lazy Loading Feature Modules

In addition to general purpose lazy loading, UI-Router also provides lazy loading of application modules.

An normal app (which doesn’t use lazy loading) often bundles all its code and libraries together into a single javascript file.

A monolithic app bundle

To use modular lazy loading, the application should be split up into logical chunks (modules).
The simplest way to split an application into modules is by application feature.
If your application has a Messages feature, a Contacts feature, and a Preferences feature, each one should be bundled as a separate module.
You can then use UI-Router’s lazy loading capabilities to load the feature module when the user activates it.

Modular app bundles

A feature module contains the code which implements the feature.
For the Contacts Feature Module, this may include:

• States
  • Top level state, e.g.,
  • Nested states, e.g., , ,
• Routed components
• Non-routed components/directives
• Any services or other code necessary to implement the feature

Future States

A UI-Router application is structured as a tree of states.

An entire branch of the state tree (i.e., a module) can be lazy loaded.
In this example, the state and all its child states will be lazy loaded.

Instead of defining the states tree when the application bootstraps, a placeholder for and all its children is created.
This placeholder is called a “Future State”.

A future state is any state which ends in a glob double-wildcard ().
The future state for the contacts feature module is named .

The URL for a future state has an implicit wildcard on the end.
The example will match on both and .

When defining the future state placeholder, only include the minimum details necessary to load the module.
You should include the , the , and the instructions to fetch and load the module.
Do not include other properties such as or .
Those properties should be placed on the full state, inside the lazy loaded module.

When a user activates a future state (by clicking a ui-sref, etc), UI-Router invokes the function.
The function should load the module’s javascript bundle, including the feature’s components, states, services, etc.
UI-Router then replaces the future state placeholder with the fully loaded state tree.

Now that the module and its states are fully loaded, the original transition is re-run and the correct state is activated.

? Recipes

This is the section where you can find ready to copy & paste code for your convenience.

CSS

img:not():not() {
  visibility: hidden;
}

Just that, really.

Dynamic content

HTML

The HTML to use depends on your case, see other recipes’ HTML

Javascript

var myLazyLoad = new LazyLoad();
// After your content has changed...
myLazyLoad.update();

Mixed native and JS-based lazy loading

HTML

<img class="lazy" alt="A lazy image" data-src="lazy.jpg" />
<iframe class="lazy" data-src="lazyFrame.html"></iframe>
<video class="lazy" controls data-src="lazy.mp4" data-poster="lazy.jpg">...</video>
<div class="lazy" data-bg="lazy.jpg"></div>

Javascript

// Instance using native lazy loading
const lazyContent = new LazyLoad({
  use_native: true // <-- there you go
});

// Instance without native lazy loading
const lazyBackground = new LazyLoad({
  // DON'T PASS use_native: true HERE
});

Scrolling panel(s)

HTML

<div class="scrollingPanel">
  <!-- Set of images -->
</div>

Javascript

var myLazyLoad = new LazyLoad({
  container: document.querySelector(".scrollingPanel")
});

If you have multiple scrolling panels, you can use the following markup and code.

HTML

<div id="scrollingPanel1" class="scrollingPanel">
  <!-- Set of images -->
</div>
<div id="scrollingPanel2" class="scrollingPanel">
  <!-- Set of images -->
</div>

Javascript

var myLazyLoad1 = new LazyLoad({
  container: document.getElementById("scrollingPanel1")
});
var myLazyLoad2 = new LazyLoad({
  container: document.getElementById("scrollingPanel2")
});

Lazy functions

HTML

<div class="lazy" data-lazy-function="foo">...</div>
<div class="lazy" data-lazy-function="bar">...</div>
<div class="lazy" data-lazy-function="buzz">...</div>
<div class="lazy" data-lazy-function="booya">...</div>

JS

// It's a best practice to scope the function names inside a namespace like `lazyFunctions`.
window.lazyFunctions = {
  foo: function (element) {
    element.style.color = "red";
    console.log("foo");
  },
  bar: function (element) {
    element.remove(element);
    console.log("bar");
  },
  buzz: function (element) {
    var span = document.createElement("span");
    span.innerText = " - buzz!";
    element.appendChild(span);
    console.log("buzz");
  },
  booya: function (element) {
    element.classList.add("boo");
    console.log("booya");
  }
};

function executeLazyFunction(element) {
  var lazyFunctionName = element.getAttribute("data-lazy-function");
  var lazyFunction = window.lazyFunctionslazyFunctionName;
  if (!lazyFunction) return;
  lazyFunction(element);
}

var ll = new LazyLoad({
  unobserve_entered: true, // <- Avoid executing the function multiple times
  callback_enter: executeLazyFunction // Assigning the function defined above
});

Use to avoid executing the function multiple times.

That’s it. Whenever an element with the attribute enters the viewport, LazyLoad calls the function, which gets the function name from the attribute itself and executes it.

Lazy initialization of multiple LazyLoad instances

HTML

<div class="horizContainer">
  <img
    src=""
    alt="Row 01, col 01"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_01&amp;w=200&amp;h=200"
  />
  <img
    src=""
    alt="Row 01, col 02"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_01_col_02&amp;w=200&amp;h=200"
  />
  <!-- ... -->
</div>
<div class="horizContainer">
  <img
    src=""
    alt="Row 02, col 01"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_01&amp;w=200&amp;h=200"
  />
  <img
    src=""
    alt="Row 02, col 02"
    data-src="https://placeholdit.imgix.net/~text?txtsize=19&amp;txt=row_02_col_02&amp;w=200&amp;h=200"
  />
  <!-- ... -->
</div>

Javascript

var lazyLoadInstances = ;

var initOneLazyLoad = function (horizContainerElement) {
  // When the .horizContainer element enters the viewport,
  // instantiate a new LazyLoad on the horizContainerElement
  var oneLL = new LazyLoad({
    container: horizContainerElement
  });
  // Optionally push it in the lazyLoadInstances
  // array to keep track of the instances
  lazyLoadInstances.push(oneLL);
};

// The "lazyLazy" instance of lazyload is used to check
// when the .horizContainer divs enter the viewport
var lazyLazy = new LazyLoad({
  elements_selector: ".horizContainer",
  callback_enter: initOneLazyLoad,
  unobserve_entered: true // Stop observing .horizContainer(s) after they entered
});

That’s it. Whenever a element enters the viewport, LazyLoad calls the function, which creates a new instance of LazyLoad on the element.

How to enable lazy load in WordPress

To enable lazy load in WordPress, go to the “Perfmatters” settings in your WordPress admin dashboard. Under the “Options” tab scroll down to the “Lazy Loading” section.

There are four different options you have when it comes to lazy loading. They can also be used together at the same time.

Lazy load images

The first option and most common is to lazy load on your images. To enable this, toggle on the “Images” option. This also includes inline background images inside the style attribute.

WordPress lazy load in Perfmatters plugin

Lazy load iframes and videos

The second option is to lazy load iframes and videos. This includes YouTube, Vimeo, and any type of iframe. This also works with videos embedded with a file URL using the tag.

To enable this, toggle on the “iFrames and Videos” option.

Lazy load iframes and videos

YouTube preview thumbnails

If you’re using YouTube videos on your site, it can be advantageous to enable our preview thumbnail feature. What this does is swap out the YouTube iframes with a preview thumbnail and lightweight SVG play icon. The iframe is then loaded on click. This is the fastest way to load YouTube videos.

In our performance testing with videos, we saw this feature increase the speed of the site by 64%. It also dropped the total page size by 58%. That’s pretty incredible.

• Before: 1.93s load time with a total page size of 691 KB.
• After (lazy load on): 0.72s load time with a total page size of 288 KB.

The thumbnail used on YouTube is the preview image that will automatically be pulled. This is just an example below.

YouTube video thumbnail

To enable this, toggle on the “YouTube Preview Thumbnails” option. Note: This does require to be enabled in Perfmatters.

YouTube preview thumbnails

YouTube preview thumbnail quality filter

By default, a low-resolution image is pulled from YouTube for the thumbnail. We have a filter you can use to change the quality of the thumbnail. The attribute will pull the highest quality if available. Make sure your YouTube thumbnails are at least 1280 x 720 pixels. Check out this great guide on how to size your YouTube thumbnails.

You can also use the function to show low-resolution images on mobile devices while showing high-resolution thumbnails on a desktop.

DOM monitoring

DOM monitoring watches for changes in the DOM and dynamically lazy loads newly added elements. This improves compatibility for third-party plugins and themes that utilize infinite scrolling when loading a page.

To enable this, toggle on the “DOM Monitoring” option.

DOM monitoring

Note: If you aren’t using infinite scrolling, we don’t recommend enabling this option.

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

Очень часто на сайтах веб-мастера не задумываются о правильных размерах изображений: для отображения маленьких рисунков (миниатюр) часто используются большие изображения с принудительной установкой малых размеров через параметры width и height.

HTML, конечно, может отображать изображения любого указанного вами размера. Однако необходимо понимать, что в случае уменьшения большого изображения до миниатюры браузеру потребуется время для загрузки полного изображения. А это все — лишнее время. В обратном случае (принудительное увеличение малых изображений до больших размеров) заметно страдает качество.

Для правильного размещения изображений необходимо:

• Использовать изображения нужных размеров: при размещении на странице миниатюры следует использовать миниатюры изображений, для больших фотографий — изображения соответствующего размера;
• Указывать точные размеры изображений: в атрибутах width и height тэга <img> необходимо указывать точные изображения загружаемых картинок. В противном случае браузер может отобразить их в искаженном виде;
• Не пренебрегать атрибутами width и height: если вы не указываете эти параметры, при медленной загрузке информация на странице может «прыгать», браузер будет формировать страницу не один раз, а дважды или более раз (в зависимости от количества изображений на странице): сначала браузер прочитает и разместит текст без учета размера изображений, затем подгрузятся картинки, «вклинятся» в текст и переместят его по-другому. Если же вы заранее укажете браузеру на размеры изображений, он уже будет знать про отведенное для них место и ему не придется помногу раз перекраивать web-страницу.

Пример из личного опыта

Во время аудита одного из наших «подопечных» сайтов мы обнаружили ну просто гигантское изображение — размером 4049×2699 пикселей. На странице оно принудительно сжималась средствами браузера путем указания ей требуемых размеров. Исходное изображение (залито красным цветом), помимо огромного размера, занимало 5.74 МБ (6 026 239 байт) на хостинге. Оптимизированное изображение (залито зеленым цветом) размером 250×167 пикселей стало «весить» всего 10.5 КБ (10 805 байт). Уменьшение в 557(!) раз налицо:

Использование этих несложных правил позволит вашему сайту загружаться быстрее!

Включите функцию «keep-alive»

Для отображения веб-страниц браузер должен постоянно закачивать определенные данные с веб-сервера. В первую очередь браузеру передается HTML-файл и дополнительные данные (CSS-файлы, изображения, скрипты). Если функция keep-alive не включена, для загрузки страницы может потребоваться много времени: для запроса каждого файла будет открыто свое сетевое соединение. В случае с включенной функцией keep-alive между браузером и сервером создается своего рода «разговор», действующий в рамках одного соединения.

По умолчанию параметр keep-alive включен, но могут возникать ситуации, когда ваш сайт, все же, не использует его или он отключен в параметрах вашего хостинга. Для включения keep-alive необходимо добавлять HTTP-заголовок в запросы при помощи все того же файла .htaccess:

Если же у вас есть доступ к конфигурационному файлу Apache-сервера, включить keep-alive можно следующим способом: