• Оригинальный адрес:The State of the Web
• Оригинальный автор:Karolina Szczur
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:undead25
• Корректор:sun,IridescentMia

Состояние сети: руководство по повышению производительности

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

Итак, каково текущее состояние сети?

Только 46% из 7,4 млрд жителей планеты имеют доступ к Интернету., средняя скорость сети составляет 7 Мбит/с. Более того, 93% интернет-пользователей выходят в Интернет через мобильные устройства — отказ от портативных устройств непростителен. Данные часто намного дороже, чем мы думаем — цена покупки 500 МБ данных составляет 1 час работы в Германии и 13 часов в Бразилии (более интересную статистику см.Ben Schwarzиз«Взрыв пузырей: настоящее выступление»).

Наш сайт тоже не работает- Приблизительный средний размерэто размер первой игры Doom(около 3 МБ) (обратите внимание, что для статистической точности необходимо использоватьмедиана, рекомендуется к прочтениюIlya Grigorikиз«Средняя страница» - это миф. Средний размер сайта в настоящее время составляет 1,4 МБ). Изображения могут легко занимать 1,7 МБ, в то время как JavaScript занимает в среднем 400 КБ. Та же проблема возникает не только с веб-платформой, но и с нативными приложениями. Вам когда-нибудь приходилось загружать приложение размером 200 МБ, чтобы исправить некоторые ошибки?

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

Если мы создадим веб-платформу только с точки зрения себя, а не пользователя, это приведет к плохому пользовательскому опыту.

Как мы можем добиться большего успеха, проектируя и разрабатывая с учетом производительности?

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

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

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

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

пройти через<link rel ='preload'>, мы можем вручную установить приоритет ресурса, чтобы обеспечить своевременную визуализацию ожидаемого контента. Этот метод может значительно улучшить показатель «время взаимодействия», что делает возможным максимальное удобство для пользователей.

Из-за отсутствия соответствующей информации критический запрос по-прежнему кажется многим черным ящиком. К счастью,Ben SchwarzОпубликована очень подробная и доступная статья -«Ключевой запрос». Кроме того, вы можете проверить статью Эдди о предварительной загрузке -Предварительная загрузка и расстановка приоритетов в Chrome.

🛠 Чтобы отслеживать эффект приоритизации запросов, вы можете использовать инструментарий производительности Lighthouse иКритическая оценка ссылки запросаили просмотрите приоритет запроса на вкладке Chrome DevTools Network.

📝 Общий контрольный список производительности

1. Активное кэширование
2. включить сжатие
3. Расставьте приоритеты для критически важных ресурсов
4. Используйте CDN

Оптимизация изображения

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

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

Выберите правильный формат

Если необходимо использовать изображения, важно определить подходящий формат. Выбор, как правило, между векторной и растровой графикой:

• Векторная графика: независимо от разрешения файлы обычно меньше. Особенно подходит для логотипов, значков и изображений, состоящих из простых фигур (точек, линий, кругов и многоугольников).
• растровое изображение: Контент производительности богаче. Работает с фотографиями.

После принятия вышеупомянутого решения у нас есть несколько форматов на выбор: JPEG, GIF, PNG-8, PNG-24 или новейшие форматы, такие как WEBP или JPEG-XR. С таким количеством вариантов, как мы можем быть уверены, что выберем правильный? Вот простой способ найти лучший формат:

• JPEG: Красочные изображения (например, фотографии)
• PNG–8: Не очень красочные изображения
• PNG–24: Изображение с частичной прозрачностью
• GIF: Анимированные картинки

Photoshop может оптимизировать изображения в вышеуказанных форматах с помощью некоторых настроек при экспорте изображений, таких как снижение качества, уменьшение шума или количества цветов. Убедитесь, что дизайнер знает о методах повышения производительности и готовит правильное изображение с правильными предустановками оптимизации. Если вы хотите узнать больше о том, как проявлять изображения, вы можете прочитатьLara HoganизФорсаж: улучшение взаимодействия с пользователем с помощью производительности веб-сайта.

попробовать новый формат

Производители браузеров разработали несколько новых форматов изображений: Google WebP, Apple JPEG 2000 и Microsoft JPEG-XR.

