Контрольный список для настройки производительности внешнего интерфейса на 2018 год — часть 3

внешний интерфейс Программа перевода самородков
Контрольный список для настройки производительности внешнего интерфейса на 2018 год — часть 3

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

Статическая оптимизация ресурсов

  1. Используете ли вы Brotli или Zopfli для сжатия простого текста?

В 2005 году,Google запущен Brotli, новый формат сжатия данных без потерь с открытым исходным кодом, теперьПоддерживается всеми современными браузерами. На самом деле Brotli быстрее, чем Gzip и Deflate.Более эффективно. В зависимости от информации об установке сжатие может быть очень медленным. Но медленный процесс сжатия увеличивает степень сжатия и по-прежнему быстро распаковывает. Конечно, декомпрессия быстрая.

Браузеры примут его только в том случае, если пользователь заходит на сайт через HTTPS. Brotli еще не предустановлен на некоторых серверах, и его сложно развернуть без самостоятельной сборки NGINX и UBUNTU.Но это не сложно. Фактически,Некоторые CDN поддерживаются,четноеBrotli также можно включить через сервер без поддержки CDN..

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

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

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

Там в любом случае? Динамическое сжатие HTML на самом высоком уровне и уровнях Brotli 1–4. Используйте Brotli+Gzip для предварительного сжатия статических ресурсов. Также проверьте, поддерживает ли Brotli CDN (например,KeyCDN, CDN77, Быстро). Убедитесь, что сервер может обрабатывать содержимое с помощью Brotli или gzip. Если вы не можете установить или поддерживать Brotli на своем сервере, используйте Zopfli.

  1. Правильно ли оптимизированы изображения?пройти как можно дальшеsrcset,sizesа также<picture>использование элементаАдаптивные изображения. также через<picture>Элемент использует формат изображения WebP (Chrom, Opera,Firefox soonподдержку) или обратный вызов JPEG (см.code snippet) или с помощью согласования содержимого (используяAcceptинформацию заголовка).

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

вы все еще можете использоватьclient hints, но по-прежнему требует некоторой поддержки браузера. Недостаточно ресурсов для поддержки адаптивных изображений? использоватьгенератор точек остановаили похожиеCloudinaryТакие сервисы автоматически оптимизируют изображения. Опять же, во многих случаях просто используйтеsrcsetа такжеsizesбудет иметь хороший эффект.

On Smashing Magazine, we use the postfix -optдля имен изображений — например,brotli-compression-opt.png; whenever an image contains that postfix, everybody on the team knows that the image has already been optimized.

响应图像断点发生器

Генератор точек останова адаптивного изображенияАвтоматическая генерация изображений и генерация маркеров.

  1. Оптимизируйте свои изображения до следующего уровняТеперь, когда речь идет о важной целевой странице, критически важна скорость загрузки определенного изображения, убедитесь, что файлы JPEG являются прогрессивными, и используйтеAdept,mozJPEG(улучшить время начала рендеринга, манипулируя уровнем сканирования) илиGuetzliСжатие, новый кодировщик Google с открытым исходным кодом, ориентирован на сенсорную производительность и опирается на Zopfli и WebP. ТольконедостаточныйДа: медленное время обработки (одна минута на мегапиксель ЦП). Что касается png, мы можем использоватьPingo,а такжеsvgo, для обработки SVG мы используемSVGOилиSVGOMG

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

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

Как насчет GIF-изображений? мы можем использоватьЗаворачивать HTML5 видео, вместо тяжелой анимации GIF, которая влияет на производительность рендеринга и пропускную способность, используйте циклическое видео HTML5,<video>сделаюПроизводительность браузера низкая, и, в отличие от изображений, браузер не загружает<video>содержание. По крайней мере, мы можем использоватьLossy GIF, gifsicleилиgiflossyДобавьте сжатый GIF с потерями.

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

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

Zach Leatherman的字体加载策略综合指南

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

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

WOFF2Очень хорошо, вы можете использовать WOFF и OTF в качестве запасного варианта для браузеров, которые его не поддерживают. Также из книги Зака ​​Лезермана "Полное руководство по стратегиям загрузки шрифтов》 (фрагмент кода также можно использовать какФрагмент загрузки веб-шрифта) и использовать кэш сервера для постоянного кэширования шрифтов. Это похоже на маленькое достижение? Пиксель Амбахт имеетКраткие руководства и тематические исследования, чтобы ваши шрифты были в порядке.

Если вы не можете получить шрифты со своего сервера и полагаетесь на сторонний хост, обязательно используйтесобытие загрузки шрифта(или используйте для браузеров, которые его не поддерживаютЗагрузчик веб-шрифтов)FOUT лучше, чем FOIT; немедленно начать рендеринг текста и асинхронно загружать шрифты — также используйтеloadCSS. вы также можетеИзбавьтесь от локально установленных шрифтов ОС, вы также можете использоватьПеременная шрифт.

