От автора: изображения — ключевой компонент каждого веб-сайта. Согласно HTTP Archive, изображения составляют более 60% данных, загружаемых на веб-страницы. Являясь таким критическим компонентом почти всех веб-сайтов, будь то e-commerce, новости, сайты о моде, блоги или порталы для путешествий, оптимизация изображений важна и, возможно, это самый легкий способ ускорить работу своего сайта с тяжелыми изображениями.
Оптимизация изображений на веб-сайте может быть разделена на 3 категории: загружать легче, загружать меньше и загружать быстрее. 5 методов, которые мы обсуждаем в этой статье, или любые другие методы, с которыми вы сталкиваетесь, скорее всего, попадут в одну из этих трех категорий.
Итак, давайте начнем и рассмотрим некоторые простые методы, которые вы можете реализовать сегодня, чтобы добиться значительного прогресса в оптимизации вашего тяжелого веб-сайта.
1. Измените размер изображений
Это необходимая вещь. Измените размеры изображений, чтобы они точно соответствовали вашим веб-сайтам. И нет, я не говорю об изменении размера с помощью CSS или HTML. Я говорю об изменении размера изображения на сервере, а затем отправке его в браузер.
Например, у вас есть изображение 4000x3000px для товара, который вы хотите перечислить на своем интернет-магазине. Однако на вашем веб-сайте вам нужно показать намного меньшее изображение этого товара. Это может быть изображение 200x300px на странице списка товаров и 800x1000px на странице сведений о товаре. Убедитесь, что вы уменьшаете исходное изображение до этих размеров перед отправкой в браузер. Измененные изображения намного меньше исходного изображения и будут загружаться намного быстрее, чем исходное изображение.
<h2>XYZ Product Detail</h2> <!-- DO NOT USE this as it will load the full size image and the browser does the resize --> <img src="image.jpg" alt="full size image" width="800" height="1000" /> <!-- USE a resized image where the resizing is done from the server and there is no need of browser-side resizing--> <img src="resized_800x1000_image.jpg" alt="resized image" />
На мой взгляд, неправильное изменение размеров изображений — это самая большая область оптимизации на большинстве веб-сайтов. И часто мы, как разработчики, склонны игнорировать это. Рассмотрим следующий сценарий: вы начинаете с идеально размерных изображений для вашего нового сайта. В течение следующих нескольких месяцев макет вашего веб-сайта изменится, а также ваши требования к размеру изображения. Однако вместо того, чтобы генерировать новые изображения для удовлетворения этих новых требований к размеру, что само по себе является самоцелью, вы занимаетесь близкой альтернативой. Например, вы используете изображение размером 300×200 пикселей там, где хватило бы 200×200 пикселей. Думаю, это случилось бы со всеми.
В приведенном выше примере разница в килобайтах может показаться небольшой для одного изображения. Но это все равно 21%. Эта небольшая разница, добавленная для большого количества изображений, имеет потенциал для ускорения вашего сайта и снижения потребления пропускной способности на 21%.
Лучший сценарий — иметь сервер изображений, который может изменять размер изображения в любом заданном измерении в режиме реального времени, просто изменяя URL-адрес изображения. Таким образом, когда ваши требования к размеру изображения изменяются, все, что вам нужно для получения новых изображений — это указать это измерение в URL-адресе.
Существует множество реализаций с открытым исходным кодом и на стороне сервера, которые вы можете реализовать самостоятельно. ImageKit — это один из таких сторонних сервисов, который, помимо всех других функций, обеспечивает изменение размера и обрезки URL в реальном времени. И вы можете использовать его на всех ваших существующих изображениях в течение нескольких минут после установки.
2. Оптимизация изображений
Следующим шагом в ускорении вашего тяжелого веб-сайта является выбор правильного формата и качества для каждого изображения на вашем сайте.
JPG, PNG и GIF являются наиболее распространенными форматами изображений, которые в настоящее время используются в Интернете, и каждый из них подходит для разных вариантов использования. Существует еще один относительно новый формат изображения, называемый WebP, который объединяет лучшие из этих форматов изображений, на 30% меньше по размеру и поддерживается почти на 75% современных браузеров.
Учитывая огромные преимущества в производительности, вы должны загружать свои изображения в формате WebP, где это возможно. В других браузерах вы можете продолжить доставлять исходный формат изображения.
Качество изображения, проще говоря, является мерой того, как изображение выглядит визуально. Прямая корреляция между качеством изображения и размером изображения. Более высокое качество приводит к увеличению размера изображения и, как следствие, к медленному веб-сайту.
Различные методы сжатия изображений используют ограничения человеческого глаза, чтобы различать небольшие изменения в цветовой информации для сжатия изображений. В качестве стандарта уровень качества от 80 до 90 (по шкале 100) обычно является хорошим соотношением между размером и качеством изображения.
Сравнение между тем же изображением, закодированным на разных уровнях качества. Изображения почти похожи визуально, но имеют разные размеры.
Простым способом добиться оптимизации формата и качества является использование ImageKit для доставки ваших изображений. Он автоматически преобразует изображение в WebP по возможности, а также оптимизирует качество изображения в режиме реального времени.
3. Создавайте под мобильные устройства
В сегодняшнем мире, если вы серьезно относитесь к запуску веб-сайта, игнорирование мобильных пользователей — это грех. Данные показывают, что почти 60% глобального трафика происходит от мобильных устройств. И да, в то время как мобильные телефоны стали мощными, а мобильные сети стали лучше, данные говорят о том, что скорость мобильных данных все еще намного медленнее, чем широкополосная. Есть страны или районы в странах, где мобильное подключение к данным непостоянное. Поэтому важно уделять особое внимание при разработке веб-приложений для мобильных устройств.
Если у вас есть адаптивный веб-сайт для настольных компьютеров и мобильных устройств, вы можете переключиться на использование адаптивных изображений. С адаптивными тегами изображений, используя атрибуты srcset и sizes тега img, вы можете предоставить браузеру список вариантов для одного изображения и определение относительного размера изображения на разных экранах. Затем браузер определяет оптимальный размер изображения для загрузки определенного устройства из доступного списка на основе размеров устройства и указанного вами макета.
<img srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w" sizes="(max-width: 320px) 300px, (max-width: 480px) 440px, 800px" src="image-800w.jpg" alt="Image">
Атрибут sizes дает информацию о макете изображения, атрибут srcset дает список изображений с фактической шириной, указанной для каждого URL-адреса.
Другим фактором, который приходит в картину с мобильными устройствами, является коэффициент пикселя устройства или значение DPR. Современные мобильные телефоны имеют экраны с высокой плотностью, которые содержат больше пикселей на одном квадратном дюйме.
Изображение, которое отлично смотрится на обычных устройствах, будет слегка размыто на экране с высокой плотностью. Решением этого является загрузка изображения 2x размера на экранах с DPR 2, 3-кратное изображение на экранах с DPR 3 и обычное изображение размером 1x на других устройствах. Это также можно выполнить с помощью адаптивного тега изображения, как показано ниже.
<img srcset="image-320w.jpg 1x, image-640w.jpg 2x src="image-320w.jpg" alt="Image">
Современная спецификация Client Hints упрощает работу с адаптивными изображениями и делает код более чистым по сравнению с атрибутом srcset и sizes. Как работают подсказки — это огромная тема сама по себе, она недоступна для этой публикации и подробно освещена здесь.
ImageKit предоставляет вам параметры DPR на основе URL-адресов, а также параметры изменения размера и обрезки, а также поддерживает клиентские подсказки, что позволяет очень легко использовать адаптивные изображения и предоставлять идеальные изображения на всех устройствах.
4. Загружайте меньше ресурсов
Даже после того, как вы оптимизировали все свои изображения, загрузка слишком многих из них неизбежно замедлит ваш сайт и негативно повлияет на работу пользователя. Я не сторонник того, что мы должны использовать меньшие изображения. Но есть случаи, когда мы можем избежать использования изображений или не загружать их сразу.
Например, вместо загрузки изображений вы можете создавать кнопки, градиенты и другие расширенные элементы с помощью CSS.
Другой более важный метод, который вы можете использовать — это ленивая загрузка изображений. Ленивая загрузка в основном означает, что мы откладываем загрузку изображений, которые не требуются немедленно. Как правило, любое изображение, которое не видно пользователю на его экране или в окне просмотра, может быть загружено в более поздний момент времени, то есть когда изображение входит или собирается войти в окно просмотра.
Рассмотрим случай, когда у вас есть 100 продуктов на веб-странице. Если вы запросите все 100 изображений одновременно и в самом начале, это замедлит время загрузки. Изображения будут конкурировать за пропускную способность сети и ресурсы ЦП с другими критическими элементами на странице, например, CSS и JS.
При ленивой загрузке мы загрузили, скажем, 30 изображений, которые сначала видны пользователю. Затем, когда пользователь начинает прокручивать страницу, мы будем продолжать загружать больше изображений. Это поможет улучшить начальное время загрузки и пользовательский опыт. Будут случаи, когда пользователь не прокручивает всю страницу и, следовательно, некоторые изображения вообще не загружаются. Таким образом, вы также можете сократить расходы на пропускную способность для доставки изображений.
Начать работать с ленивой загрузкой очень просто в библиотеках JS, таких как jQuery Lazy. Вы также можете использовать новейший API IntersectionObserver, который намного более эффективен, чем библиотеки JS, доступные для ленивой загрузки.
5. Используйте хороший CDN для доставки изображений
После того, как вы решите размер изображений и количество изображений, загружаемых на определенную страницу, следующий шаг — обеспечить загрузку загружаемых изображений на ваш сайт. Уменьшение времени загрузки изображения не только поможет вам получить более быстрое общее время загрузки страницы и, таким образом, улучшить работу пользователя на вашем веб-сайте, но также поможет вам повысить рейтинг в поисковых системах.
Сети доставки контента или CDN представляют собой набор распределенных в глобальном масштабе кеширующих / прокси-серверов.
Допустим, ваш сервер веб-сайта находится в США. Сеть доставки контента кэширует ваши изображения на своей глобально распределенной сети серверов (это сложнее, чем на рисунке выше, но для простоты давайте предположим это так). Затем, если пользователь из Бразилии запрашивает изображение с вашего сайта, вместо того, чтобы получать это изображение с вашего сервера в США, CDN доставляет его из узла, ближайшего к этому пользователю в Бразилии. Это сокращает время прохождения в оба конца, необходимое для загрузки изображения.
При выборе CDN убедитесь, что CDN поддерживает HTTP/2. HTTP/2 — это новый протокол для доставки контента в Интернете, который может значительно ускорить время загрузки. Он использует такие методы, как мультиплексирование, сжатие заголовков и server push, чтобы уменьшить время загрузки страницы. HTTP/2 теперь поддерживается следующими CDN. Эта демонстрационная страница отлично справляется с визуальным объяснением разницы в производительности между HTTP/2 и старым протоколом HTTP/1.1.
ImageKit предоставляет вам CDN, который включен HTTP/2 из коробки. Без каких-либо дополнительных усилий вы можете получить лучшую в своем классе доставку ваших изображений (и даже других статических файлов) с помощью ImageKit.
Как я могу проверить свой сайт на проблемы, связанные с изображениями?
Ну, есть немало инструментов, которые вы можете использовать для тестирования веб-сайта специально для проблем, связанных с изображениями. Один из способов — использовать website analyzer от ImageKit. Просто введите URL-адрес страницы и в течение нескольких секунд вы получите предложения относительно изменения размера, наилучшего формата, ленивой загрузки и HTTP/2. Google также работал над инструментом с открытым исходным кодом под названием Lighthouse. Этот инструмент интегрирован в новейшие версии Chrome и может провести тщательный анализ не только изображений на вашем веб-сайте, но и других проблем, которые могут повлиять на производительность. Google PageSpeed insights также указывает, что вы загружаете неоптимизированные изображения на своем сайте, кроме других рекомендаций.
Заключение
Мы рассмотрели все основные методы оптимизации изображений и повышения производительности. Имея эту информацию, вы можете решить 90% проблем, связанных с вашим изображением, если не больше, что поможет вам быстрее увеличить время загрузки страницы и повысить рейтинг в результатах поиска. Всегда помните, для изображений на вашем сайте — загружайте легче, загружайте меньше и загружайте быстрее.
Автор: Brandon Morelli
Источник: https://codeburst.io/
Редакция: Команда webformyself.