WebPявляется наиболее конкурентоспособным и поддерживает сжатие без потерь и с потерями, что делает его широко используемым.Формат WebP без потерь на 26 % меньше, чем PNG, и на 25–34 % меньше, чем JPG.. 74 % поддержки браузеров и переходы на более ранние версии делают его безопасным для использования, сохраняя до 1/3 передаваемых байтов. JPG и PNG можно обрабатывать с помощью Photoshop и других программ обработки изображений или с помощью командной строки (brew install webp), чтобы преобразовать его в WebP.

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

Используйте инструменты и алгоритмы для оптимизации

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

Если вы выбираете относительно небольшие SVG, их также необходимо сжимать.SVGOэто инструмент командной строки, который может быстро оптимизировать SVG, удаляя ненужные метаданные. В качестве альтернативы, если вы предпочитаете веб-интерфейс или из-за ограничений операционной системы, вы также можете использоватьJake ArchibaldизSVGOMG. Поскольку SVG основан на формате на основе XML, он также может быть сжат сервером Gzip.

ImageOptimОтличный выбор для большинства других форматов изображений, он включает в себя несколько отличных инструментов, таких как pngcrush, pngquant, MozJPEG, Google Zopfli и другие, в комплексном пакете с открытым исходным кодом. Как приложение Mac OS, интерфейс командной строки и плагин Sketch, ImageOptim можно легко использовать в существующих рабочих процессах. Большинство CLI, зависящих от ImageOptim, доступны на платформах Linux или Windows.

Если вы склонны попробовать новые кодеры, ранее в этом году Google выпустилаGuetzli- Алгоритм с открытым исходным кодом, полученный в результате их исследования WebP и Zopfli.Guetzli может создавать файлы JPEG на 35% меньше, чем любой другой доступный метод сжатия.. Единственный недостаток: медленное время обработки (одна минута процессорного времени на мегапиксель).

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

Адаптивные изображения

Десять лет назад одного разрешения могло быть достаточно для всех сценариев, но современные адаптивные веб-сайты сильно изменились. Вот почему мы должны проявлять особую осторожность, чтобы реализовать наши тщательно оптимизированные визуальные ресурсы и убедиться, что они адаптируются к различным окнам просмотра и устройствам. К счастью, спасибоОрганизация сообщества адаптивных изображений,пройти черезpictureэлементы иsrcsetproperties (оба с поддержкой более 85% браузеров), мы можем сделать это отлично.

атрибут srcset

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

элемент изображения

pictureэлементы иmediaСобственность разработана, чтобы обеспечить более легкий доступ к дворцу искусства. Предоставляя разные источники для разных условий (черезmedia-queriesтест), мы всегда могли сосредоточиться на самых важных элементах изображения, независимо от разрешения.

📚 ЧитатьJason GrigsbyизАдаптивные изображения 101Оба пути могут быть полностью поняты.

Используйте образ CDN

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

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

📝 Контрольный список производительности изображения

1. Выберите правильный формат
2. По возможности используйте векторную графику
3. Если изменения не заметны, уменьшите качество
4. попробовать новый формат
5. Используйте инструменты и алгоритмы для оптимизации
6. Учитьsrcsetсвойства иpictureэлемент
7. Используйте образ CDN

Оптимизируйте веб-шрифты

Возможность использовать пользовательские шрифты — очень мощный инструмент дизайна. Но с большой силой приходит большая ответственность.68% веб-сайтов используют веб-шрифты, и этот ресурс является одним из самых больших узких мест в производительности.(Легко усреднить 100 КБ, в зависимости от различных форм и размеров шрифтов).

Даже если размер не самый важный вопрос, ноНевидимый текст мигает(ФОИТ) да. FOIT возникает, когда веб-шрифт загружается или не загружается, что приводит к пустой странице, что делает содержимое недоступным. это может стоить намДважды проверьте, нужны ли вам веб-шрифты. Если это так, есть несколько стратегий, которые могут помочь нам смягчить негативное влияние на производительность.

Выберите правильный формат

Существует четыре формата веб-шрифтов: EOT, TTF, WOFF и совсем недавно WOFF2. TTF и WOFF широко используются, и браузеры поддерживают более 90%. В зависимости от поддержки, на которую вы ориентируетесь,Вероятно, безопаснее всего использовать WOFF2.и перейти на использование WOFF для старых браузеров. Преимущество использования WOFF2 заключается в наборе настраиваемых алгоритмов предварительной обработки и сжатия (таких какBrotli)МогуУменьшить размер файла на 30%и улучшена производительность синтаксического анализа.

