Контрольный список оптимизации производительности внешнего интерфейса на 2018 г.

Предисловие: Эту статью я перевел вместе со статьей в плане перевода Nuggets (спасибо переводу Nuggets), я перевел третью часть, а затем откорректировал вторую часть, эта статья все еще является относительно новой для технологии оптимизации производительности переднего плана и всеобъемлющей , поэтому я решил прочитать английский оригинальный текст самостоятельно, а затем использовал интеллект-карту, чтобы организовать ключевые моменты.Английский оригинальный текст все еще довольно длинный, поэтому

• Если хочешьгрубыйТе, кто понимает содержание этой статьи, могут непосредственно просмотреть ментальную карту, которую я резюмировал.
• Если вы читаете интеллект-картуЯ думаю, что эта статья будет полезна для вас, вы можете просматривать мои собственные переводы и систематизировать статьи на основе переводов других людей
• если тыНет трудностей в чтении по-английски,а такжеЯ думаю, что мой перевод не очень хорош, вы можете прочитать прямоАнглийский оригинал

Рекомендуется, если у вас есть достаточно времени, прочитать оригинальный английский текст самостоятельно.Эта статья основана на четырех статьях, переведенных Nuggets +Другие переведенные статьи+ Мой собственный перевод и модификация. Поскольку все знают, что в переводе будут ошибки, вы можете указать, что я не гарантирую, что перевод будет без ошибок, но я старался изо всех сил, поэтому вы можете прочитать английский оригинал. пишите напрямую! ! Добро пожаловать, чтобы прочитать оригинальный английский текст напрямую! ! Добро пожаловать, чтобы прочитать оригинальный английский текст напрямую! !

Мы все знаем, что производительность важна, но всегда ли мы знаем, где находится узкое место нашей оптимизации производительности? Это дорогой JavaScript? Медленны ли веб-шрифты? Или более крупная картина? Или рендеринг слишком медленный? Tree-shaking (удаление бесполезного кода), подъем области (подъем области), разделение кода (загрузка по требованию), наблюдатель пересечения и подсказки клиентам, сдерживание CSS, HTTP/2 и работники службы — все это методы, которые полезны для оптимизации производительности. из. И, самое главное,Где мы начинаем улучшать нашу работу?? И как создать долгосрочный и эффективный механизм работы.

Примечание переводчика:

• tree-shaking:tree-shakingэто новая функция, представленная Webpack 2,tree-shakingЭто метод устранения мертвого кода (DCE, устранение мертвого кода), но он отличается от традиционного метода.tree-shakingНайдите нужный код и внедрите окончательный результат; традиционный DCE находит код, который невозможно выполнить, и удаляет его из AST. ——Как оценить новую технологию оптимизации кода Tree-Shaking, представленную в Webpack 2?
• scope hoisting:scope hoistingЭто новая функция Webpack 3, также переводится как «расширение масштаба». Webpack оборачивает все модули функциями, а затем сам реализует набор функций загрузки, выполнения и кэширования модулей.Эта структура используется для упрощения реализации разделения кода (включая загрузку по требованию), горячей замены модулей и других функций. ——Новое в Webpack 3: Подъем области видимости
• code-splitting: для больших веб-приложений помещать весь код в один файл очень неэффективно, особенно при загрузке некоторого блокирующего кода, который используется только при определенных обстоятельствах. В Webpack есть функция, которая разделяет ваш код на куски, которые можно загружать по запросу. Эта функцияcode-splitting. ——Загрузка по требованию с разделением кода в Webpack
• intersection observer: Он может автоматически «наблюдать», виден ли элемент или нет.Поскольку суть видимого (видимого) заключается в том, что целевой элемент и окно просмотра создают область пересечения, этот API называется «обозреватель пересечения». ——Руководство по использованию IntersectionObserver API
• clients hints: Автоадаптивное изображение ——Automatic responsive images with Client Hints
• CSS containment: новое свойство CSS Containment позволяет разработчикам ограничивать область применения стилей браузера, макета и рисунков. ——CSS Containment in Chrome 52
• service workers: реализовать автономные страницы ——Service worker concepts and usage

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

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

Таким образом, мы должны помнить об оптимизации производительности - с начала проекта до окончательного выпуска веб-сайта. Итак, мы создали список оптимизаций производительности. (Надеюсь, беспристрастный и объективный) Контрольный список производительности внешнего интерфейса на 2018 год — может помочь вам решить проблемы оптимизации вашего веб-сайта, например, как обеспечить более быстрое время отклика, плавное взаимодействие с пользователем и пропускную способность, которая не истощает пользователей.

(Вы также можете просто загрузить контрольный список оптимизации производительности внешнего интерфейса за 2018 г.PDF-версия(0,129 МБ) или скачатьВерсия страниц Apple(0,236 МБ))

Подготовка: планируйте и измеряйте

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

1. Повышение осведомленности об оптимизации производительности

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

