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

внешний интерфейс Программа перевода самородков

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

  1. Вы активировали соединение, чтобы ускорить передачу?

использоватьСоветы по ресурсамдля экономии времени, напримерdns-prefetch(выполнение поиска DNS в фоновом режиме),preconnect(сообщает браузеру выполнить подтверждение соединения в фоновом режиме (DNS, TCP, TLS)),prefetch(скажите браузеру запросить ресурс) иpreload(предварительная выборка ресурсов без их выполнения).

В большинстве случаев мы по крайней мере будем использоватьpreconnectа такжеdns-prefetch, мы будем соблюдать осторожностьprefetchа такжеpreload; первый следует использовать только в том случае, если вы абсолютно уверены в том, какие ресурсы потребуются пользователю впоследствии (аналогично покупке каналов). Уведомление,prerenderУстарело и больше не поддерживается.

Note that even with preconnect and dns-prefetch, the browser has a limit on the number of hosts it will look up/connect to in parallel, so it's a safe bet to order them based on priority (thanks Philip!).

Обратите внимание, что даже используютpreconnectа такжеdns-prefetch, у браузера также есть ограничение на количество хостов, которые он будет искать или подключаться параллельно, поэтому лучше отсортировать их по приоритету (Спасибо Филипп!).

На самом деле, использование подсказок ресурсов, вероятно, самый простой способ повысить производительность.это реально работает. Что я должен использовать? Эдди Османиуже объяснил, мы должны заранее определить ресурсы, которые будут использоваться на текущей странице. Упреждающая выборка ресурсов, которые могут использоваться для будущих страниц, таких как пакеты Webpack, необходимые для страниц, которые пользователь еще не посещал.

Статья Эдди о приоритетах загрузки в ChromeШоуКак Chrome точно анализирует подсказки ресурсов, поэтому, как только вы решите, какие ресурсы важны для рендеринга страницы, вы можете дать им более высокий приоритет. Вы можете включить столбец «Приоритет» в форме веб-запроса Chrome DevTools (или Safari Technology Preview), чтобы увидеть приоритет ваших запросов.

the priority column in DevTools

Столбец «Приоритет» в DevTools. Изображение взято из: Бен Шварц,важная просьба

Например, поскольку шрифты часто являются важным ресурсом на странице, используйтеpreload Запрос браузера на загрузку шрифтаВсегда хорошая идея. вы также можетеДинамически загружать JavaScript, который эффективно выполняет ленивую загрузку. Точно так же, потому что<link rel="preload">получитьmediaсвойства, на которые вы можете опираться@mediaПравила запроса для выборочной предпочтительной загрузки ресурсов.

Немногонужно иметь в видуПодсказка: предварительная загрузка работает дляПереместить время загрузки ресурса в начало запросаНо эти кэшированные в предварительно загруженные ресурсы памяти обязаны отправлять запрошенные страницы, что означает, что запрос не может быть предварительно загруженными страницами. Более того,preloadТакже хорошо работает с HTTP-кешированием: сетевой запрос не отправляется, если кеш попадает.

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

Обратите внимание: если вы используетеpreload,as долженопределить иначеничего не загрузится,а также,При предварительной загрузке шрифтов, если нетcrossoriginсвойство будет получено дважды

  1. Вы оптимизировали производительность рендеринга?

использоватьCSS containmentИзолируйте дорогостоящие компоненты — например, ограничивая стили браузера, скрывая макет и отрисовку панелей навигации, охват сторонних компонентов. Убедитесь, что при прокрутке страницы или при анимации элемента нет задержек, постоянно достигающих 60 кадров в секунду. Если это невозможно, то, по крайней мере, постоянно держите FPS в диапазоне от 60 до 15. с помощью CSSwill-changeУведомляет браузер, какой атрибут какого элемента собирается измениться.

Кроме того, оцениваяПроизводительность рендеринга во время выполнения(Например,Использование инструментов разработчика). Доступно бесплатно после изучения Пола ЛьюисаКурс Udacity по оптимизации рендеринга в браузереи статья Эмили ХейманОптимизация веб-анимации и взаимодействиядля начала.