существует@font-faceПри определении источника веб-шрифта в , используйтеformat()Предлагает указать, какой формат следует использовать.

Если вы используете шрифты Google Fonts или Typekit Fonts, они оба реализуют некоторые стратегии для снижения снижения производительности. Все наборы Typekit теперь поддерживают асинхронность для предотвращения FOIT и позволяют кэшировать код набора JavaScript на 10 дней дольше (вместо 10 минут по умолчанию). Google Fonts может автоматически отображать наименьший размер файла в зависимости от устройства пользователя.

Оценка выбора шрифта

Независимо от того, является ли он самостоятельным, количество, объем и рисунок шрифта будут существенно влиять на производительность.
В идеале нам нужен только один шрифт, включающий обычный и полужирный шрифт. Если вы не знаете, как выбрать шрифт, вы можете обратиться к Ларе Хоган.«Эстетика и производительность».

Используйте подмножество диапазона Unicode

Подмножества диапазона Unicode позволяют разбивать большие шрифты на более мелкие наборы. Это относительно продвинутая стратегия, но она может значительно уменьшить размер шрифта, особенно при таргетинге на азиатские языки (знаете ли вы, что среднее количество глифов для китайских шрифтов составляет 20 000?). Первый шаг — ограничить шрифт необходимым набором языков, например латиницей, греческим или кириллицей. Если веб-шрифт используется только для классов LOGO, вполне возможно использовать дескриптор Unicode-range для выбора определенных символов.

Инструмент командной строки с открытым исходным кодом, выпущенный Filament Groupglyph hangerНеобходимый список глифов можно создать из файла или URL-адреса. Или через ИнтернетFont Squirrel Web Font Generator, который предоставляет расширенные параметры подмножества и оптимизации. Если вы используете Google Fonts или Typekit, они оба предоставляют выбор языковых подмножеств в интерфейсе выбора шрифта, что упрощает определение основного подмножества.

Установите стратегию загрузки шрифтов

Шрифты блокируют рендеринг- Поскольку браузеру необходимо сначала создать DOM и CSSOM, веб-шрифт не будет загружен до тех пор, пока он не будет использован в селекторах CSS, соответствующих существующим узлам. Такое поведение явно задерживает рендеринг текста, что часто приводит к вышеупомянутомуНевидимый текст мигает(ФОИТ). FOIT более выражен в медленных сетях и мобильных устройствах.

Внедрение политик загрузки шрифтов, чтобы пользователи не могли получить доступ к контенту. как правило,Мигает нестилизованный текст(FOUT) — самое простое и эффективное решение.

font-display— это новое свойство CSS, предоставляющее независимое от JavaScript решение. К сожалению, он поддерживается лишь частично (Chrome и Opera), Firefox и WebKit в настоящее время находятся в разработке. Тем не менее, его можно и нужно комбинировать с другими механизмами загрузки шрифтов.

К счастью, Typekitзагрузчик веб-шрифтова такжеBram Steinизнаблюдатель за шрифтамиМожет помочь нам управлять поведением загрузки шрифтов. также,Zach Leathermanявляется экспертом в области веб-шрифтов и публикуетПолное руководство по стратегиям загрузки шрифтовпоможет вам выбрать правильный подход для вашего проекта.

📝 Контрольный список производительности веб-шрифтов

1. Выберите правильный формат
2. Оценка выбора шрифта
3. Используйте подмножество диапазона Unicode
4. Установите стратегию загрузки шрифтов

Оптимизировать JavaScript

В настоящее время,Средний размер пакета JavaScript составляет 446 КБ., что делает его вторым по величине типом ресурсов (после изображений).

Мы можем не осознавать, что наш любимый JavaScript скрывает еще более опасные узкие места производительности.

Мониторинг передачи JavaScript

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

Время анализа 1 МБ JavaScript на разных устройствах. Изображение через Эдди Османи«Производительность запуска JavaScript».

Анализ времени синтаксического анализа и компиляции, которые имеют решающее значение для понимания того, когда приложение готово к взаимодействию, зависит от аппаратных возможностей устройства пользователя.Время синтаксического анализа и компиляции может быть в 2-5 раз выше на недорогих телефонах..AddyИсследования показывают, что для того, чтобы приложение стало интерактивным на обычном мобильном телефоне, требуется 16 секунд, по сравнению с 8 секундами на настольном компьютере.
Анализ этих показателей имеет решающее значение, и, к счастью, мы можем сделать это с помощью инструментов разработчика Chrome.