Будь то мобильный или настольный компьютер, вам необходимо проводить эксперименты с производительностью и измерять результаты. Он создает тематическое исследование, адаптированное для вашей компании, с реальными данными. Кроме того, хорошо использоватьWPO StatsДанные тематических исследований и экспериментов, опубликованные на сайте , могут помочь вам лучше понять базовую взаимосвязь между производительностью и бизнесом, а также влияние производительности на взаимодействие с пользователем и бизнес-показатели. Просто указать производительность недостаточно — вам также необходимо установить некоторые измеримые и отслеживаемые цели для наблюдения за производительностью.

2. Цель: быть как минимум на 20% быстрее своего самого быстрого конкурента.

согласно спсихологические исследования, если вы хотите, чтобы пользователи чувствовали, что ваш сайт быстрее, чем сайты ваших конкурентов, вам нужно быть как минимум на 20% быстрее, чем они. Изучите своих основных конкурентов, узнайте об их эффективности на мобильных устройствах и компьютерах и установите порог, по которому вы сможете их обойти. Чтобы получить точные результаты и цели, начните с изучения своей аналитики, чтобы увидеть, что делают ваши пользователи. Вы можете смоделировать пользовательский интерфейс 90-го процентиля для тестирования, собрать данные, а затем построитьлист, то минус 20 % — ваша цель (т.бюджет производительности). Теперь у вас есть некоторые измеримые данные перед тестированием.

Если вы заботитесь о бюджете и пытаетесь получить самое быстрое время взаимодействия с самым маленьким скриптом, то вы начали свой «путешествие по оптимизации внешнего интерфейса». Лара Хоган о том, как использовать бюджеты производительности для подхода к дизайнугидможет предоставить полезные рекомендации для дизайнеров, аКалькулятор бюджета эффективностиа такжеBrowser Calories может помочь составить бюджет (спасибоKarolina Szczurпоставка).

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

Кроме того, как предложил Патрик Минан,Лучше всего настроить очередь загрузки в процессе проектирования и знать о плюсах и минусах этих заказов.. Вам нужно расставить более важные приоритеты и определить порядок их приоритетов, а также вы должны знать, какие из них можно отложить. В идеале очередь также должна отражать порядок загрузки JS и CSS, если она разработана, обрабатывать их в процессе сборки несложно. Кроме того, следует учитывать «промежуточное состояние» страницы, пока она еще загружается (например, когда веб-шрифт еще не закончил загрузку).

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

3. Выберите правильную меру

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

Впервые существует разница между рендерингом контента, визуально полным и интерактивным временем.. От:@denar90

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

• первый действительный рендер(FMP означает время, необходимое для появления основного контента на странице),
• Важные моменты рендеринга(время, необходимое для отображения самой важной части страницы),
• интерактивное время(TTI означает, что макет страницы стабилизировался, основные шрифты страницы видны, и основной процесс может в достаточной степени обрабатывать ввод пользователя — базовая отметка времени — это то, что пользователь может щелкнуть и взаимодействовать с пользовательским интерфейсом),
• входной ответ, время, за которое интерфейс реагирует на действия пользователя,
• Speed Index, который измеряет, насколько быстро заполняется содержимое страницы. Чем ниже оценка, тем лучше,
• пользовательская мера, определяемый потребностями вашего бизнеса и пользовательским опытом.

Стив Содерс даКаждая метрика подробно описана. Во многих случаях, в зависимости от сценария использования вашего приложения,Интерактивное время и входной ответбудет самым критичным. Но эти показатели могут различаться: например, критические ответы на ввод, использование памяти и время взаимодействия более важны для пользовательского интерфейса Netflix TV.

4. Собирайте данные с устройств, используемых репрезентативными пользователями

Чтобы собрать точные данные, нам необходимо как можно полнее выбрать тестируемые устройства. Предпочтительно Moto G4, устройство Samsung среднего класса или обычное устройство, такое как Nexus 5X. Если у вас нет под рукой устройства, вы можете использовать дросселирование ЦП (замедление в 5 раз), чтобы ограничить скорость сети (например, 150 мс задержка туда-обратно, ниже 1,5 Мбит/с и выше 0,7 Мбит/с), чтобы эмулировать мобильную работу на настольное устройство. Наконец, переключитесь на обычные 3G, 4G и Wi-Fi. Чтобы сделать производительность более заметной, вы даже можете использовать2G илиДроссельная сеть 3G, для более быстрого тестирования.

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

• Пассивные инструменты мониторинга,Взаимодействие с пользователем может быть смоделировано запросом (Комплексный тест,Такие какLighthouse,WebPageTest)
• Инструменты активного мониторинга,те, которые постоянно записывают и оценивают взаимодействие с пользователем (настоящий мониторинг пользователей,Такие какSpeedCurve,New Relic- Оба инструмента также предоставляют комплексные тесты)