Опять же, у нас есть статья Сергея Чикуёнка о том, какПравильное использование анимации GPU.注意：对 GPU-composited 层的更改是наименее дорогой, если вы можете запустить компоновку с помощью Opacity и Warp, то вы на правильном пути.

  1. Вы оптимизировали процесс рендеринга?

Порядок, в котором компоненты отображаются на странице и то, как мы предоставляем ресурсы браузеру, важен, но мы также не можем его недооценивать.Воспринимаемая производительностьхарактер. Концепция включает в себя психологию ожидания, в первую очередь для того, чтобы клиенты были заняты, пока происходят другие дела. Это включает в себяУправление восприятием,начать первым,Завершено досрочноа такжеУправление толерантностью.

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

HTTP/2

  1. Перейдите на HTTPS, затем включите HTTP/2.

сделано в гуглеНа пути к более безопасной сетиИ после того, как все веб-страницы HTTP в Chrome были признаны «небезопасными», переход на [HTTP/2]((https://http2.github.io/faq/) был неизбежен. HTTP/2 [поддерживается очень хорошо] никуда не денется, и в большинстве случаев вам будет лучше с ним (не знаю, что это значит, помогите).Значительный прирост производительности.

HTTP/2

В конечном итоге Google планирует пометить все HTTP-страницы как небезопасные и изменить индикатор безопасности HTTP для проблемного HTTPS на красный треугольник. (Источник изображения)

Самая трудоемкая задача будетПереход на HTTPS, в зависимости от того, насколько велика ваша пользовательская база HTTP/1.1 (т. е. пользователи, использующие более старые ОС или браузеры), вам придется поставлять разные сборки для оптимизации производительности более старых браузеров, что требует от вас использованияРазличные процессы сборки. Примечание. Запуск процесса миграции и новой сборки может быть сложным и трудоемким. В оставшейся части этой статьи я предполагаю, что вы либо переключитесь на HTTP/2, либо уже переключились на HTTP/2.

  1. Правильно разверните HTTP/2.

опять таки,Обслуживание ресурсов по HTTP/2На данном этапе требуется частичная проверка того, как предоставляются ресурсные услуги. Вам нужно найти хороший баланс между пакетированием модулей и параллельной загрузкой нескольких небольших модулей. В итоге ещеЛучшая просьба - это отсутствие просьбы, однако наша цель — найти хороший баланс между быстрой передачей ресурсов и кэшированием.

С одной стороны, вы можете захотеть избежать слияния всех ресурсов, а не разбивать весь интерфейс на множество небольших модулей, сжимая их (как часть процесса сборки),Метод «разведки».Ссылайтесь и загружайте их параллельно. Изменения в одном файле не требуют повторной загрузки всей таблицы стилей или JavaScript. Это также [минимизирует время анализа] (https://css-s.com/musings-on-http2-and-bundling/) и снижает загрузку отдельных страниц.

с другой стороны,Упаковка по-прежнему имеет значение. первый,Компрессия пойдет на пользу. Сжатие больших пакетов выиграет от повторного использования словаря, а небольшие отдельные пакеты — нет. Стандартные задания для решения этой проблемы есть, но их сейчас недостаточно. Во-вторых, браузер такжеНе оптимизирован для такого рабочего процесса. Например, Chrome запуститмежпроцессного взаимодействия(IPC), которые линейно связаны с количеством ресурсов, поэтому, если страница содержит сотни ресурсов, это приведет к снижению производительности браузера.

Progressive CSS loading

Для достижения наилучших результатов при использовании HTTP/2 рассмотрите возможность использованияЗагружайте CSS постепенно, как рекомендовал Джейк Арчибальд из Chrome.

Можешь попробоватьЗагружайте CSS постепенно. Очевидно, что делая это, вы наносите вред пользователям HTTP/1.1, поэтому вам может потребоваться генерировать и обслуживать разные потоки сборки для разных браузеров как часть процесса развертывания, где все становится немного сложнее. вы можете использоватьОбъединение соединений HTTP/2, что позволяет использовать шардинг домена, предоставляемый HTTP/2, но добиться этого на практике сложно.

Как это сделать? Если вы используете HTTP/2, отправьте6-10 упаковокИдеальный компромисс (и неплохой для старых браузеров). Для вашего собственного веб-сайта вы можете найти лучший компромисс путем экспериментов и измерений.

  1. Поддерживают ли ваши сервисы и CDN HTTP/2?

不同的服务和 CDNs 可能对 HTTP/2 的支持情况不一样。 использоватьДостаточно ли быстр TLS?для просмотра дополнительных услуг или для быстрого просмотра производительности вашей службы и функций, которые вы хотите, чтобы она поддерживала.

Is TLS Fast Yet?

Is TLS Fast Yet? allows you to check your options for servers and CDNs when switching to HTTP/2.

Если вы хотите перейти на HTTP/2Достаточно ли быстр TLS?Позволяет просматривать дополнительные услуги и CDN.

  1. Вы начали сшивание OCSP?

пройти черезЗапустите сшивание OCSP на вашем сервисе, вы можете ускорить рукопожатие TLS. Протокол статуса онлайн-сертификата (OCSP) был предложен для замены протокола списка отзыва сертификатов (CRL). Оба протокола используются для проверки того, был ли отозван сертификат SSL. Однако протокол OCSP не требует, чтобы браузеры тратили время на загрузку и последующий поиск списков аутентификационной информации, что сокращает время рукопожатия.

  1. Вы приняли IPv6?

потому чтоIPv4 заканчиваетсяа основные мобильные сети быстро переходят на IPv6 (в СШАдостигать50% порог использования IPv6), [Обновите DNS до IPv6](((https://www.paessler.com/blog/2016/04/08/monitoring-news/ask-the-expert-current-status -on -ipv6) на будущее — это хорошая идея. Просто убедитесь, что ваша сеть поддерживает двойной стек, чтобы IPv6 и IPv4 работали одновременно. В конце концов, IPv6 не имеет обратной совместимости.исследование показывает, благодаря обнаружению «соседей» (NDP) и оптимизации маршрутов IPv6 ускоряет работу этих сайтов на 10–15 %.

  1. Используется ли сжатие HPACK?

Если вы используете HTTP/2, убедитесь, что ваш сервис отвечает на заголовки HTTP.Реализовать сжатие HPACK以减少不必要的开销。由于 HTTP/2 服务相对较新，它们可能不完全支持该规范，HPACK 就是一个例子。 можно использоватьH2specЭто отличный (хотя и технически подробный) инструмент для проверки.HPACK работает.

h2spec

H2spec (View large version) (Image source)

H2spec (негабаритный) (Источник изображения)

  1. Убедитесь, что безопасность вашего сервиса «пуленепробиваемая»

Все браузеры, реализующие HTTP/2, работают по протоколу TLS, поэтому вы можете избежать предупреждений безопасности или некоторых элементов на странице, которые не работают. перепроверь свойЗаголовки безопасности установлены правильно,Устранение известных уязвимостей,Проверьте свой сертификат. Кроме того, убедитесь, что все внешние плагины и скрипты отслеживания загружены через HTTPS, межсайтовые скрипты запрещены,Заголовок HTTP Strict Transport Securityа такжеЗаголовок политики безопасности контентаявляется правильной настройкой.

  1. Используются ли сервис-воркеры для кэширования и отката сети?

Никакая оптимизация производительности сети не работает быстрее, чем локальный кеш на компьютере пользователя. Если ваш сайт работает на HTTPS, используйте "Практическое руководство для сервисных работников"кэшировать статические ресурсы в сервис-воркере и сохранять автономные запасные варианты (даже автономные страницы) и извлекать их с компьютера пользователя, а не обращаться к сети. Также см. ДжейкаOffline Cookbookи бесплатные курсы Udacity"Автономное веб-приложение"Поддержка браузера? Как уже упоминалось, он получилШирокая поддержка(Chrome, Firefox, Safari TP, Samsung Internet, Edge 17+), но в любом случае это Интернет. Помогает ли это производительности?Да, это так.

тестировать и контролировать

  1. Вы тестировали в прокси-браузерах и старых браузерах?

Тестирования в Chrome и Firefox недостаточно. Посмотрите, как ваш сайт работает в прокси-браузерах и старых браузерах. Например, UC Browser и Opera Mini,Большая доля рынка в Азии(до 35%). в интересующей вас странеИзмерьте среднюю скорость сетиЭто позволяет избежать открытия «больших сюрпризов» в будущем. Тестируйте сетевую дросселирование и эмулировать высокое устройство DPI.BrowserStackКрасиво, но также для тестирования на реальных устройствах.

k6Позволяет писать сценарии тестирования производительности, такие как модульные тесты.

  1. Включен ли непрерывный мониторинг?

есть одинWebPagetestЧастные экземпляры всегда хороши для быстрого и неограниченного тестирования. Однако инструмент непрерывного мониторинга с автоматическими оповещениями даст вам более подробное описание производительности. Установите собственные временные маркеры пользователя, чтобы измерять и отслеживать определенные бизнес-показатели. Также рассмотрите возможность добавленияАвтоматические оповещения о снижении производительностиотслеживать изменения во времени.

Используйте решение RUM для мониторинга производительности с течением времени. Для инструментов автоматизированного нагрузочного тестирования, таких как модульное тестирование, вы можете использоватьk6Скриптовый API. Кроме того, можно понятьSpeedTracker,Lighthouseа такжеCalibre.

Быстрое решение

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

  1. Измеряйте опыт реальной среды и ставьте соответствующие цели. Хорошая цель: первый значимый розыгрыш

  2. Подготовьте важный CSS для вашего основного шаблона и включите его в структуру страницы.<head>середина. (Ваш бюджет 14 КБ). Для CSS/JS размер файлаДо 170 КБ в сжатом виде(0,8-1 МБ после декомпрессии).

  3. Ленивая нагрузка как можно больше сценариев, включая ваши собственные и сторонние сценарии, особенно в социальных сетях, видеоигустах и ​​трудоемкие сценарии JavaScript.

  4. Чтобы добавить подсказки ресурсов, используйтеdns-lookup,preconnect,prefetchа такжеpreloadУскорить передачу.

  5. Отсоедините веб-шрифты и загрузите их асинхронно (или переключитесь на системные шрифты).

  6. Оптимизируйте изображения и рассмотрите возможность использования WebP на важных страницах, таких как целевые страницы.

  7. Убедитесь, что заголовки кэша HTTP и заголовки безопасности установлены правильно.

  8. Включите сжатие Brotli или Zopfli на сервере. (Если это невозможно, не забудьте включить сжатие Gzip.)

  9. Если доступен HTTP/2, включите сжатие HPACK и включите мониторинг предупреждений о смешанном содержимом. Вы также можете включить сшивание OCSP, если вы используете LTS.

  10. Кэшируйте как можно больше ресурсов в кэше сервис-воркера, например шрифты, стили, JavaScript и изображения.

Контрольный список Скачать (PDF, Apple Pages)

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

Если вам нужны другие варианты, вы также можете обратиться кФронтенд-манифест для Рубликаи Джона Яблонски "Контрольный список веб-производительности для дизайнеров".

Пойдем

一些优化可能超出了您的工作或预算范围，或者由于需要处理遗留代码而显得过度滥用。 нет проблем!使用这个清单作为一个通用（并且希望是全面的）指南，并创建适用于你的环境的你自己的问题清单。但最重要的是，测试和权衡您自己的项目，以在优化前确定问题。祝大家 2018 年的性能大涨！

**Большое спасибо Гаю Поджарному, Йоаву Вайсу, Адди Османи, Артему Денисову, Денису Мишунову, Илье Пухальски, Джереми Вагнеру, Колину Бенделлу, Марку Земану, Патрику Минану, Леонардо Лосовизу, Энди Дэвису, Рэйчел Эндрю, Ансельму Ханнеманну, Патрику Хаманну, Энди Дэвис, Тим Кадлек, Рей Банго, Матиас Отт, Мариана Перальта, Филипп Теллис, Райан Таунсенд, Мохамед Хуссейн С.Х., Джейкоб Гросс, Тим Своллинг, Боб Виссер, Кев Адамсон, Алексей Куликов и Родни Рем также вычитывали эту статью. нашему удивительному сообществу за обмен методами и опытом, которые они изучили в своих усилиях по настройке производительности, для всех. Вы действительно удивительны! **

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

Категории