Обязательно прочтите книгу Эдди Османи.«Производительность запуска JavaScript»Подробное изложение текста.

удалить ненужные зависимости

Современные методы управления пакетами могут легко скрыть количество и размер зависимых пакетов.webpack-bundle-analyzerа такжеbundle-buddyЭто хороший инструмент визуализации, который может помочь нам определить повторяющийся код, узкие места максимальной производительности, а также устаревшие и ненужные зависимые пакеты.

пройти черезVS Codeа такжеAtomсерединаImport CostРасширение, мы можем четко знать размер импортируемого пакета.

Реализовать разделение кода

Пока это возможно,Мы должны предоставлять только те ресурсы, которые необходимы для взаимодействия с пользователем.. Отправьте пользователю полныйbundle.jsфайлов, включая обработку кода для взаимодействий, которые они могут никогда не увидеть, что далеко не идеально (представьте себе загрузку JavaScript, который обрабатывает все приложение при посещении целевой страницы). Точно так же мы не должны везде предоставлять код, специфичный для браузера или пользовательского агента.

Webpack — один из самых популярных сборщиков, который поддерживает его по умолчанию.разделение кода. Простейшее разделение кода может быть реализовано для каждой страницы (например,home.js, страница контактовcontact.jsЖдать). Но Webpack предоставляет менее продвинутые стратегии, такие как динамический импорт илиленивая загрузка, что, возможно, стоит исследовать.

Рассмотрим варианты рамы

Фронтенд-фреймворки для JavaScript быстро меняются. согласно сОбзор состояния JavaScript за 2016 г., React — самый популярный. Тщательная оценка выбора архитектуры может показать, что вы можете использовать более легкую альтернативу, такую ​​как Preact (обратите внимание, что Preact не является полной повторной реализацией React, это простовысокая производительность, более легкая виртуальная библиотека DOM). Точно так же мы можем заменить большую библиотеку меньшей альтернативой —moment.jsзаменитьdate-fns(или в отдельных случаяхудалятьmoment.jsнеиспользованный вlocales).

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

📝 Контрольный список производительности JavaScript

1. Мониторинг передачи JavaScript
2. удалить ненужные зависимости
3. Реализовать разделение кода
4. Рассмотрим варианты рамы

Отслеживание производительности, путь вперед

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

Ориентированные на пользователя показатели производительности

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

Этими показателями являются «Время белого экрана», «Первый действительный рендеринг», «Визуальное завершение» и «Интерактивное время».

• Первая краска белого экрана: Браузер переходит с белого экрана на первое визуальное изменение.
• Первая осмысленная краска: текст, изображения и основной контент видны.
• Визуально завершенный: Все в окне просмотра видно.
• Время до интерактивного интерактивного времени: все в окне просмотра видно и с ним можно взаимодействовать (основной поток JavaScript перестает быть активным).

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

Установите бюджет производительности

Все данные могут быстро стать запутанными и трудными для понимания. Без выполнимой цели легко упустить из виду нашу первоначальную цель. Много лет назад,Tim Kadlecписал о«Бюджет эффективности»Концепция чего-либо.

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

При настройке бюджета важно иметь заметную разницу, как правило, по крайней мере на 20%. Экспериментируйте и изменяйте свой бюджет, см.Используйте бюджеты производительности для подхода к новым проектам.

использоватьКалькулятор бюджета эффективностиилиBrowser CaloriesРасширение Chrome, которое поможет вам создать бюджет.

Непрерывный мониторинг

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

Google Lighthouse— это проект с открытым исходным кодом, в котором рассматриваются производительность, доступность, PWA и многое другое. Вы можете использовать его из командной строки или непосредственно в Chrome DevTools.

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

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

Производительность — это общая ответственность, а не только команда разработчиков — мы все несем ответственность за пользовательский опыт, который мы создаем, независимо от роли или ранга.

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

Повышайте осведомленность о производительности и эмпатию

Забота о производительности — это не просто бизнес-цель(но если вам нужно сделать продажи по статистике продаж, вы можете использоватьСтатистика PWA). Речь идет об элементарной эмпатии и приоритете интересов пользователя.

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

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

---

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