Какой может быть безупречная стратегия загрузки шрифтов? отfont-displayЗапустите, затем вернитесь к API загрузки шрифтов,потомНазад к Брэму СтейнуFont Face Observer(Спасибо, Джереми!) если вы заинтересованы в измерении производительности загрузки шрифтов с точки зрения пользователя, Андреас Маршке исследуетОтслеживание производительности с помощью Font API и UserTiming API

Также не забудьте включитьfont-display：optionalдескриптор для обеспечения гибкости и быстрого резервного копирования шрифтов,unicode-rangeРазбивка больших шрифтов на более мелкие шрифты для конкретного языка и Моника Динкулескусопоставитель стиля шрифта дляИспользуется для решения проблемы минимизации вибрации на макете из-за разницы в размерах двух шрифтов.

Оптимизация доставки

  1. Вы загружаете JavaScript асинхронно?Когда пользователь запрашивает страницу, браузер получает HTML и создает DOM, затем получает CSS и создает CSSOM, а затем создает дерево рендеринга, сопоставляя DOM и CSSOM. Если есть какой-либо JavaScript, который необходимо разрешить, браузер не начнет рендеринг страницы до тех пор, пока JavaScript не будет разрешен, что задержит рендеринг. Как разработчики, мы должны прямо сказать браузеру, чтобы он не ждал и немедленно начал отображать страницу. Способ сделать это для скриптов — использовать HTML вdeferа такжеasyncАтрибуты.

Оказывается, мыдолжен положитьdeferизменить наasync(поскольку асинхронность не поддерживается в ie9 и ниже). Также, как упоминалось выше, ограничьте влияние сторонних библиотек и скриптов, особенно использование кнопок социальных сетей и встроенных<iframe>Встроить (как карту).предельный размерПомогает предотвратить слишком большой размер библиотек JavaScript: если вы случайно добавите много зависимостей, инструмент уведомит вас и выдаст ошибку. ты можешь использовать этоСтатические кнопки социальных сетей(например, поSSBG)а такжестатическая ссылкавместо интерактивной карты.

  1. Вы лениво загружаете код, который стоит дорого и использует Intersection Observer?Если вам нужно лениво загружать изображения, видео, рекламные сценарии, сценарии A/B-тестирования или любые другие активы, вы можете использоватьIntersection Observer API, который обеспечивает способ асинхронного наблюдения за целевым элементом и элементом-предком или окном просмотра документа верхнего уровня. По сути, вам нужно создать новый объект IntersectionObserver, который получает функцию обратного вызова и набор параметров. Затем мы добавляем цель для наблюдения.

Функция обратного вызова выполняется, когда цель становится видимой или невидимой, поэтому, когда она перехватывает область просмотра, она может начать выполнять какое-то действие до того, как элемент станет видимым. На самом деле, мы можем точно контролировать, когда вызывается обратный вызов наблюдателя, используяrootMargin(корневой край) иthreshold(Число или массив чисел для представления процента видимости цели, прицеливания). Алехандро Гарсия Англада опубликовалПростое руководствоУдобный учебник о том, как на самом деле реализовать это.

Вы даже можете добавитьпрогрессивная загрузка изображенийчтобы перейти на следующий уровень. Как и в Facebook, Pinterest и Medium, вы можете начать с загрузки некачественных или размытых изображений, а затем, по мере загрузки страницы, использовать метод, предложенный Гаем Поджарным.LQIP (Low Quality Image Placeholders) technique(заполнители изображений низкого качества) заменяет их полноценными версиями.

Если технология улучшает пользовательский опыт, точка зрения другая, но она, безусловно, сокращает время до первого осмысленного рисования. Мы можем даже использоватьSQIPСоздавайте некачественные версии изображений в качестве заполнителей SVG для автоматизации. Эти заполнители могут быть встроены в HTML, потому что они естественным образом могут быть сжаты с помощью методов сжатия текста. Дин Хьюм в своей статьеОписаноКак реализовать эту технику с помощью наблюдателя за пересечением.

Как браузер поддерживает Чэнду?Decent, с уже поддерживаемыми Chrome, Firefox, Edge и Samsung Internet. WebKit в настоящее времяв разработке. Что если браузер не поддерживает это? Если наблюдатели пересечений не поддерживаются, мы все еще можемленивая загрузкаОдинpolyfillили сразу загрузите изображение. есть дажеlibrary.

Обычно мы используем ленивую загрузку для всех дорогостоящих компонентов, таких как шрифты, JavaScript, карусели, видео и фреймы. Вы даже можете настроить службы контента в зависимости от качества сети.API сетевой информации,особенноnavigator.connection.effectiveType(Chrome 62+) Значения RTT и нисходящего канала используются для более точного представления соединения и данных, которые может обрабатывать пользователь. Вы можете использовать его, чтобы полностью удалить автовоспроизведение видео, фоновые изображения или веб-шрифты для слишком медленных соединений.

  1. Вы загружаете критический CSS в первую очередь?Чтобы браузер начал отображать страницу как можно скорее,как правилоВесь CSS, необходимый для начала рендеринга первой видимой части страницы (называемый «критическим CSS» или «предыдущим CSS»), собирается и добавляется на странице.<head>, тем самым сокращая круговые поездки. Из-за ограниченного размера пакета подкачки на этапе медленного запуска бюджет критически важного CSS составляет около 14 КБ.