Первый особенно полезен во время разработки, потому что он отслеживает использование продукта. Последнее полезно для долгосрочного обслуживания, поскольку оно может помочь вам понять узкие места в производительности, которые возникают при фактическом посещении вашего сайта. Пассивные и активные инструменты мониторинга производительности работают вместе, чтобы предоставить полную картину производительности приложений, используя встроенные API-интерфейсы RUM для времени навигации, времени ресурсов, времени рисования, длительных задач и многого другого. Например, вы можете использоватьPWMetrics,Calibre,SpeedCurve,mPulse,Boomerangа такжеSitespeed.io, которые являются отличным выбором для инструментов мониторинга производительности.

Примечание. Всегда безопаснее выбирать ограничитель сетевого уровня вне браузера, например, у DevTools есть проблемы с взаимодействием с HTTP/2 push из-за того, как он реализован (спасибо, Йоав!).

5. Делитесь контрольными списками производительности с коллегами

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

Ставьте реалистичные цели

6. Время отклика управления в пределах 100 мс, частота кадров управления на уровне 60 кадров в секунду

Чтобы взаимодействие было плавным, у интерфейса есть 100 мс для ответа на ввод пользователя. Еще немного, и пользователь будет воспринимать приложение как медленное.RAIL, ориентированная на пользователя модель производительностипредоставит вам надежные цели. Чтобы страница могла получить ответ менее чем за 100 мс, она должна вернуть управление основному потоку не позднее, чем через 50 мс.Расчетное время задержки вводаСкажите нам, сможем ли мы достичь этого порога, в идеале он должен быть ниже 50 мс. Для мест, требующих большой производительности, таких как анимация, наилучшей практикой является максимальная оптимизация там, где ее можно оптимизировать; минимизация накладных расходов на производительность там, где оптимизация невозможна.

При этом каждый кадр анимации должен завершаться за 16 мс, в результате получается 60 кадров в секунду (1 секунда ÷ 60 = 16,6 мс) — предпочтительно 10 мс. Поскольку браузеру нужно время, чтобы отобразить новый кадр на экране, ваш код должен завершиться в течение 16,6 мс после срабатывания.оставаться оптимистомИ используйте свое свободное время с умом. Очевидно, что эти цели относятся к производительности во время выполнения, а не к производительности под нагрузкой.

7. Индекс скорости

Хотя этого может быть трудно достичь, хорошей конечной целью является рендеринг первого эффективного рендеринга менее чем за 1 секунду ииндикатор скоростиниже 1250. Поскольку мы моделируем задержку в оба конца 400 мс и скорость передачи 400 КБ на эталонном телефоне Android за 200 долларов (например, Moto G4) и медленной сети 3G, наша цель —Время взаимодействия менее 5 секунд, а время повторного посещения составляет менее 2 с.

Обратите внимание, что когда речь идет оинтерактивное время, лучше различатьПервое взаимодействие и постоянное взаимодействиево избежание недопонимания между ними. Первый — это самая ранняя точка, которая появляется после того, как основной контент был отрендерен (окну требуется не менее 5 секунд, прежде чем страница начнет отвечать). Последнее является точкой, в которой ожидается, что страница всегда будет реагировать на ввод.

Первые 14~15 КБ загрузок HTMLявляется наиболее важным блоком полезной нагрузки- первый цикл времени (который получается в течение одной секунды на 400 мс задержка туда и обратно ниже) часть бюджета единственной доставки. В общем, для достижения этих целей мы должны сделать это в критическом размере файла.170 Кб после максимального сжатия бюджета(0,8-1 МБ без сжатия), для разбора и компиляции уже требуется до 1 с (в зависимости от типа ресурса). Немного выше, чем это нормально, но держите эти значения как можно ниже.

Тем не менее, можно увеличить размер бюджета привязки. Например, вы можете установить бюджет производительности в активности основного потока браузера, например, время отрисовки перед началом рендеринга илиОтслеживание внешнего процессора. картинаCalibre,SpeedCurveа такжеBundlesizeЭти инструменты могут помочь вам контролировать свой бюджет и интегрироваться в процесс сборки.

Определить среду

8. Хорошо поработайте над подбором инструментов сборки и сборки (подходящих для себя) инструментов сборки

Не обращайте слишком много внимания на эти крутые технологические стеки в наши дни.. Используйте свой инструмент сборки в зависимости от вашего проекта, будь то Grunt, Gulp, Webpack, Parcel или комбинация инструментов. Пока вы можете быстро получить результаты и убедиться, что ваш процесс сборки в порядке. Затем вы можете выбрать этот инструмент сборки.

9. прогрессивное улучшение

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

10. Выберите надежный эталон производительности

