Оригинальный адрес:Контрольный список производительности внешнего интерфейса 2019 — 3

Оригинальный автор:Vitaly Friedman

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:Starrier

Корректор:kikooo,Jingyuan0000

Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 3

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

[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 1[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 2 [перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 3[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 4[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 5[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть VI

содержание

Оптимизация ресурсов

Оптимизация ресурсов

17. Используйте Brotli или Zopfli для сжатия обычного текста

В 2015 году Googleвыпускать Brotli, новый формат данных без потерь с открытым исходным кодом, который теперьВсе современные браузеры поддерживают. На самом деле Brotli быстрее, чем Gzip и Deflate.эффективный много. Поскольку это в большей степени зависит от конфигурации, это сжатие может быть (очень) медленным, но более медленное сжатие означает более высокую степень сжатия. Тем не менее, он очень быстро распаковывается. так что вы можетеРассмотрите экономию средств Brotli для вашего веб-сайта.

Браузеры будут принимать этот формат только в том случае, если пользователь заходит на сайт через HTTPS. Сколько стоит? Brotli не предустановлен на некоторых серверах, поэтому настройка без самокомпилируемого Nginx относительно сложна. несмотря на это,Это не непреодолимая проблема,Например,Апач с 2.4.26Начиная с версии, он постепенно поддерживается. Благодаря тому, что Brotli поддерживается многими поставщиками, многие CDN также начинают его поддерживать (Akamai,AWS,KeyCDN,Fastly,Cloudlare,CDN77), вы даже (в связке с сервис-воркерами)Brotli можно включить на CDN, которые его не поддерживают..

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

В качестве альтернативы вы можете рассмотреть возможность использования форматов Deflate, Gzip и Zlib, которые кодируют ваши данные.Алгоритм сжатия Zopfli. Любой обычный ресурс, сжатый Gzip, можно закодировать с помощью улучшенного Zopfli Deflate, чтобы получить размер файла на 3-8% меньше, чем максимальная степень сжатия Zlib. Проблема в том, что для сжатия файла требуется примерно в 80 раз больше времени. Вот почему рекомендуется использовать Zopfli для активов, которые не сильно меняются, они предназначены для сжатия только один раз, но могут быть загружены несколько раз.

Если стоимость динамического сжатия статических ресурсов может быть уменьшена, усилия того стоят. И Brotli, и Zopfli можно использовать для произвольной полезной нагрузки в виде обычного текста — HTML, CSS, SVG, JavaScript и т. д.

Каковы меры противодействия?Предварительно сжимайте статические ресурсы с помощью Brotli + Gzip на самом высоком уровне., используя Brotli для динамического сжатия HTML на уровнях 1–4. Убедитесь, что сервер правильно обрабатывает содержимое протоколов Brotli или Gzip. Если вы не можете установить/обслуживать Brotli на своем сервере, используйте Zopfli.

18. Использование адаптивных изображений и WebP

Используйте как можно больше сsrcset,sizesсвойства адаптивных изображений и<picture>элементАдаптивные изображения. Конечно, вы также можете<picture>использование изображений WebP и возврат к механизмам JPEG или использование содержимого протоколаформат WebP(форматы поддерживаются в Chrome, Opera, Firefox 65, Edge 18) (см.сегмент кода) или использовать содержимое протокола (Acceptголова). Ире Адеринокун тоже оСупер подробное руководство по преобразованию изображений в изображения WebP..

Native Sketch поддерживает WebP и может использоватьПлагин WebP для PhtotshopЭкспорт изображений WebP из Photoshop.Конечно есть и другие варианты. Если вы используете WordPress или Joomla, есть также некоторые расширения, которые помогут вам легко реализовать поддержку WebP самостоятельно, например, это для WordPress.Optimusа такжеCache Enabler,Joomla, конечно, также имеет соответствующие расширения, которые могут обеспечить поддержку(используяCody Arsenault).

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

В Smashing Magazine мы используем-optсуффикс для имени изображения - например,brotli-compression-opt.png; таким образом, когда мы обнаружим, что изображение содержит этот суффикс, члены команды будут знать, что изображение было оптимизировано. ——невероятный! — Джереми ВагнерОпубликовал книгу о WebP, очень хорошо написанную.

Генератор конечных точек адаптивных изображенийИзображения и маркеры генерируются автоматически.

19. Правильно ли оптимизировано изображение?

Когда вы разрабатываете целевую страницу, загрузка определенных изображений должна быть быстрой, убедитесь, что JPEG загружается постепенно и проходит через [mozJPEG] илиGuetzliсжатие (улучшая время начала рендеринга за счет управления уровнями сканирования), новый кодировщик Google с открытым исходным кодом ориентирован на обеспечение производительности и использует преимущества, полученные от Zopfli и WebP.Единственным недостатком является: медленное время обработки (одна минута ЦП на мегапиксель). Для PNG мы можем использоватьPingo, для SVG мы можем использоватьSVGOилиSVGOMG. Если вам нужно быстро просмотреть, скопировать или загрузить все ресурсы SVG на веб-сайте, вы можете попробовать использоватьsvg-grabber.

Хотя в каждой статье по оптимизации изображений будет сказано, я все же хочу напомнить вам, что вы должны содержать свои векторные ресурсы в чистоте и компактности. Не забудьте очистить неиспользуемые ресурсы, удалить ненужные метаданные и количество точек пути в вашей иллюстрации (например, код SVG) (Спасибо, Джереми!)

Есть более продвинутые варианты, такие как:

использоватьSquooshСжатие с наилучшим уровнем сжатия (с потерями или без потерь). Настраивайте и управляйте изображениями.
использоватьГенератор точек останова адаптивного изображенияилиCloudinary,ImgixТакой сервис для автоматизации оптимизации изображений. Кроме того, во многих случаях использованиеsrcsetа такжеsizesдля лучших результатов.
Чтобы проверить эффективность тегирования ответов, вы можете использоватьimaging-heap(инструмент командной строки) для обнаружения влияния различных размеров окна просмотра и соотношения пикселей устройства.
использоватьlazysizesдля отложенной загрузки изображений и фреймов — библиотеки, которая инициирует любое изменение видимости путем обнаружения взаимодействия с пользователем (или IntersectionObserver, как мы обсудим позже).
Обратите внимание на изображения, которые загружаются по умолчанию, они могут никогда не использоваться — например, в каруселях, аккордеонах и галереях изображений.
Рассмотрите возможность отображения различных изображений в зависимости от типа запроса.Переключение изображений через свойство Sizes, например, операцияsizesдля обмена источником данных в компоненте лупы.
Чтобы предотвратить случайную загрузку изображений переднего плана и фона, установите флажокНесоответствия загрузки изображения.
Чтобы радикально оптимизировать хранилище, вы можете использовать новую функцию Dropbox.Формат (лептон)для выполнения среднего сжатия без потерь 22% в формате JPEG.
Уведомлениев свойствах CSSaspect-ratioАтрибутыа такжеintrinsicsizeАтрибуты, они позволяют вам устанавливать ширину и высоту изображений, поэтому браузеры заказываютИзбегайте беспорядка, предопределенный слот макета может быть зарезервирован заранее во время загрузки страницы.
Если вы любите приключения, для более быстрой передачи изображений по сети вы можете использовать фильтр реального времени на основе CDN.Edge workersдля завершения и изменения порядка потока HTTP/2. Пограничные работники используют модули потоковой передачи JavaScript, которыми вы можете управлять (они работают в CDN и могут изменять поток ответов), чтобы вы могли контролировать доставку изображений. По сравнению с сервисными работниками этот процесс занимает немного больше времени, потому что вы не можете контролировать процесс переноса, но он работает для пограничных рабочих. Таким образом, вы можете использовать их в неподвижных файлах JPEG, которые постепенно сохраняются для конкретной целевой страницы.

imaging-heap(инструмент командной строки для проверки эффективности загрузки в зависимости от размера окна просмотра и соотношения пикселей устройства) образец вывода, (источник изображения) (Подробный предварительный просмотр)

Будущее адаптивных изображений может быть связано с внедрениемПодсказка клиентаИ произошли большие перемены. Содержимое приглашения клиента — это поле заголовка HTTP-запроса, напримерDPR,Viewport-Width,Width,Save-Data,Accept(указать предпочтения формата изображения) и т. д. Они должны сообщать серверу данные о браузере пользователя, экране, подключении и т. д. Поэтому сервер может решить, как заполнить макет изображениями соответствующего размера, и обслуживать только изображения, необходимые для соответствующего формата. С помощью подсказок на стороне клиента мы переносим ресурсы из разметки HTML в протокол запроса-ответа между клиентом и сервером.

как Илья ГригориксказалТаким образом, подсказки на стороне клиента делают обработку изображений более полной — они не заменяют адаптивные изображения.<picture>Необходимые элементы управления оформлением представлены в HTML-разметке. Клиент предлагает предоставить аннотации для запрошенного изображения, чтобы автоматизировать выбор ресурсов. Service Workers предоставляют клиентам полные возможности управления запросами и ответами. Например, Service Worker может добавлять к запросам новые значения заголовка client-hint, переписывать URL-адреса и запросы изображений в CDN, корректировать ответы на основе ссылок, пользовательских настроек и т. д. Он работает не только для ресурсов изображений, но и для всех остальных запросов.

Для клиентов, поддерживающих клиентские подсказки, можно обнаружить, чтоНа образе сохранено 42% байт.и более 70% от 1 МБ+ байт. В журнале Smashing мы также можем обнаружить, чтоПовышение производительности на 19-32%. К сожалению, клиентские подсказки по-прежнему требуютсяПолучить поддержку браузера.Firefoxа такжеEdgeПоддержка его рассматривается. Но если вы предоставляете как обычные адаптивные теги изображений, так и подсказки на стороне клиента<meta>тег, браузер оценит тег изображения ответа и запросит соответствующее изображение, используя HTTP-заголовок подсказки на стороне клиента.

недостаточно? тогда вы можете использоватьразличный задний план изображение Технологиядля улучшения восприятия изображения. пожалуйста, помните,Работа с контрастом и размытие ненужных деталей(или удаление цветов) также уменьшает размер файла. Если вы хотите увеличить маленькую фотографию без потери качества, рассмотрите возможность использованияLetsenhance.io.

До сих пор эти оптимизации касались только основ. Эдди Османи опубликовалаОчень подробное руководство по базовой оптимизации изображений, это руководство подробно описывает сжатие изображений и управление цветом. Например, вы можете размыть ненужные части изображения (применив фильтр размытия по Гауссу), чтобы уменьшить размер файла, и вы даже можете удалить цвета или преобразовать изображение в черно-белое, чтобы еще больше уменьшить размер файла. Для фоновых изображений вполне приемлемо качество фотографии от 0 до 10%, экспортированное из Photoshop.Не используйте JPEG-XR в Интернете- «Программное декодирование JPEG-XR на ЦП сводит на нет потенциально положительный эффект экономии размера байта или даже хуже, особенно в случае SPA».

20. Правильно ли оптимизировано видео?

До сих пор мы рассматривали изображения, но избегали обсуждения преимуществ GIF. Честно говоря, вместо того, чтобы загружать сильно анимированные GIF-файлы, которые влияют на производительность рендеринга и пропускную способность, выберите Dynamic WebP (GIF в качестве запасного варианта) или используйтеЦикл видео HTML5заменить их. Да,с участием<video>браузерЧрезвычайно низкая производительность, и, в отличие от изображений, браузеры не выполняют предварительную загрузку.<video>содержание, но они, как правило, легче и меньше, чем GIF. Неужели нет другого пути? тогда, по крайней мере, мы можем пройтиLossy GIF,gifsicleилиgiflossyсжать GIF с потерями.

Первые испытания показалиimgВстроенное видео тега по сравнению с эквивалентным GIF, помимо проблем с размером файла,Первый отображает в 20 раз быстрее и декодирует в 7 раз быстрее. Хотя вПредварительный просмотр технологии Safariобъявлено в<img src=".mp4">техподдержка, но эта фича далеко не массовая, так что будет в ближайшее времяне будет принят.

Addy Osmani рекомендоватьЗамените анимированные GIF-файлы зацикленными встроенными видео. Значительная разница в размере файла (экономия 80%). (предварительный просмотр)

Внешний интерфейс — это область постоянного улучшения, и форматы видео постоянно реформировались на протяжении многих лет. Долгое время мы надеялись, что WebM станет линейкой формата и что WebP (по сути неподвижное изображение в видеоконтейнере WebM) заменит устаревший формат изображений. Хотя с годами WebP и WebMесть служба поддержки, но прорыва, на который мы надеялись, не произошло.

В 2018 году Альянс открытых медиа выпустилAV1формат видео. AV1 имеет сжатие, аналогичное кодировщику H.265 (улучшенная версия H.264), но в отличие от последнего, AV1 является бесплатным. Стоимость лицензии H.265 вынуждает поставщиков браузеров использовать AV1 с той же производительностью:AV1 (такой же, как H.265) имеет вдвое большую производительность сжатия, чем WebP..

AV1 может стать окончательным стандартом для онлайн-видео. (Источник изображения:Wikimedia.org) (Подробный предварительный просмотр)

На самом деле Apple сейчас использует формат HEIF и HEVC (H.265), и в последней версии iOS все фото и видео сохраняются в этих форматах вместо чистого JPEG. несмотря на то чтоHEIFа такжеHEVC (H.265)нет в открытом доступе в сети, ноБраузеры начали потихоньку поддерживать AV1. так что в вашем<video>можно добавить тегиAV1, так как все поставщики браузеров будут постепенно добавлять его поддержку.

В настоящее время наиболее широко используется формат H.264, который обслуживается файлами MP4, поэтому убедитесь, что ваши файлы MP4 используютmultipass-encodingобработанный, сfrei0r iirblurЗапутанный (если применимо),moov atom metadataтакже перемещен в заголовок файла, а ваш серверпринять байтовую услугу. Борис Шапира предоставилТочное описание FFmpegдля максимальной оптимизации видео. Конечно, было бы также полезно предоставить формат WebM в качестве альтернативы.

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

Zach Leatherman’s Comprehensive Guide to Font-Loading Strategies

Зак ЛезерманПолное руководство по стратегиям загрузки шрифтовПредоставляет более десятка вариантов переноса веб-шрифтов.

21. Оптимизированы ли веб-шрифты?

Первый вопрос, который стоит задать: можете ли выПредпочтительный системный шрифт пользовательского интерфейса. Если это не так, то велика вероятность того, что предоставленные вами веб-шрифты содержат глифы, дополнительные функции или веса шрифта, которые не используются системным шрифтом. Вы можете попросить поставщика шрифтов сгруппировать шрифты, или, если вы используете шрифт с открытым исходным кодом, вы можете использоватьGlyphhangerилиFontsquirrelПодставьте их сами. Вы даже можете использовать Питера Мюллера.subfont, инструмент командной строки, который автоматизирует весь ваш процесс, статически анализирует ваши страницы, создает лучший подмножество веб-шрифтов и внедряет их на ваши страницы.

Поддержка WOFF2Лучше всего то, что вы можете использовать WOFF в качестве запасного варианта для браузеров, которые не поддерживают WOFF2 — в конце концов, системные шрифты будут более дружественными к устаревшим версиям браузеров. Веб-шрифты загружаются смного, много, многоОпции. Вы можете получить его у Зака Лезермана.Полное руководство по стратегиям загрузки шрифтов" для выбора стратегии (фрагменты кода также можно найти вЗагрузка веб-шрифтанайти в).

Теперь опция должна быть лучшеСочетание с критическим FOFTpreloadа такжеМетод «Компромисс». Оба они используют двухэтапный рендеринг для постепенного обслуживания веб-шрифтов — сначала небольшой надмножество, необходимое для быстрого и точного рендеринга страницы с помощью веб-шрифтов, а затем асинхронно загружает остальные, с той разницей, что технология «Компромисс» работает только всобытие загрузки шрифтаЕсли полифиллы не поддерживаются, они загружаются асинхронно, поэтому по умолчанию загружать полифилы не нужно. Нужен быстрый старт? У Зака Лезермана есть один23-минутные учебные пособия и тематические исследования для быстрого стартачтобы помочь вам использовать шрифты.

В общем, используйтеpreloadПодсказки ресурсов для предварительной загрузки шрифтов — хорошая идея, но в разметку необходимо включить ссылки на CSS и JavaScript. В противном случае загрузка шрифта занимает время при первом рендеринге. несмотря на это,селективныйРекомендуется тщательно выбирать важные документы. Например, рендеринг важных файлов поможет вам избежать визуализаций и деструктивных файлов обновления текста. В заключение Зак предлагаетПредварительно загрузите один или два шрифта из каждого семейства. Также имеет смысл лениво загружать некоторые шрифты, если эти шрифты не критичны.

Никто не любит ждать, пока появится контент. использоватьfont-displayCSS-дескриптор, мы можем управлять поведением загрузки шрифта и сделать содержимое доступным для просмотранемедленночитать(font-display: optional), или почтинемедленноЧитать (font-display: swap). Однако, если вы хотитеИзбегайте перекомпоновки текста, нам все еще нужно использовать API загрузки шрифтов, особенноgroup repaints, или когда вы используете сторонний хост. если ты не можешьGoogle Fonts с работниками Cloudflare. Обсудить шрифты Google: рассмотрите возможность использованияgoogle-webfonts-helper, простой способ самостоятельного размещения Google Fonts. Если сможешь, тоРазместите свои шрифты самостоятельноДаст вам максимальный контроль над шрифтом.

В общем, если вы выбираетеfont-display: optional, тогданужно сдаться preload, потому что он инициирует запрос веб-шрифта заранее (что может привести к перегрузке сети, если у вас есть другие ресурсы критического пути, которые необходимо извлечь).preconnectЗапросы междоменных шрифтов могут быть получены быстрее, но используйте их с осторожностьюpreload, так как предварительная загрузка шрифтов из разных доменов может привести к гонкам в сети. Все эти техники описаны в книге Зака.Загрузка веб-шрифта.

Кроме того, если пользователь включил настройки специальных возможностейReduce MotionИли выберите режим защиты данных (подробнее см.Save-Data header), то лучше отказаться от использования веб-шрифтов (по крайней мере, при рендеринге второго прохода). или когда у пользователя медленная ссылка (черезAPI сетевой информации).

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

Существует ли идеальная стратегия загрузки веб-шрифтов? Подмножество шрифтов, готовых к двухпроходному рендерингу, используйтеfont-displayдескрипторы для их объявления, используйте API загрузки шрифтов для группировки перерисовок и сохранения шрифтов в постоянном кэше сервис-воркеров. При необходимости вы можете вернуться к Брэму Штейну.Font Face Observer. Если вам интересно изучить производительность загрузки шрифтов, Андреас Маршке просмотрелПроизводительность с использованием Font API и UserTiming API.

Наконец, не забудьте присоединитьсяunicode-range, чтобы разбить большой шрифт на более мелкие шрифты для конкретного языка, используя метод Моники Динкулеску.font-style-matcherчтобы свести к минимуму резкие изменения в макете из-за несоответствия размера резервных шрифтов и веб-шрифтов.

[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 1[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 2 [перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 3[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 4[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть 5[перевод]Годовой отчет по оптимизации производительности интерфейса пользователя за 2019 г. — часть VI

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

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.