За пределами этого диапазона браузеру потребуются дополнительные обходы, чтобы получить больше стилей.CriticalCSSа такжеCriticalЭто можно сделать. Возможно, вам придется сделать это для каждого используемого вами шаблона. Если возможно, рассмотрите возможность использования Filament GroupУсловный встроенный метод.

Используя HTTP/2, критически важные CSS можно хранить в отдельном файле CSS ипуш серверапройти без увеличения размера HTML. Проблема в том, что проталкивание сервера оченьбеда, из-за многих проблем и условий гонки в браузерах. Он не поддерживается и имеет некоторые проблемы с кэшированием (см. [статью, представленную Hooman Beheshti] (Hooman Beheshti's presentation) 114 страниц). На самом деле этот эффект может бытьотрицательный, что приведет к раздуванию сетевого буфера, препятствуя доставке фактических кадров в документе. Кроме того, кажется, что сервер нажимает на горячие соединения из-за медленного запуска TCP.более эффективно.

Даже с HTTP/1 размещение критического CSS в отдельном файле в корневыгодный, иногда даже более эффективным, чем кэширование и встраивание. Когда Chrome запрашивает эту страницу, он отправляет еще одно HTTP-соединение с корневым каталогом, что устраняет необходимость в TCP-соединении для получения CSS (Спасибо Филипп!)

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

В настоящее время для сервера не существует метода быстрого ответа, чтобы узнать отправленный ресурс.Существует ли он уже в кеше пользователя, поэтому каждый визит пользователя продолжает продвигать ресурс. Поэтому вам может понадобиться создатьМеханизм push-уведомлений сервера HTTP/2 для мониторинга кеша. Если они извлечены, вы можете попытаться получить их из кеша, что позволит избежать повторного нажатия.

Но помни,новыйcache-digestТехнические характеристикиВместо того, чтобы вручную настраивать такой «кэш-осведомленный» сервер, в основном новый тип фрейма, объявленный в HTTP/2, может выражать содержимое этого хоста. Поэтому он также особенно полезен для CDN.

С динамическим содержимым, когда серверу требуется некоторое время для генерации ответа, браузер не может делать какие-либо запросы, поскольку он не знает ни о каких подресурсах, на которые может ссылаться страница. В этом случае мы можем разогреть соединение и увеличить размер окна перегрузки TCP, чтобы будущие запросы могли выполняться быстрее. Кроме того, вся встроенная конфигурация лучше подходит для отправки на сервер. На самом деле, Иниан ПарамешваранПодробное сравнение HTTP/2 Push и HTTP Preload, что довольно хорошо, со всеми деталями, которые могут вам понадобиться. Сервер нажимает или не нажимает? Вы можете прочитать книгу Колина Бенделла.Should I Push?.

Итог: в роли Сэма Сакконесказал,preloadНачинать загрузку ассетов выгодно ближе к первоначальному запросу, тогда как серверный пуш — это полный RTT (илиБолее, это зависит от времени отклика вашего сервера - если у вас есть сервер, вы можете предотвратить ненужные нажатия.

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

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

Мы можем создать поток из нескольких источников. Например, вместо того, чтобы предоставлять пустую оболочку пользовательского интерфейса и позволять ей заполнить ее, вы можете заставить сервер построить оболочку из кеша и передавать содержимое из сети. Как Джефф ПосникуказатьДа, если ваше веб-приложение работает на базе CMS, отображаемый на сервере HTML обрабатывается путем объединения частичных шаблонов, модель будет преобразована напрямую для использования потоковых ответов, а логика шаблона будет скопирована с сервера, а не с вашего сервера. Джейк АрчибальдThe Year of Web StreamsВ статье рассказывается о том, как его построить. Улучшение производительности очень очевидно.

Важным преимуществом потоковой передачи всего HTML-ответа является то, что HTML-код, отображаемый во время начального запроса навигации, может в полной мере использовать возможности потокового синтаксического анализатора HTML браузера. Блоки HTML, вставленные в документ после загрузки страницы (так же часто, как контент, заполняемый с помощью JavaScript), не могут использовать преимущества этой оптимизации.

Каков уровень поддержки браузера?Подробнее см. здесьChrome 52+, Firefox 57, Safari и Edge поддерживают этот API, а сервер уже поддерживает всесовременный браузер.

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

В настоящее время этот заголовок поддерживает только Chromium, Chrome для Android или расширение Data Saver на настольных устройствах. Наконец, вы также можете использовать сервис-воркеры и API сетевой информации для обслуживания изображений с низким/высоким разрешением в зависимости от типа сети.

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

Вы можете писать статьиАсинхронное сообществокнига! Технические специалисты, которые любят читать, входят в асинхронное сообщество. я хочу читать«Быстро начните программировать на Python — автоматизируйте утомительную работу», надеюсь, вам тоже понравится. Участвуйте в мероприятиях по обмену книгами.

Категории