Существует так много неизвестных, влияющих на загрузку - сеть, тепловая защита, перезапуск кеша, сторонние скрипты, режим блокировки парсера, чтение и запись на диск, джанк IPC, установка плагинов, процессор, ограничения оборудования и памяти, кэш L2/L3, RTTS, различия в поведении при загрузке изображений, веб-шрифтов --JavaScript стоит больше всего, веб-шрифты блокируют рендеринг по умолчанию, а загрузка изображений занимает много памяти. По мере того, как узкие места в производительностисервер к клиенту, мы, как разработчики, должны более тщательно подумать обо всех этих неизвестных.

С бюджетом в 170 КБ, который уже включает критический путь HTML/CSS/JavaScript, маршрутизаторы, управление состоянием, утилиты, фреймворки и логику приложения, нам пришлось тщательноПроверьте стоимость передачи по сети, время синтаксического анализа/компиляции и время выполнения, чтобы выбрать наш фреймворк..

Как говорит Себ Маркбейджуказал, хороший способ измерить начальную стоимость кадра — сначала отобразить представление, затем удалить его, а затем снова отобразить, так как это говорит о том, как масштабируется кадр.

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

Не каждому проекту нужен фреймворк. На самом деле некоторые проектыНекоторые фреймворки можно полностью удалить и воспользоваться преимуществами. Однажды выбрав фреймворк, вы будете использовать его как минимум несколько лет. Итак, если вам нужно его использовать, убедитесь, что ваш выбор сделан черезтщательно продуманныйа такжеполностью понять это. Учитывайте хотя бы стоимость общего размера + время начального парсинга, прежде чем делать выбор: облегченные варианты вродеPreact,Inferno,Vue,SvelteилиPolymerВсе хорошо. Базовый размер фреймворка будет определять ограничения для кода вашего приложения. .

Имейте в виду, что на мобильных устройствах ожидайте замедление в 4-5 раз по сравнению с настольными компьютерами. Потому что мобильные устройства имеют разные характеристики графического процессора, процессора, памяти и аккумулятора. Время синтаксического анализа на мобильном устройствеНа 36 % выше, чем на настольном ПК.. Поэтому всегда естьСреднее тестирование на устройстве.

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

PRPLПредставляет отправку ключевых ресурсов, отрисовку начальных маршрутов, предварительное кэширование оставшихся маршрутов и ленивую загрузку необходимых оставшихся маршрутов.

оболочка приложенияпредставляет собой минимальный пользовательский интерфейс, основанный на HTML, CSS и JavaScript.

11. Нужно ли вашему проекту использовать AMP и моментальные статьи?

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

В зависимости от ваших организационных приоритетов и стратегии вы можете рассмотреть возможность использования GoogleAMPИ FacebookInstant Articlesили яблокоApple News. Вы можете добиться высокой производительности и без них, но AMP предоставляет бесплатную платформу производительности сети доставки контента (CDN), а мгновенные статьи повысят вашу видимость и производительность на Facebook.

Для пользователей основным преимуществом этих технологий является производительность, поэтому иногда они предпочитают ссылки AMP-/Apple News/Instant Pages «обычным» и потенциально раздутым страницам. Для сайтов с большим объемом контента, которые обрабатывают много контента третьего метода, эти параметры значительно ускоряют время рендеринга.

Для веб-мастеров эти стили доступны на разных платформах иУлучшенная видимость в поисковых системах. Вы также можете повторно использовать AMP в качестве источника данных PWA для созданияПрогрессивные веб-AMP. Каковы недостатки? Очевидно, в стенном районе, где разработчики могут создавать и поддерживать единую версию разделения контента и предотвратить мгновенные статьи Apple Newsнет фактических URL-адресов. (Спасибо, Эдди, Джереми.)

12. Используйте CDN с умом

Согласно количеству динамических данных, которые у вас есть, вы можете упаковать часть контента.генератор статических сайтовНапример, статические файлы, сгенерированные Jekyll и Hexo, затем отправляйте статические файлы в CDN, и, наконец, CDN просто предоставляет статическую версию статических файлов. Таким образом, это позволяет избежать инициирования запросов на чтение и запись в базу данных. Вы даже можете выбрать на основе CDNСтатическая хостинговая платформа, (чтобы вы могли) обогатить свою страницу, добавив интерактивные компоненты на страницу, и использовать это как признак повышения производительности (JAMStack).

Обратите внимание, что сети CDN также могут размещать и разгружать динамический контент, поэтому нет необходимости ограничивать сферу услуг CDN статическими ресурсами. (еще одна вещь, которую вы должны иметь в виду), независимо от того, выполняет ли ваша CDN сжатие контента (GZip), преобразование контента, транспорт HTTP/2 и ESI (язык разметки, который можно использовать для разделения веб-страниц на отдельные кэшируемые объекты) ) и другие операции, нам все же необходимо просмотреть вышеперечисленные операции, потому что вышеперечисленные операции будут не только агрегировать статический и динамический контент на странице на границе CDN (там, где сервер ближе всего к пользователю), но и выполнять другие задачи.

Оптимизация

13. Расставлять приоритеты

