Производительность сети
Скорость загрузки и отображения веб-страниц

Веб-производительность относится к скорости, с которой веб-страницы загружаются и отображаются в веб-браузере пользователя . Оптимизация веб-производительности (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). По мере того, как веб-страницы становятся сложнее, растут и их файлы кода, а следовательно, и время загрузки. Сжатие файлов может уменьшить файлы кода примерно на 40 процентов [9] , тем самым улучшая отзывчивость сайта.

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

Минификация кода выявляет несоответствия между кодами, написанными веб-разработчиками, и тем, как сетевые элементы интерпретируют код. Минификация удаляет комментарии и лишние пробелы, а также сокращает имена переменных, чтобы минимизировать код, уменьшая размеры файлов на целых 60%. В дополнение к кэшированию и сжатию, методы сжатия с потерями (похожие на те, что используются с аудиофайлами) удаляют несущественную информацию заголовка и снижают исходное качество изображения на многих изображениях с высоким разрешением. Эти изменения, такие как сложность пикселей или градации цвета, прозрачны для конечного пользователя и не оказывают заметного влияния на восприятие изображения. Другой метод — замена растровой графики на векторную графику , не зависящую от разрешения . Замена векторов лучше всего подходит для простых геометрических изображений. [ необходима цитата ]

Ленивая загрузка изображений и видео сокращает начальное время загрузки страницы, начальный вес страницы и использование системных ресурсов, что положительно влияет на производительность веб-сайта. [10] Она используется для отсрочки инициализации объекта до того момента, когда он понадобится. Браузер загружает изображения на странице или в посте, когда они нужны, например, когда пользователь прокручивает страницу вниз, а не все изображения сразу, что является поведением по умолчанию и, естественно, занимает больше времени.

HTTP/1.x и HTTP/2

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

По сравнению с HTTP/1, HTTP/2

  • является двоичным , а не текстовым
  • полностью мультиплексирован, а не упорядочен и заблокирован
  • поэтому можно использовать одно соединение для параллелизма
  • использует сжатие заголовков для снижения накладных расходов
  • позволяет серверам «проталкивать» ответы в кэши клиентов заранее [11]

Вместо сервера хостинга веб-сайта CDN используются в тандеме с HTTP/2 для лучшего обслуживания конечного пользователя с помощью веб-ресурсов, таких как изображения, файлы JavaScript и файлы каскадных таблиц стилей (CSS), поскольку местоположение CDN обычно находится ближе к конечному пользователю. [12]

Метрики

В последние годы было введено несколько метрик, которые помогают разработчикам измерять различные аспекты производительности их веб-сайтов. В 2019 году Google представил такие метрики, как время до первого байта (TTFB), первая отрисовка контента (FCP), первая отрисовка (FP), задержка первого ввода (FID), кумулятивный сдвиг макета (CLS) и самая большая отрисовка контента (LCP), которые позволяют владельцу веб-сайта получить представление о проблемах, которые могут повлиять на производительность их веб-сайтов, заставляя их казаться вялыми или медленными для пользователя. Другие показатели, включая Request Count (количество запросов, необходимых для загрузки страницы), [13] DOMContentLoaded (время полной загрузки и анализа HTML-документа, за исключением таблиц стилей CSS, изображений и т. д.), [14] Above The Fold Time (контент, который виден без прокрутки), [15] Round Trip Time, [15] количество ресурсов, блокирующих рендеринг (таких как скрипты, таблицы стилей), [16] Onload Time, Connection Time, Total Page Size, помогают предоставить точную картину задержек и замедлений, возникающих на сетевом уровне, которые могут замедлить работу сайта. [17] [18] [19]

