One place for hosting & domains

      ускорения

      Использование CDN для ускорения загрузки статичного контента


      Введение

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

      Чтобы заметно сократить время загрузки страницы, улучшить производительность и снизить объем трафика и расходы на инфраструктуру, вы можете реализовать CDN, или сеть доставки контента (content delivery network), чтобы кешировать подобные активы на распределенных в разных географических точках серверах.

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

      Что такое CDN?

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

      Схема доставки контента без использования CDN

      CDN включает несколько точек входа в сеть (PoP) в различных местах, каждая из которых включает несколько пограничных серверов, которые кешируют активы из вашего источника или хост-сервера. При посещении пользователем веб-сайта и запросе статичных активов, таких как изображения или файлы JavaScript, эти запросы перенаправляются CDN на ближайший пограничный сервер, откуда и предоставляется контент. Если у данного пограничного сервера нет кешированных активов или срок действия подобных активов истек, CDN будет выполнять выборку и кешировать последнюю версию из любого другого ближайшего пограничного сервера CDN или ваших серверов источника. Если у пограничного сервера CDN есть запись в кеше для ваших активов (что происходит в большинстве случаев, если ваш веб-сайт принимает среднее количество трафика), он будет возвращать конечному пользователю копию из кеша.

      Схема сети доставки контента (CDN)

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

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

      Как работает CDN?

      Когда пользователь посещает ваш веб-сайт, сначала он получает ответ от сервера DNS, который содержит IP-адрес вашего веб-сервера хоста. Затем браузер пользователя запрашивает контент веб-страницы, который часто включает целый ряд статичных файлов, таких как страницы HTML, таблицы стилей CSS, код JavaScript и изображения.

      После развертывания CDN и переноса этих статичных активов на сервера CDN либо путем ручной их выгрузки, либо путем автоматической выгрузки (оба механизма описываются в следующем разделе), вы должны будете указывать вашему веб-серверу на необходимость перезаписи ссылок на статичный контент, чтобы эти ссылки указывали на файлы, которые содержатся в CDN. Если вы используете CMS, например WordPress, подобная перезапись ссылки может быть выполнена с помощью стороннего плагина, например CDN Enabler.

      Многие CDN обеспечивают поддержку для настраиваемых доменов, позволяя вам создавать запись CNAME в вашем домене, указывающую на конечную точку CDN. Когда CDN получает запрос пользователя в этой конечной точке (которая расположена на пограничном сервере, находящемся гораздо ближе к пользователю, чем ваши серверы бекэнда), он перенаправляет запросы на ближайшую к пользователю точку входа (PoP). Эта точка входа часто включает один или несколько пограничных серверов CDN, которые расположены в точке обмена интернет-трафиком (IxP), то есть, по сути, в центре обработки данных, используемом интернет-провайдерами для соединения своих сетей. Внутренний распределитель нагрузки CDN перенаправляет запрос на пограничный сервер, находящийся в этой точке входа, который затем предоставляет контент пользователю.

      Механизмы кеширования, применяемые разными поставщиками CDN, различаются, но обычно они работают следующим образом:

      1. Когда CDN получает первый запрос статичного актива, например изображения в формате PNG, сеть не располагает кешированной версией актива и должна получить копию этого актива либо от ближайшего пограничного сервера CDN, либо на самом сервере источника. Это так называемое отсутствие затребованных файлов в кеше обычно можно обнаружить, изучив заголовок HTTP-ответа, которые содержит запись X-Cache: MISS. Этот первоначальный запрос может быть медленнее, чем будущие запросы, поскольку после выполнения этого запроса данный актив будет храниться на пограничном сервере.
      2. Будущие запросы этого актива (удачные обращения к кешу), направляемые к данному расположению пограничного сервера, будут теперь обслуживаться из кеша до истечения срока действия актива (обычно он задается в заголовке HTTP). Эти ответы будут намного быстрее, чем первоначальный запрос, что значительно сокращает время задержки и сокращает количество веб-трафика в сети CDN. Вы можете убедиться, что ответ был отправлен из кеша CDN, изучив заголовок HTTP-ответа, который должен сейчас содержать запись X-Cache: HIT.

      Дополнительные данные о том, как работает и реализуется конкретная CDN, приведены в документации поставщика CDN.

      В следующем разделе мы добавим два популярных типа CDN: push и pull CDN.

      Push- и pull-зоны

      Большинство поставщиков CDN предоставляет два способа кэширования ваших данных: pull-зоны и push-зоны.

      Pull-зоны подразумевают ввод адреса сервера источника, после чего CDN автоматически получает и кеширует все статичные ресурсы на вашем сайте. Pull-зоны, как правило, используются для предоставления часто обновляемых веб-активов небольшого и среднего размера, таких как файлы HTML, CSS и JavaScript. После предоставления CDN адреса сервера источника следующим шагом обычно является переписка ссылок на статичные активы, чтобы они указывали на URL-адрес, предоставляемый CDN. С этого момента и далее CDN будет обрабатывать входящие запросы активов от ваших пользователей и обслуживать контент из распределенных по географическому принципу кешей и вашего источника, если это уместно.

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

      Преимущества использования CDN

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

      Мы обсудим эти преимущества, а также некоторые другие основные выгоды от использования CDN ниже.

      Снижение нагрузки на источник

      Если вы практически достигли пиковой пропускной способности на ваших серверах, разгрузка статичных активов, таких как изображения, видео, файлы CSS и JavaScript, позволит значительно снизить нагрузку на ваши серверы. Сети доставки контента предназначены и оптимизированы для обслуживания статичного контента, а запросы клиента для этого контента будут перенаправляться на пограничные серверы CDN и обслуживаться ими. Это дает дополнительное преимущество при сокращении нагрузки на серверы источника, поскольку они будут гораздо реже обслуживать эти данные.

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

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

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

      Управление пиковыми нагрузками для трафика и предотвращение остановки работы

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

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

      Снижение затрат

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

      Повышение безопасности

      Еще одним распространенным вариантом использования CDN является смягчение последствий DDoS-атак. Многие поставщики CDN предоставляют возможность мониторинга и фильтрации запросов для пограничных серверов. Подобные службы проводят анализ веб-трафика на подозрительные элементы, блокируя трафик злоумышленников, одновременно позволяя добросовестным пользователям использовать сайт. Поставщики CDN, как правило, предоставляют различные службы для смягчения последствий DDoS-атак, от общей защиты на уровне инфраструктуры (слои 3 и 4 OSI) до более продвинутых служб и ограничения скорости.

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

      Выбор лучшего решения

      Если ограничением вашей системы является нагрузка на ЦП на сервере источника, а не трафик, CDN может оказаться не самым подходящим решением. В данном случае локальное кеширование с помощью таких популярных средств кеширования, как NGINX или Varnish, может значительно снизить нагрузку с помощью предоставления активов из системной памяти.

      Помимо развертывания CDN, такие дополнительные меры оптимизации, как, например, уменьшение размера и сжатие файлов JavaScript и CSS или активация сжатия HTTP-запросов, могут также оказывать значительное влияние на время загрузки страницы и объем трафика.

      PageSpeed Insights​​​ от Google — это отличный инструмент для оценки скорости загрузки страницы и ее оптимизации. Еще одним полезным инструментом, который предоставляет каскадную разбивку скорости запросов и ответов, а также меры оптимизации, является Pingdom.

      Заключение

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

      Наличие плагинов и поддержки большинства фреймворков, например, WordPress, Drupal, Django и Ruby on Rails, а также таких дополнительных функций, как смягчение последствий DDoS-атак, полноценные SSL-сертификаты, мониторинг пользователей и сжатие активов, делает CDN полезным инструментом для обеспечения безопасности и оптимизации веб-сайтов с высоким трафиком.



      Source link

      Создание и вывод изображений WebP для ускорения себ-сайта


      Автор выбрал фонд Apache Software Foundation для получения пожертвования в рамках программы Write for DOnations.

      Введение

      WebP — открытый формат изображений, разработанный компанией Google в 2010 году на основе видеоформата VP8. С тех пор количество веб-сайтов и мобильных приложений с использованием формата WebP значительно выросло. Как Google Chrome, так и Opera поддерживают оригинальный формат WebP, и поскольку на эти браузеры приходится около 74% всего веб-трафика, пользователи могут получать доступ к веб-сайтам быстрее, если на них используются изображения WebP. Также имеются планы внедрения WebP в Firefox.

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

      В этом обучающем руководстве вы будете использовать инструмент командной строки cwebp для преобразования изображений в формат WebP, создавая скрипты, которые будут наблюдать за изображениями и преобразовывать их в конкретной директории. Затем вы изучите два способа показывать изображения WebP своим посетителям.

      Предварительные требования

      Работа с изображениями WebP не требует конкретного дистрибутива, но мы продемонстрируем, как работать с соответствующим программным обеспечением на Ubuntu 16.04 и CentOS 7. Для прохождения данного обучающего руководства вам потребуется следующее:

      • Сервер, созданный пользователем sudo без прав root. Для настройки сервера Ubuntu 16.04 следуйте нашему руководству по начальной настройке сервера Ubuntu 16.04. Если вы хотите использовать CentOS, то можете настроить сервер CentOS 7 при помощи нашего «Обучающего руководства по начальной настройке сервера CentOS 7».

      • Apache, установленный на сервере. Если вы используете Ubuntu, то можете следовать первому шагу руководства «Установка стека Linux, Apache, MySQL, PHP (LAMP) на Ubuntu 16.04». Если вы используете CentOS, следуйте первому шагу «Установка стека Linux, Apache, MySQL, PHP (LAMP) на CentOS 7». Обязательно измените настройки брандмауэра для разрешения трафика HTTP и HTTPS.

      • mod_rewrite, установленный на сервере. Если вы используете Ubuntu, то можете следовать нашему руководству «Как переписывать URL-адреса при помощи mod_rewrite для Apache на Ubuntu 16.04». По умолчанию mod_rewrite установлен и активирован на CentOS 7.

      Шаг 1 — Установка cwebp и подготовка директории изображений

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

      На Ubuntu 16.04 можно установить cwebp (это утилита, которая позволяет сжимать изображения в формат .webp),“ введя следующее:

      • sudo apt-get update
      • sudo apt-get install webp

      В CentOS 7 введите:

      • sudo yum install libwebp-tools

      Для создания новой директории изображений, которая называется webp, в корневой директории Apache (находится по умолчанию в /var/www/html), введите:

      • sudo mkdir /var/www/html/webp

      Дайте права на данную директорию вашему пользователю sammy без прав root:

      • sudo chown sammy: /var/www/html/webp

      Для тестирования команд можно скачать бесплатные изображения JPEG и PNG, используя wget. Этот инструмент установлен по умолчанию в Ubuntu 16.04; если вы используете CentOS 7, можно установить его, введя следующее:

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

      • wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg
      • wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg
      • wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

      Примечание. Эти изображения доступны для использования и распространения по лицензиям Creative Commons Attribution-ShareAlike и Public Domain Dedication.

      Основная часть вашей работы на следующем шаге будет находиться в директории /var/www/html/webp, в которую можно перейти, введя:

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

      Шаг 2 — Сжатие файлов изображений с помощью cwebp

      Показ изображений .webp посетителям сайта требует версий .webp файлов изображений. На этом шаге вы преобразуете изображения JPEG и PNG в формат .webp, используя cwebp. Общий синтаксис команды выглядит следующим образом:

      • cwebp image.jpg -o image.webp

      Параметр -o указывает путь к файлу WebP.

      Поскольку вы все еще находитесь в директории /var/www/html/webp, можно запустить следующую команду для преобразования изображений image1.jpg в image1.webp и image2.jpg​​​ в ​​​image2.webp​​​​:

      • cwebp -q 100 image1.jpg -o image1.webp
      • cwebp -q 100 image2.jpg -o image2.webp

      Если установить параметр качества -q равным 100, сохраняется 100% качества изображения; если он не указан, значение по умолчанию составляет 75.

      Затем проверьте размер изображений JPEG и WebP, используя команду ls. Параметр -l показывает длинный формат списка, который включает размер файла, а параметр -h обеспечивает, что ls выводит на печать изображения читаемых размеров:

      • ls -lh image1.jpg image1.webp image2.jpg image2.webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp

      Данные, выводимые командой ls, показывают, что размер image1.jpg составляет 7,4 Mбайт, а размер image1.webp — 3,9 Mбайт. То же самое относится к изображениям image2.jpg​​​​​​ (16 Mбайт) и image2.webp (7 Mбайт). Эти файлы почти в два раза меньше первоначального размера!

      Для сохранения полных исходных данных этих изображений при сжатии можно использовать параметр -lossless вместо параметра -q. Это наилучший вариант сохранения качества изображений PNG. Для преобразования загруженного изображения PNG из шага 1 введите:

      • cwebp -lossless logo.png -o https://www.digitalocean.com/logo.webp

      Следующая команда показывает, что размер изображения WebP без потерь (60 Кбайт) примерно в два раза меньше размера первоначального изображения PNG (116 Кбайт):

      • ls -lh logo.png https://www.digitalocean.com/logo.webp

      Output

      -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

      Преобразованные изображения WebP в директории /var/www/html/webp на 50% меньше исходных JPEG и PNG. На практике степени сжатия могут отличаться в зависимости от определенных факторов: уровень сжатия исходного изображения, формат файла, тип преобразования (с потерями или без потерь), процент качества и операционная система. При преобразовании большего числа изображений можно видеть изменения коэффициентов преобразования, связанные с этими факторами.

      Шаг 3 — Преобразование изображений JPEG и PNG в директории

      Написание скрипта упрощает процесс преобразования, т.к. устраняет ручное преобразование. Теперь напишем скрипт преобразования, который находит файлы JPEG и преобразовывает их в формат WebP с 90% качеством, а также преобразовывает файлы PNG в изображения WebP без потерь.

      Используя nano или предпочитаемый вами редактор, создайте скрипт webp-convert.sh в домашней директории вашего пользователя:

      Первая строка скрипта будет выглядеть следующим образом:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" )
      

      Эта строка включает следующие компоненты:

      • find: Эта команда будет искать файлы в конкретной директории.
      • $1: этот позиционный параметр указывает путь к директории изображений, взятый из командной строки. В конечном счете, он делает местоположение директории менее зависимым от местоположения скрипта.
      • -type f: данный параметр указывает команде find искать только обычные файлы.
      • -iname: данный тест соспоставляет имена файлов по заданной схеме. Нечувствительный к регистру тест -iname указывает команде find искать любое имя файла, заканчивающееся на .jpg (*.jpg) или .jpeg (*.jpeg).
      • -o: этот логический оператор указывает команде find вывести файлы, соответствующие первому тесту -iname (-iname "*.jpg") *или *второму (iname "*.jpeg").
      • (): скобки вокруг этих тестов, вместе с оператором -and, обеспечивают, что первый тест (т.е. -type f) всегда выполняется.

      Вторая строка скрипта будет преобразовывать изображения в формат WebP, используя параметр -exec. Общий синтаксис этого параметра — -exec command {} ;​​. Строка {} заменяется каждым файлом, который обрабатывает команда, а символ ; указывает команде find, где заканчивается команда:

      ~/webp-convert.sh

      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c 'commands' {} ;
      

      В данном случае для параметра -exec потребуется несколько команд для поиска и преобразования изображений:

      • bash: эта команда будет выполнять небольшой скрипт, создающий версию .webp файла, если она отсутствует. Этот скрипт будет передаваться в bash как строка благодаря опции -c.
      • 'commands': этот заполнитель — скрипт, который будет создавать версии .webp ваших файлов.

      Скрипт в 'commands' будет выполнять следующие функции:

      • Создавать переменную webp_path.
      • Проверять наличие версии .webp файла.
      • Создавать файл, если он отсутствует.

      Малый скрипт выглядит следующим образом:

      ~/webp-convert.sh

      ...
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;
      

      Элементы этого малого скрипта включают в себя следующее:

      • webp_path: эта переменная будет создана с помощью sed и соответствующего имени файла из команды bash, обозначенного по позиционному параметру $0. here string (<<<) будет передавать это имя в sed.
      • if [ ! -f "$webp_path" ]: данный тест будет определять наличие файла под названием "$webp_path", используя логический оператор not (!).
      • cwebp: эта команда будет создавать файл, если он отсутствует, используя параметр -q, чтобы не выводить результат.

      С этим малым скриптом вместо заполнителя 'commands', полный скрипт преобразования изображений JPEG теперь будет выглядеть следующим образом:

      ~/webp-convert.sh

      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      

      Для преобразования изображений PNG в WebP мы будем использовать тот же подход, с двумя отличиями: Во-первых, шаблон -iname в команде find будет "*.png". Во-вторых, команда преобразования будет использовать параметр -lossless вместо параметра качества -q.

      Завершенный скрипт выглядит следующим образом:

      ~/webp-convert.sh

      #!/bin/bash
      
      # converting JPEG images
      find $1 -type f -and ( -iname "*.jpg" -o -iname "*.jpeg" ) 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -q 90 "$0" -o "$webp_path";
      fi;' {} ;
      
      # converting PNG images
      find $1 -type f -and -iname "*.png" 
      -exec bash -c '
      webp_path=$(sed 's/.[^.]*$/.webp/' <<< "$0");
      if [ ! -f "$webp_path" ]; then
        cwebp -quiet -lossless "$0" -o "$webp_path";
      fi;' {} ;
      

      Сохраните файл и выйдите из редактора.

      Затем проверим скрипт webp-convert.sh на практике, используя файлы в директории /var/www/html/webp. Убедитесь, что файл скрипта является исполняемым, запустив следующую команду:

      • chmod a+x ~/webp-convert.sh

      Запустите скрипт в директории изображений:

      • ./webp-convert.sh /var/www/html/webp

      Ничего не произошло! Это потому, что мы уже преобразовали эти изображения на шаге 2. Далее скрипт webp-convert будет преобразовывать изображения при добавлении нами новых файлов или удалении версий .webp. Чтобы увидеть, как это работает, удалите файлы .webp, созданные нами на шаге 2:

      • rm /var/www/html/webp/*.webp

      Удалив все изображения .webp, снова выполните скрипт, чтобы убедиться, что он работает:

      • ./webp-convert.sh /var/www/html/webp

      Команда ls подтвердит, что скрипт успешно преобразовал изображения:

      • ls -lh /var/www/html/webp

      Output

      -rw-r--r-- 1 sammy sammy 7.4M Oct 28 23:36 image1.jpg -rw-r--r-- 1 sammy sammy 3.9M Feb 18 16:46 image1.webp -rw-r--r-- 1 sammy sammy 16M Dec 18 2016 image2.jpg -rw-r--r-- 1 sammy sammy 7.0M Feb 18 16:59 image2.webp -rw-r--r-- 1 sammy sammy 116K Jul 18 2017 logo.png -rw-r--r-- 1 sammy sammy 60K Feb 18 16:42 https://www.digitalocean.com/logo.webp

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

      Шаг 4 — Просмотр файлов изображений в директории

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

      Создание скрипта, который следит за нашей директорией изображений, может решить некоторые проблемы со скриптом webp-convert.sh в ходе его написания. Например, данный скрипт не будет идентифицировать, переименовали ли мы изображение. Предположим, у нас есть изображение foo.jpg, мы выполняем webp-convert.sh, переименовываем этот файл в bar.jpg, а затем снова выполняем webp-convert.sh — теперь у нас есть идентичные файлы .webp (foo.webp и bar.webp). Для решения этой проблемы, и чтобы не выполнять скрипт вручную, добавим watchers в другой скрипт. Наблюдатели (watchers) наблюдают за конкретными файлами или директориями и запускают команды в ответ на эти изменения.

      Команда inotifywait будет настраивать наблюдатели (watchers) в нашем скрипте. Эта команда является частью inotify-tools — пакета инструментов командной строки, который обеспечивает простой интерфейс подсистемы ядра inotify. Чтобы установить его на Ubuntu 16.04, введите:

      • sudo apt-get install inotify-tools

      В CentOS 7 пакет ​​​inotify-tools доступен в хранилище EPEL. Установите хранилище EPEL и пакет ​​​inotify-tools, используя следующие команды:

      • sudo yum install epel-release
      • sudo yum install inotify-tools

      Далее создайте скрипт webp-watchers.sh в домашней директории вашего пользователя с помощью nano:

      Первая строка скрипта будет выглядеть следующим образом:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1
      

      Эта строка включает следующие элементы:

      • inotifywait: эта команда следит за изменениями в определенной директории.
      • -q: данный параметр будет указывать команде inotifywait ограничивать свою активность и не генерировать много результатов.
      • -m: данный параметр будет указывать команде inotifywait работать без ограничения времени и не совершать выход после получения одного события.
      • -r: данный параметр будет настраивать наблюдатели рекурсивно, наблюдая за заданной директорией и всеми ее поддиректориями.
      • --format: данный параметр указывает команде inotifywait следить за изменениями с помощью имени события и следующего за ним пути файла. События, за которыми мы хотим наблюдать: close_write (инициируется, когда файл создается и полностью записывается на диск), moved_from и moved_to (инициируется, когда файл перемещается) и delete (инициируется, когда файл удаляется).
      • $1: этот параметр позиционирования хранит путь измененных файлов.

      Далее добавим команду grep, чтобы установить, являются ли наши файлы изображениями JPEG или PNG. Параметр -i будет указывать команде grep игнорировать регистр, -E будет указывать, что grep должна использовать расширенные регулярные выражения, а --line-buffered будет указывать grep передавать совпавшие строки в цикл while:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 | grep -i -E '.(jpe?g|png)$' --line-buffered
      

      Далее создадим цикл while с командой read. read будет обрабатывать событие, которое обнаружила команда inotifywait, и присваивать его переменной $operation, а путь обработанного файла — переменной $path:

      ~/webp-watchers.sh

      ...
      | while read operation path; do
        # commands
      done;
      

      Объединим этот цикл с остальным скриптом:

      ~/webp-watchers.sh

      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        # commands
      done;
      

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

      • Создайте новый файл WebP, если новый файл ​​изображения был создан или перенесен в целевую директорию.
      • Удалите файл WebP, если соответствующий файл изображения был удален или перенесен из целевой директории.​​

      Внутри цикла есть три основных раздела. Переменная webp_path будет хранить путь к версии .webp рассматриваемого изображения:

      ~/webp-watchers.sh

      ...
      webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
      

      Далее скрипт проверит, какое событие произошло:

      ~/webp-watchers.sh

      ...
      if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then
        # commands to be executed if the file is moved or deleted
      elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then
        # commands to be executed if a new file is created
      fi;
      

      Если файл был перенесен или удален, скрипт будет проверять наличие версии .webp. Если она существует, скрипт будет удалять ее с помощью rm:

      ~/webp-watchers.sh

      ...
      if [ -f "$webp_path" ]; then
        $(rm -f "$webp_path");
      fi;
      

      Для вновь созданных файлов сжатие будет осуществляться следующим образом:

      • Если соответствующий файл будет изображением PNG, скрипт будет использовать сжатие без потерь.
      • В противном случае скрипт будет использовать сжатие с потерями с помощью параметра -quality.

      Добавим команды cwebp, которые будут выполнять эти действия, в скрипт:

      ~/webp-watchers.sh

      ...
      if [ $(grep -i '.png$' <<< "$path") ]; then
        $(cwebp -quiet -lossless "$path" -o "$webp_path");
      else
        $(cwebp -quiet -q 90 "$path" -o "$webp_path");
      fi;
      

      Целиком файл webp-watchers.sh будет выглядеть следующим образом:

      ~/webp-watchers.sh

      #!/bin/bash
      echo "Setting up watches.";
      
      # watch for any created, moved, or deleted image files
      inotifywait -q -m -r --format '%e %w%f' -e close_write -e moved_from -e moved_to -e delete $1 
      | grep -i -E '.(jpe?g|png)$' --line-buffered 
      | while read operation path; do
        webp_path="$(sed 's/.[^.]*$/.webp/' <<< "$path")";
        if [ $operation = "MOVED_FROM" ] || [ $operation = "DELETE" ]; then # if the file is moved or deleted
          if [ -f "$webp_path" ]; then
            $(rm -f "$webp_path");
          fi;
        elif [ $operation = "CLOSE_WRITE,CLOSE" ] || [ $operation = "MOVED_TO" ]; then  # if new file is created
           if [ $(grep -i '.png$' <<< "$path") ]; then
             $(cwebp -quiet -lossless "$path" -o "$webp_path");
           else
             $(cwebp -quiet -q 90 "$path" -o "$webp_path");
           fi;
        fi;
      done;
      

      Сохраните и закройте файл. Не забудьте сделать его исполняемым:

      • chmod a+x ~/webp-watchers.sh

      Выполним этот скрипт в директории /var/www/html/webp в фоновом режиме, используя &. Также перенаправим стандартный результат и стандартную ошибку в ~/output.log, чтобы хранить результат в легкодоступном месте:

      • ./webp-watchers.sh /var/www/html/webp > output.log 2>&1 &

      На данный момент вы преобразовали файлы JPEG и PNG в директории /var/www/html/webp в формат WebP, а также настроили наблюдатели для выполнения этих действий с помощью скрипта webp-watchers.sh. Теперь пора изучить варианты показа изображений WebP посетителям вашего веб-сайта.

      Шаг 5 — Показ изображений WebP посетителям сайта с помощью элементов HTML

      На этом шаге мы расскажем, как показывать изображения WebP с элементами HTML. На данный момент в директории /var/www/html/webp должны быть версии .webp каждого тестового изображения JPEG и PNG . Теперь мы можем показывать их в поддерживаемых браузерах с помощью элементов HTML5 (<picture>) или модуля mod_rewrite Apache. На этом шаге мы используем элементы HTML.

      Элемент <picture> позволяет включить изображения напрямую в веб-страницы и задать несколько источников изображений. Если браузер поддерживает формат WebP, он будет загружать версию файла .webp вместо оригинального, что приведет к более быстрой загрузке веб-страниц. Следует отметить, что элемент <picture> широко поддерживается в современных браузерах, поддерживающих формат WebP.

      Элемент <picture> представляет собой контейнер с элементами <source> и <img>, указывающими на конкретные файлы. Если мы используем элемент <source> для указания на изображение .webp, браузер сможет его обработать. В противном случае браузер будет использовать файл изображения, заданный с помощью атрибута src в элементе <img>.

      Мы будем использовать файл logo.png из директории /var/www/html/webp, который мы преобразовали в https://www.digitalocean.com/logo.webp, например с помощью элемента <source>. Мы можем использовать следующий код HTML для показа https://www.digitalocean.com/logo.webp в любом браузере, поддерживающем формат WebP, и logo.png в любом браузере, не поддерживающем WebP или элемент <picture>.

      Создайте файл HTML в /var/www/html/webp/picture.html:

      • nano /var/www/html/webp/picture.html

      Добавьте в веб-страницу следующий код для показа https://www.digitalocean.com/logo.webp в поддерживающих браузерах с помощью элемента <picture>:

      /var/www/html/webp/picture.html

      <picture>
        <source  type="image/webp">
        <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      </picture>
      

      Сохраните и закройте файл.

      Чтобы убедиться, что все работает, перейдите в каталог http://your_server_ip/webp/picture.html. Вы должны увидеть тестовое изображение PNG.

      Теперь, когда вы знаете, как показывать изображения .webp напрямую из кода HTML, давайте посмотрим, как автоматизировать этот процесс с помощью модуля mod_rewrite Apache.

      Шаг 6 — Показ изображений WebP с помощью mod_rewrite

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

      Во-первых, создайте файл .htaccess в директории /var/www/html/webp с помощью следующей команды:

      • nano /var/www/html/webp/.htaccess

      Директива ifModule проверит, доступен ли if mod_rewrite; если доступен, то он может быть активирован при помощи RewriteEngine On. Добавьте эти директивы в .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On
        # further directives
      </IfModule>
      

      Веб-сервер сделает несколько проверок, чтобы установить, когда показывать изображения .webp пользователю. Когда браузер делает запрос, он включает в запрос заголовок, чтобы указать серверу, что именно браузер способен обрабатывать. В случае с WebP браузер будет направлять заголовок Accept, содержащий image/webp. Мы проверим, отправляет ли браузер этот заголовок с помощью RewriteCond, указывающего критерии, которые должны быть сопоставлены для выполнения правила RewriteRule:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{HTTP_ACCEPT} image/webp
      

      Необходимо отфильтровать все, кроме изображений JPEG и PNG. Снова используя RewriteCond, добавьте регулярное выражение (аналогично тому, что мы использовали в предыдущих разделах), чтобы сравнить запрошенную версию URI:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$
      

      Модификатор (?i) сделает сравнение нечувствительным к регистру.

      Чтобы проверить наличие версии .webp файла, используйте RewriteCond еще раз следующим образом:

      /var/www/html/webp/.htaccess

      ...
      RewriteCond %{DOCUMENT_ROOT}%1.webp -f
      

      Наконец, если все предыдущие условия выполнены, RewriteRule перенаправляет запрошенный файл JPEG или PNG в соответствующий файл WebP. Обратите внимание, что это перенаправление redirect происходит при помощи флага -R, а не перезаписи rewrite URI-адреса. Разница между перезаписью и перенаправлением — в том, что сервер будет направлять перезаписанный URI-адрес, не сообщая об этом браузеру. Например, URI-адрес покажет, что расширение файла — .png, но на самом деле это будет файл .webp. Добавьте RewriteRule в файл:

      /var/www/html/webp/.htaccess

      ...
      RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R]
      

      На данный момент раздел mod_rewrite в файле .htaccess завершен. Но что произойдет, если между вашим сервером и клиентом будет промежуточный сервер кэширования? Он может показать неправильную версию конечному пользователю. Именно поэтому стоит проверить, активирован ли модуль mod_headers, чтобы отправить заголовок Vary:Accept. Заголовок Vary указывает серверам кэширования (например, прокси-серверам), что тип содержания документа варьируется в зависимости от возможностей браузера, запрашивающего документ. Кроме того, ответ будет сгенерирован на основе заголовка Accept в запросе. Запрос с другим заголовком Accept может получить другой ответ. Данный заголовок важен, поскольку не позволяет показывать кэшированные изображения WebP в неподдерживаемых браузерах:

      /var/www/html/webp/.htaccess

      ...
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      

      Наконец, задайте тип MIME изображений .webp как image/webp в конце файла .htaccess, используя директиву AddType. Благодаря этому, изображения будут показаны с правильным типом MIME:

      /var/www/html/webp/.htaccess

      ...
      AddType image/webp .webp
      

      Это последняя версия нашего файла .htaccess:

      /var/www/html/webp/.htaccess

      <ifModule mod_rewrite.c>
        RewriteEngine On
        RewriteCond %{HTTP_ACCEPT} image/webp
        RewriteCond %{REQUEST_URI}  (?i)(.*)(.jpe?g|.png)$
        RewriteCond %{DOCUMENT_ROOT}%1.webp -f
        RewriteRule (?i)(.*)(.jpe?g|.png)$ %1.webp [L,T=image/webp,R]
      </IfModule>
      
      <IfModule mod_headers.c>
        Header append Vary Accept env=REDIRECT_accept
      </IfModule>
      
      AddType image/webp .webp
      

      Примечание. Можно объединить этот файл .htaccess с другим файлом .htaccess (при наличии). Если вы используете, например, WordPress, то следует скопировать этот файл .htaccess и вставить его в верхней части существующего файла.

      Давайте на практике сделаем то, что мы изучили на этом шаге. Если вы следовали указаниям в предыдущих шагах, то у вас должны быть изображения logo.png и https://www.digitalocean.com/logo.webp в /var/www/html/webp. Мы используем простой элемент <img>, чтобы добавить изображение logo.png на нашу веб-страницу. Создайте новый файл HTML для проверки конфигурации:

      • nano /var/www/html/webp/img.html

      Введите следующий код HTML в файл:

      /var/www/html/webp/img.html

      <img src="https://www.digitalocean.com/logo.png" alt="Site Logo">
      

      Сохраните и закройте файл.

      При посещении веб-страницы http://your_server_ip/webp/img.html в браузере Chrome вы увидите, что показанное изображение — это версия .webp (попробуйте открыть изображение в новой вкладке). Если вы используете Firefox, то автоматически получите изображение .png.

      Заключение

      В этом обучающем руководстве мы изучили основные методы работы с изображениями WebP. Мы рассказали, как использовать cwebp для преобразования файлов, а также два варианта показа этих изображений пользователям: элемент HTML5 <picture> и модуль Apache mod_rewrite.

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

      • Характеристики формата WebP и использование инструментов преобразования описаны подробнее в документации WebP.
      • Дополнительные сведения об использовании элемента см. в документации по MDN.
      • Чтобы полностью понять, как использовать mod_rewrite, см. документацию.

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



      Source link