Вы должны знать, чему отдать предпочтение. Запустите все свои статические ресурсы (JavaScript, изображения, шрифты, сторонние скрипты и «дорогие» модули на странице, такие как карусели, сложные диаграммы и мультимедийный контент) и разделите их на группы.

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

• Для традиционных браузеров определите основныеосновнойФункциональность (например: полностью доступный основной контент)
• Для многофункциональных браузеровпродвигатьОсобенности (например: красочный, идеальный опыт)
• Другие ресурсы (ресурсы, которые не являются абсолютно необходимыми и могут загружаться лениво, например, веб-шрифты, ненужные стили, скрипты каруселей, видеоплееры, кнопки социальных сетей, большие изображения)

мы в"Improving Smashing Magazine's Performanceопубликовал статью с подробным описанием описанного выше метода.

14. Рассмотрите возможность использования режима «срезания горчицы».

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

Например: в развивающихся странах дешевые телефоны Android в основном работают под управлением Chrome, и у них ограниченный объем памяти и ЦП.режим ПРПЛхороший выбор. Наконец, используйтеDevice Memory Client Hints Header, мы можем более надежно идентифицировать недорогие устройства. Теперь заголовки поддерживаются только в Blink (Blink поддерживаетclient hints). Поскольку хранилище устройства также имеетВызывается в ChromeAPI-интерфейсы JavaScript, одним из вариантов является обнаружение функций на основе API, возвращаясь к методам, «совместимым со стандартами», только если они не поддерживаются (Спасибо, Йоав!).

15. Снизить стоимость парсинга JavaScript

Когда мы имеем дело с одностраничными приложениями, вам необходимо инициализировать приложение до того, как ваша страница будет отображена. Ищите модули и методы для ускорения начального времени рендеринга (например:Как отлаживать производительность React,так же какКак улучшить производительность Angular), так как большинство проблем с производительностью возникает из-за начального времени синтаксического анализа при запуске приложения.

JavaScript имеет свою цену, но не обязательно размер файла влияет на производительность. Различия во времени синтаксического анализа и выполнения сильно зависят от аппаратного обеспечения устройства. На обычном телефоне (Moto G4) парсинг всего 1 МБ (несжатого) JavaScript занимает примерно 1,3-1,4 секунды, а на парсинг телефона уходит 15-20% времени. В процессе компиляции на подготовку JavaScript уходит в среднем 4 секунды, а на отображение основного содержимого страницы на мобильном телефоне (First Meaningful Paint) — 11 секунд. Объяснение: на недорогих мобильных устройствахВремя синтаксического анализа и выполнения можно легко улучшить в 2–5 раз..

Эмбер недавно провел эксперимент, используяДвоичные шаблоны (двоичные шаблоны)Умный способ избежать накладных расходов на синтаксический анализ. Эти шаблоны не нужно анализировать. (Спасибо, Леонардо!)

Это ключ к проверке каждой зависимости JavaScript, напримерwebpack-bundle-analyzer,Source Map Explorerа такжеBundle BuddyТакие инструменты могут помочь вам в этом.Измеряйте время парсинга и компиляции JavaScript. ЭтсиDeviceTiming, небольшой инструмент, который позволяет вашему JavaScript измерять время синтаксического анализа и выполнения на любом устройстве или в любом браузере. Важно отметить, что хотя размер файла и важен, он не является самым важным. Время синтаксического анализа и компиляции не зависит от размера скрипта.Линейное увеличение.

Webpack Bundle Analyzer visualizes JavaScript dependencies.

16. Используете ли вы опережающий компилятор?

использоватьопережающий компиляторПриходитьсветлее от клиентаприбытьрендеринг на стороне серверанакладные расходы и, таким образом, быстро выводить полезные результаты. Наконец, рассмотрите возможность использованияOptimize.jsРеализовать быстро (хотя, его можно быстро вызвать быстро)наверное не нужен).

17. Используете ли вы встряхивание дерева, подъем области видимости, разделение кода?

Tree-shakingэто способ очистить процесс сборки, загружая только код, который фактически используется в производстве и очистке.в вебпакенеиспользованныйimport. С Webpack 3 и Rollup мы также можем использоватьсфера подъема,scope hoistingКакие инструменты разрешено обнаруживатьimportМожет быть поднят или может быть преобразован во встроенную функцию. С Webpack 4 теперь вы можете использоватьJSON Tree Shaking.UnCSSилиHeliumМожет помочь вам удалить неиспользуемые стили CSS.

Также необходимо учитыватьКак написать эффективные селекторы CSSтак же какКак избежать написания раздутых и накладных расходов. Вы также можете использовать Webpack для сокращения имен классов и использования отдельных областей во время компиляции дляДинамически переименовывать классы CSS