Модули для измерения метрик, таких как TTFB, FCP, LCP, FP и т. д., предоставляются основными фронтенд-библиотеками JavaScript, такими как React , [20] NuxtJS [21] и Vue . [22] Google публикует библиотеку core-web-vitals, которая позволяет легко измерять эти метрики в фронтенд-приложениях. В дополнение к этому, Google также предоставляет Lighthouse, компонент Chrome dev-tools и PageSpeed ​​Insight, сайт, который позволяет разработчикам измерять и сравнивать производительность своего веб-сайта с рекомендуемыми Google минимальными и максимальными значениями. [23]

В дополнение к этому, такие инструменты, как Network Monitor от Mozilla Firefox, помогают получить представление о замедлениях на уровне сети, которые могут возникнуть во время передачи данных. [17]

Ссылки

  1. ^ "Google добавляет скорость сайта в рейтинг поиска" . Получено 4 декабря 2012 г.
  2. ^ Шарон, Белл. «WPO | Подготовка к трафику Cyber ​​Monday». CDNetworks . Получено 4 декабря 2012 г.
  3. ^ Соудерс, Стив. "Web First for Mobile" . Получено 4 декабря 2012 г.
  4. ^ Беллонч, Альберт. "Оптимизация производительности веб-сайтов для всех" . Получено 4 декабря 2012 г.
  5. ^ Киллелеа, Патрик (2002). Настройка производительности веб-сайтов. Севастополь: O'Reilly Media. стр. 480. ISBN 059600172X.
  6. ^ Фрик, Тим (2016). Проектирование для устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг. Бостон: O'Reilly Media. стр. 195. ISBN 1491935774.
  7. ^ Фрик, Тим (2016). Проектирование для устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг. Бостон: O'Reilly Media. стр. 56. ISBN 1491935774.
  8. ^ Соудерс, Стив (2007). Высокопроизводительные веб-сайты. Фарнем: O'Reilly Media. стр. 170. ISBN 0596529309. Архивировано из оригинала 8 марта 2019 года.
  9. ^ Сакамото, Ясутака; Мацумото, Синсуке; Токунага, Сэйки; Сайки, Сачио; Накамура, Масахидэ (февраль 2015 г.). «Эмпирическое исследование влияния минимизации скриптов и сжатия HTTP на сокращение трафика». IEEE. стр.  127–132 . doi :10.1109/DINWC.2015.7054230. ISBN 978-1-4799-6376-8.
  10. ^ "Отложенная загрузка - Web Performance | MDN". developer.mozilla.org . Получено 2022-03-15 .
  11. ^ "HTTP/2 Frequently Asked Questions". HTTP Working Group . Получено 14 апреля 2017 г.
  12. ^ "HTTP/2 – Тест и анализ производительности в реальных условиях". CSS Tricks . Получено 14 апреля 2017 г. .
  13. ^ Оптимизация производительности мобильного Интернета . 2015. ISBN 9781785284625.
  14. ^ Коллекция Web Performance . 2018. ISBN 9781492069805.
  15. ^ ab Оптимизация производительности: методы и стратегии . ISBN 9783944540948.
  16. ^ Адаптивный веб-дизайн с HTML5 и CSS . 2022. ISBN 9781803231723.
  17. ^ ab "Измерение производительности - Изучите веб-разработку | MDN". developer.mozilla.org . Получено 2023-01-09 .
  18. ^ "Измерение производительности веб-сайтов в 2023 году: полное руководство". Запросить метрики . Получено 09.01.2023 .
  19. ^ "Контрольный список производительности Front-End 2021 (PDF, Apple Pages, MS Word)". Smashing Magazine . 2021-01-12 . Получено 2023-01-09 .
  20. ^ "Измерение производительности | Создание приложения React". create-react-app.dev . Получено 2023-01-09 .
  21. ^ "@nuxtjs/web-vitals". npm . Получено 2023-01-09 .
  22. ^ "vue-web-vitals". npm . Получено 2023-01-09 .
  23. ^ "Показатели производительности, ориентированные на пользователя". web.dev . Получено 2023-01-09 .

 

Взято с "https://en.wikipedia.org/w/index.php?title=Web_performance&oldid=1262186038"