Веб-производительность
Производительность Интернета — это скорость, с которой веб-страницы пользователя загружаются и отображаются в веб-браузере . Оптимизация производительности веб-страниц (WPO) , или оптимизация веб-сайтов , — это область знаний о повышении производительности веб-страниц.
Было доказано, что более высокая скорость загрузки веб-сайта увеличивает удержание и лояльность посетителей. [1] [2] и удовлетворенность пользователей, особенно пользователей с медленным подключением к Интернету и пользователей мобильных устройств . [3] Производительность веб-сайта также приводит к меньшему количеству данных, передаваемых через Интернет, что, в свою очередь, снижает энергопотребление веб-сайта и воздействие на окружающую среду. [4] Некоторые аспекты, которые могут повлиять на скорость загрузки страницы, включают кеш браузера/сервера, оптимизацию изображений и шифрование (например, SSL), что может повлиять на время, необходимое для отображения страниц. Производительность веб-страницы можно повысить с помощью таких методов, как многоуровневый кэш, облегченная конструкция компонентов уровня представления и асинхронная связь с компонентами на стороне сервера.
История
[ редактировать ]Примерно в первое десятилетие существования Интернета повышение производительности веб-сайтов было сосредоточено в основном на оптимизации кода веб-сайта и устранении аппаратных ограничений. Согласно книге Патрика Киллелеа «Настройка веб-производительности», вышедшей в 2002 году, некоторые из ранних используемых методов заключались в использовании простых сервлетов или CGI, увеличении памяти сервера и поиске потери и повторной передачи пакетов. [5] Хотя эти принципы сейчас составляют большую часть оптимизированной основы интернет-приложений, они отличаются от современной теории оптимизации тем, что было гораздо меньше попыток улучшить скорость отображения браузера.
Стив Содерс ввел термин «оптимизация веб-производительности» в 2004 году. [6] В то время Соудерс сделал несколько прогнозов относительно влияния, которое WPO как «развивающаяся отрасль» окажет на Интернет, например, скорость веб-сайтов по умолчанию, консолидация, веб-стандарты производительности, влияние оптимизации на окружающую среду и скорость как отличительный признак. [7]
Одним из основных моментов, которые Соудерс отметил в 2007 году, является то, что по крайней мере 80% времени, необходимого для загрузки и просмотра веб-сайта, контролируется структурой внешнего интерфейса. Это время задержки можно уменьшить, если знать типичное поведение браузера, а также то, как работает HTTP . [8]
Методы оптимизации
[ редактировать ] |
Оптимизация веб-производительности улучшает взаимодействие с пользователем (UX) при посещении веб-сайта и поэтому очень востребована веб-дизайнерами и веб-разработчиками . Они используют несколько методов, которые упрощают задачи веб-оптимизации и сокращают время загрузки веб-страницы. Этот процесс известен как внешняя оптимизация (FEO) или оптимизация контента. FEO концентрируется на уменьшении размеров файлов и «минимизации количества запросов, необходимых для загрузки данной страницы».
В дополнение к методам, перечисленным ниже, использование сети доставки контента — группы прокси-серверов, разбросанных по различным точкам земного шара — является эффективной системой доставки, которая выбирает сервер для конкретного пользователя на основе близости сети. Обычно выбирается сервер с самым быстрым временем ответа.
Следующие методы обычно используются в задачах веб-оптимизации и широко используются веб-разработчиками:
Веб-браузеры открывают отдельные соединения протокола управления передачей (TCP) для каждого запроса протокола передачи гипертекста (HTTP), отправленного при загрузке веб-страницы. Эти запросы суммируют количество элементов страницы, необходимых для загрузки. Однако браузер ограничен открытием только определенного количества одновременных подключений к одному хосту. Чтобы избежать узких мест, количество отдельных элементов страницы сокращается за счет консолидации ресурсов, при которой файлы меньшего размера (например, изображения) объединяются в один файл. Это уменьшает количество HTTP-запросов и количество «обходов», необходимых для загрузки веб-страницы.
Веб-страницы создаются на основе файлов кода, таких как JavaScript и язык гипертекстовой разметки (HTML). По мере того как веб-страницы усложняются, растут и их файлы кода, а, следовательно, и время загрузки. Сжатие файлов может уменьшить количество файлов кода на целых 80 процентов, тем самым улучшая скорость реагирования сайта.
Оптимизация веб-кэширования снижает нагрузку на сервер, использование полосы пропускания и задержку . CDN используют специальное программное обеспечение для веб-кэширования для хранения копий документов, проходящих через их систему. Последующие запросы из кэша могут быть выполнены при соблюдении определенных условий. Веб-кеши расположены либо на стороне клиента (прямое положение), либо на стороне веб-сервера (обратное положение) CDN. Веб-браузеры также могут сохранять контент для повторного использования через HTTP-кеш или веб-кеш . Запросы, которые делают веб-браузеры, обычно направляются в кэш HTTP для проверки того, можно ли использовать кэшированный ответ для выполнения запроса. Если такое совпадение выполнено, ответ выполняется из кэша. Это может быть полезно для снижения задержки в сети и затрат, связанных с передачей данных. Кэш HTTP настраивается с использованием заголовков запросов и ответов.
Минимизация кода позволяет выявить несоответствия между кодами, написанными веб-разработчиками, и тем, как сетевые элементы интерпретируют код. Минификация удаляет комментарии и лишние пробелы, а также сокращает имена переменных, чтобы минимизировать код, уменьшая размеры файлов на целых 60%. Помимо кэширования и сжатия, методы сжатия с потерями (аналогичные тем, которые используются с аудиофайлами) удаляют несущественную информацию заголовка и снижают качество исходного изображения во многих изображениях с высоким разрешением. Эти изменения, такие как сложность пикселей или градации цвета, прозрачны для конечного пользователя и не оказывают заметного влияния на восприятие изображения. Другой метод — замена растровой графики , независимой от разрешения векторной графикой . Векторная замена лучше всего подходит для простых геометрических изображений. [ нужна ссылка ]
Ленивая загрузка изображений и видео сокращает время начальной загрузки страницы, начальный вес страницы и использование системных ресурсов, и все это положительно влияет на производительность веб-сайта. [9] Он используется для отсрочки инициализации объекта до момента, когда он понадобится. Браузер загружает изображения на странице или в публикации, когда они необходимы, например, когда пользователь прокручивает страницу вниз, а не все изображения сразу, что является поведением по умолчанию и, естественно, занимает больше времени.
HTTP/1.x и HTTP/2
[ редактировать ]Поскольку веб-браузеры используют несколько TCP-соединений для параллельных пользовательских запросов, может возникнуть перегрузка и монополизация браузером сетевых ресурсов. Поскольку запросы HTTP/1 сопряжены с соответствующими издержками , на производительность сети влияет ограниченная пропускная способность и повышенное использование.
По сравнению с HTTP/1, HTTP/2
- является двоичным , а не текстовым
- полностью мультиплексируется, а не упорядочен и заблокирован
- поэтому можно использовать одно соединение для параллельности
- использует сжатие заголовков для уменьшения накладных расходов
- позволяет серверам заранее «загружать» ответы в клиентские кэши [10]
Вместо хост-сервера веб-сайта CDN используются в тандеме с HTTP/2, чтобы лучше обслуживать конечного пользователя веб-ресурсами, такими как изображения, файлы JavaScript и файлы каскадной таблицы стилей (CSS), поскольку расположение CDN обычно находится ближе. близость к конечному пользователю. [11]
Метрики
[ редактировать ]В последние годы было введено несколько показателей, которые помогают разработчикам измерять различные аспекты производительности своих веб-сайтов. В 2019 году Google представила такие метрики, как время до первого байта (TTFB), первая отрисовка контента (FCP), первая отрисовка (FP), первая задержка ввода (FID), накопительный сдвиг макета (CLS) и наибольшая отрисовка контента (LCP). для владельца веб-сайта, чтобы получить представление о проблемах, которые могут повлиять на производительность их веб-сайтов, из-за чего пользователю они могут показаться вялыми или медленными. Другие показатели, включая количество запросов (количество запросов, необходимых для загрузки страницы), [12] DOMContentLoaded (время, когда HTML-документ полностью загружен и проанализирован, за исключением таблиц стилей CSS, изображений и т. д.), [13] Над временем сгиба (содержимое, которое видно без прокрутки), [14] Время в пути туда и обратно, [14] количество ресурсов блокировки рендеринга (таких как скрипты, таблицы стилей), [15] Время загрузки, время соединения, общий размер страницы помогают получить точную картину задержек и замедлений, происходящих на сетевом уровне, которые могут замедлить работу сайта. [16] [17] [18]
Модули для измерения таких показателей, как TTFB, FCP, LCP, FP и т. д., поставляются с основными библиотеками JavaScript для внешнего интерфейса, такими как React , [19] NuxtJS [20] и Вью . [21] Google публикует библиотеку Core-Web-Vitals, которая позволяет легко измерять эти показатели во внешних приложениях. В дополнение к этому Google также предоставляет Lighthouse, компонент инструментов разработки Chrome, и PageSpeed Insight — сайт, который позволяет разработчикам измерять и сравнивать производительность своего веб-сайта с рекомендованными Google минимумами и максимумами. [22]
В дополнение к этому такие инструменты, как Network Monitor от Mozilla Firefox, помогают получить представление о замедлениях на уровне сети, которые могут возникнуть во время передачи данных. [16]
Ссылки
[ редактировать ]- ^ «Google добавляет скорость сайта для рейтинга в поиске» . Проверено 4 декабря 2012 г.
- ^ Шэрон, Белл. «WPO | Подготовка к трафику Киберпонедельника» . CDNetworks . Проверено 4 декабря 2012 г.
- ^ Содерс, Стив. «Интернет прежде всего для мобильных устройств» . Проверено 4 декабря 2012 г.
- ^ Беллонч, Альберт. «Оптимизация веб-производительности для всех» . Проверено 4 декабря 2012 г.
- ^ Киллелеа, Патрик (2002). Настройка веб-производительности . Севастополь: О'Рейли Медиа. п. 480. ИСБН 059600172X .
- ^ Фрик, Тим (2016). Проектирование для устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг . Бостон: О'Рейли Медиа. п. 195. ИСБН 1491935774 .
- ^ Фрик, Тим (2016). Проектирование для устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг . Бостон: О'Рейли Медиа. п. 56. ИСБН 1491935774 .
- ^ Содерс, Стив (2007). Высокопроизводительные веб-сайты . Фарнхэм: О'Рейли Медиа. п. 170. ИСБН 0596529309 . Архивировано из оригинала 8 марта 2019 года.
- ^ «Отложенная загрузка — Веб-производительность | MDN» . http://developer.mozilla.org . Проверено 15 марта 2022 г.
- ^ «Часто задаваемые вопросы по HTTP/2» . Рабочая группа HTTP . Проверено 14 апреля 2017 г.
- ^ «HTTP/2 — тест и анализ производительности в реальных условиях» . CSS-трюки . Проверено 14 апреля 2017 г.
- ^ Оптимизация производительности мобильного Интернета . 2015. ISBN 9781785284625 .
- ^ Коллекция веб-производительности . 2018. ISBN 9781492069805 .
- ^ Перейти обратно: а б Оптимизация производительности: методы и стратегии . ISBN 9783944540948 .
- ^ Адаптивный веб-дизайн с использованием HTML5 и CSS . 2022. ISBN 9781803231723 .
- ^ Перейти обратно: а б «Измерение производительности — изучение веб-разработки | MDN» . http://developer.mozilla.org . Проверено 9 января 2023 г.
- ^ «Измерение веб-производительности в 2023 году: полное руководство» . Запросить метрики . Проверено 9 января 2023 г.
- ^ «Контрольный список производительности внешнего интерфейса на 2021 год (PDF, Apple Pages, MS Word)» . Разрушительный журнал . 12 января 2021 г. Проверено 9 января 2023 г.
- ^ «Измерение производительности | Создание приложения React» . create-реагировать-app.dev . Проверено 9 января 2023 г.
- ^ "@nuxtjs/web-vitals" . НПМ . Проверено 9 января 2023 г.
- ^ "vue-web-vitals" . НПМ . Проверено 9 января 2023 г.
- ^ «Показатели производительности, ориентированные на пользователя» . веб.разработчик . Проверено 9 января 2023 г.