Code-splitting— это еще одна функция Webpack, которая разбивает ваш код на «куски», которые загружаются по запросу. Не весь JavaScript нужно загружать, анализировать и компилировать. Как только вы определили точки разделения в своем коде, Webpack обработает эти зависимости и выходные файлы. Это в основном гарантирует, что первоначальная загрузка достаточно мала для загрузки по запросу, когда приложение делает запрос. Также рассмотрите возможность использованияpreload-webpack-pluginПолучите путь разделения кода, затем используйте<link rel="preload"> or <link rel="prefetch">Предложите браузеру предварительно загрузить их.

Где определяется точка разделения? Отслеживая, какие блоки CSS/JavaScript используются, а какие нет. Умар ХансаобъяснилКак вы это делаете, используя покрытие кода Devtools.

Если вы не используете Webpack, то по сравнению с выводом Browserify,RollupВыход лучше. При использовании Rollup рекомендуется пониматьRollupify, который преобразует модули ECMAScript 2015 в один большой модуль CommonJS, поскольку маленькие модули будут иметьУдивительно высокая производительность(в зависимости от выбора упаковочного инструмента и системы загрузки модулей).

Эдди Османи изБыстрые значения по умолчанию: лучшие практики для современной загрузки. Слайд 76.

Наконец, сСовременные браузерыПоддержка ES2015 улучшается, учтитеиспользоватьbabel-preset-envПреобразовывайте только функции ES2015+, которые не поддерживаются современными браузерами. потомНастроить две сборки, один для ES6 и один для ES5. мы можемиспользоватьscript type="module"Пусть браузеры с модулями ES поддерживают загрузку файлов, а старые браузеры могут загружать традиционныеscript nomodule.

для лодаша,использоватьbabel-plugin-lodashБудут загружаться только те модули, которые вы используете только в исходном коде. Это может значительно сэкономить нагрузку на JavaScript.

18. Оптимизируйте его с помощью используемого вами движка JavaScript.

Изучите процент движков JavaScript в вашей пользовательской базе, а затем изучите способы их оптимизации. Например, когда оптимизированный движок V8 используется в браузере Blink, среде выполнения Node.js и Electron, используйте для каждого скриптапоток сценариев.一旦下载开始，它允许asyncилиdefer scriptsПарсинг в отдельном фоновом потоке, что в некоторых случаях ускоряет загрузку страницы на 10%. Фактически, в<head>серединаиспользовать<script defer>,так чтоБраузеры могут обнаруживать ресурсы раньше, а затем проанализируйте его в фоновом потоке.

Caveat:Opera Mini Не поддерживает сценарии защиты, если вы занимаетесь разработкой в ​​Индии и Африке,deferбудет игнорироваться, что приведет к блокировке рендеринга до загрузки скрипта (спасибо, Джереми)!.

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

19. Рендеринг на стороне клиента или рендеринг на стороне сервера?

В обоих сценариях нашей целью должно быть созданиепрогрессивная загрузка: используйте рендеринг на стороне сервера, чтобы получить первую действительную краску, а также включите минимальный JavaScript, необходимый дляДержите взаимодействие в реальном времени ближе к первому действительному розыгрышу. Если JavaScript не получит его при первом действительном розыгрыше, браузер можетЗаблокируйте основной поток, компилирует и выполняет только что обнаруженный JavaScript,тем самым ограничивая интерактивность сайта или приложения.

Чтобы избежать этого, всегда разделяйте функцию выполнения на отдельные асинхронные задачи и те, которые могут использоватьrequestIdleCallbackМесто. Рассмотрите возможность использования WebPack для ленивой загрузки частей пользовательского интерфейса.динамичныйimportслужба поддержки, избегая накладных расходов на загрузку, синтаксический анализ и компиляцию до тех пор, пока они действительно не понадобятся пользователю (Спасибо, Адди!).

По сути, время до взаимодействия (TTI) говорит нам о времени между навигацией и взаимодействием. Метрики определяются первыми пятью секундами после рендеринга начального содержимого окна, в течение которых никакие задачи JavaScript не занимают более 50 мс. Если возникает задача дольше 50 мс, поиск перезапускается на пятисекундное окно. Таким образом, браузер сначала предположит, что он интерактивный, просто переключится в замороженное состояние и, в конце концов, переключится обратно в интерактивное.

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

20. Ограничиваете ли вы влияние сторонних скриптов?

Со всеми оптимизациями производительности у нас часто нет контроля над сторонними сценариями, исходящими из потребностей бизнеса. Метрики для сторонних сценариев не зависят от взаимодействия с пользователем, поэтому один сценарий часто вызывает надоедливые длинные сторонние сценарии, тем самым подрывая усилия, направленные на повышение производительности. Чтобы контролировать и смягчить снижение производительности этих скриптов, загружайте их только асинхронно (возможно, отложить) и через подсказки ресурсов, такие как:dns-prefetchилиpreconnectУскорить их недостаточно.

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

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

Другой вариант – построитьПолитика безопасности контента (CSP)Чтобы ограничить влияние сторонних скриптов, таких как запрет на загрузку аудио и видео. Лучший вариант - пройти<iframe>Встраивание скриптов заставляет скрипты работать в среде iframe, поэтому без доступа к DOM страницы код не может работать в вашем домене. Можно использовать фреймыsandboxАтрибут дополнительно ограничен, поэтому вы можете отключить любые функции iframe, такие как предотвращение запуска скриптов, предотвращение предупреждений, отправки форм, плагинов, доступа к верхней навигации и т. д.

Например, может потребоваться разрешить запуск скриптов.<iframe sandbox="allow-scripts">. Каждое ограничение может быть указано в свойстве «песочница» с различными допустимыми значениями (Поддержка почти везде), поэтому ограничьте их до минимально допустимого. рассмотрите возможность использованияSafeframeи Intersection Observer; это позволит встроить рекламу в iframe, продолжая отправлять события или получать информацию из модели DOM (например, о видимости рекламы). Обратите внимание, что новые стратегии, такие какСтратегия функций), ограничения на размер ресурсов, ограничения по приоритету ЦП и пропускной способности ухудшают работу сети и сценарии, замедляющие работу браузера, такие как: синхронные сценарии, синхронные запросы XHR, document.write и реализация тайм-аутов.

третьей сторонеиспытание давлением, выполните восходящий обзор производительности страницы в DevTools, проверьте, что происходит после блокировки запроса или истечения времени ожидания, для последнего вы можете использовать сервер Blackhole WebPageTest.72.66.115.13, вы можете использовать его в своемhostsВ файле указано конкретное доменное имя. предпочтительноПредпочтительно собственный хостинг и использование одного имени хоста., но в то же времяСоздать карту запросов, доступ к сторонним вызовам и обнаружению при изменении сценария.

Harry Roberts

21. Разумна ли настройка заголовка кэша HTTP?

Проверьте еще разexpires,cache-control,max-ageи другие заголовки кэша HTTP установлены правильно. В общем, ресурсы должны кэшироваться либо на короткое время (если они могут измениться), либо на неопределенное время (если они статичны). Вы можете изменить версию в их URL-адресе, когда вам нужно их обновить. Запретить заголовки на любом ресурсеLast-Modifiedприведет кIf-Modified-SinceУсловные запросы, даже если ресурс находится в кеше. а такжеEtagто же самое, даже если он используется.

использоватьCache-control: immutable, (На самом деле он был разработан для решения проблемы кэширования статических ресурсов с отпечатками пальцев, и решил проблему ревалидации на стороне клиента (по состоянию на декабрь 2017 г.Поддерживается в FireFox, Edge и Safari.; только Firefox поддерживает HTTPS). вы также можете использоватьЗаголовки HTTP-кэша Heroku, Джейк Арчибальд "Caching Best Practices", и Ильи Григорика.HTTP caching primerв качестве гида. Также обратите внимание, чторазные головы,особенноКогда дело доходит до CDN, и обратите внимание, чтоИ обратите внимание на ключевые заголовочные файлы, что помогает избежать дополнительной проверки, когда новый запрос немного отличается, но не обязательно, от предыдущего стандартного запроса (Спасибо, Гай!).

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

22. Используете ли вы 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, Быстро). Убедитесь, что сервер может обработать содержимое с помощью броти или GZIP. Если вы не можете установить или поддерживать Brotli на свой сервер, затем используйте ZOPFLI.

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

пройти как можно дальше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будет иметь хороший эффект.

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

24. Расширенная оптимизация изображения

Теперь, когда речь идет о важной целевой странице, критически важна скорость загрузки определенного изображения, убедитесь, что файлы 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

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

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

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

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

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

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

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

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

26. Вы загружаете JavaScript асинхронно?

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

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

27. Вы используете отложенную загрузку и используете Intersection Observer для дорогого JS?

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

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

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

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

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

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

28. Вы загружаете критический 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Предварительные загрузки могут запускаться из любого домена, и вы можете отправлять ресурсы только из своего собственного домена или доменов, авторизованных вами. Как только сервер получит первый запрос от клиента, его можно запускать. Сервер помещает ресурс в кеш и удаляется при разрыве соединения. Однако, поскольку соединения HTTP/2 можно повторно использовать на нескольких вкладках, отправленные ресурсы также могут запрашиваться запросами с других вкладок (Спасибо Иниан!).

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

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

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

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

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

29. Используете ли вы потоковые ответы?

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

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

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

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

30. молокоSave-Dataхранить данные??

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Опять же, у нас есть статья Сергея Чикуёнка о том, какПравильное использование анимации GPU. Примечание. Изменения слоя, созданного с помощью графического процессора,наименее дорогой, если вы можете запустить компоновку с помощью Opacity и Warp, то вы на правильном пути.

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

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

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

HTTP/2

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

сделано в гуглеНа пути к более безопасной сетии Chrome перенесет веб-страницы (все с использованием HTTP) как «небезопасные» и перенесет вHTTP/2Это неизбежно. HTTP/2 до сих пор очень хорошо поддерживается, и в некоторых случаях использование HTTP/2 будет творить для вас чудеса. После запуска на HTTPS вы получаете как минимум сервис-воркеров и отправку сервера.Значительный прирост производительности.

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

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

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

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

С одной стороны, вы можете захотеть избежать слияния всех ресурсов, а вместо этого разбить весь интерфейс на множество небольших модулей, затем сжать эти маленькие модули в процессе сборки и, наконец, передать«счетный» подходНа эти небольшие модули ссылаются и загружают их параллельно. Таким образом, изменения в одном файле не требуют повторной загрузки всей таблицы стилей или JavaScript. Он также можетМинимизируйте время разбораи снизить загрузку отдельных страниц.

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

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

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

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

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

Различные сервисы и CDN могут по-разному поддерживать HTTP/2, но вы можете использоватьTLS для просмотра дополнительных услуг или для быстрого просмотра производительности вашей службы и функций, которые вы хотите, чтобы она поддерживала. Инструмент TLS работает следующим образом:

Is TLS Fast Yet?Позволяет проверить ваше преобразование в HTTP /2 для вашего сервера и CDN.

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

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

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

потому чтоIPv4 заканчиваетсяа основные мобильные сети быстро переходят на IPv6 (в СШАдостигать50% порог использования IPv6),Обновите свой DNS до IPv6Разобраться с будущим — хорошая идея. Вы можете одновременно использовать как IPv6, так и IPv4, если в вашей сети есть поддержка двойного стека. В конце концов, IPv6 не имеет обратной совместимости.исследование показывает, Это также связано с тем, что IPv6 поставляется с NDP и оптимизацией маршрутизации, что может увеличить скорость загрузки веб-сайта на 10–15%.

39. Используете ли вы алгоритм сжатия HPACK (для сжатия заголовка ответа HTTP)?

Если вы используете HTTP/2, убедитесь, что ваш сервис отвечает на заголовки HTTP.Реализовать сжатие HPACKчтобы уменьшить ненужные накладные расходы. Поскольку службы HTTP/2 являются относительно новыми, они могут не полностью поддерживать спецификацию, например, HPACK. можно использоватьH2specЭто отличный (хотя и технически подробный) инструмент для проверки.HPACK работает.

H2spec (View large version) (Image source)

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

40. Убедитесь, что сервер защищен

В контексте всех браузеров, реализующих HTTP/2, работающий по протоколу TLS, если вы столкнулись со следующими проблемами:

• Предупреждение безопасности в браузере
• Некоторые элементы на странице не работают.

тогда вам нужно

• Дважды проверьте эти заголовки HTTP, связанные с безопасностью, чтобы убедиться, что они установлены правильно.
• Используйте некоторые инструменты для устранения известных уязвимостей,
• Проверьте свой сертификат, чтобы убедиться, что он недействителен
• Убедитесь, что все внешние плагины и скрипты отслеживания загружены через HTTPS, межсайтовые скрипты запрещены.
• Правильно настроить HTTP вstrict-transport-securityа также content-security-policyзаголовок запроса.

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

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

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

42. Знаете ли вы, тестировалось ли это в прокси-браузерах и старых браузерах?

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

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

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

есть один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, чтобы настроить манифест в соответствии с вашими потребностями:

• Download the checklist PDF (PDF, 0.129 MB)
• Download the checklist in Apple Pages (.pages, 0.236 MB)

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

Пойдем

Некоторые оптимизации могут выйти за рамки вашей работы или бюджета или показаться слишком оскорбительными из-за необходимости работы с устаревшим кодом. нет проблем! Используйте этот контрольный список в качестве общего (и, надеюсь, всеобъемлющего) руководства и создайте собственный список вопросов, применимых к вашей среде. Но самое главное, протестируйте и взвесьте свои собственные проекты, чтобы выявить проблемы перед оптимизацией. Желаю всем отличного выступления в 2018 году!

Большое спасибо Гаю Подярному, Йоаву Вайсу, Эдди Османи, Артему Денисову, Денису Мишунову, Илье Пухальски, Джереми Вагнеру, Колину Бенделлу, Марку Земану, Патрику Минану, Леонардо Лосовизу, Энди Дэвису, Рэйчел Эндрю, Ансельму Ханнеманну, Патрику Хаманну, Энди Дэвису. , Tim Kadlec, Rey Bango, Matthias Ott, Mariana Peralta, Philipp Tellis, Ryan Townsend, Mohamed Hussain SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Aleksey Kulikov и Rodney Rehm за корректуру этой статьи, спасибо также и нам Отлично сообщества делятся методами и опытом, которые они изучили в работе по оптимизации производительности, чтобы все могли их использовать. Вы действительно удивительны!