Jump to content

Веб-производительность

Производительность Интернета — это скорость, с которой веб-страницы пользователя загружаются и отображаются в веб-браузере . Оптимизация производительности веб-сайтов (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

Вместо хост-сервера веб-сайта 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]

  1. ^ «Google добавляет скорость сайта для рейтинга в поиске» . Проверено 4 декабря 2012 г.
  2. ^ Шэрон, Белл. «WPO | Подготовка к трафику Киберпонедельника» . CDNetworks . Проверено 4 декабря 2012 г.
  3. ^ Содерс, Стив. «Интернет прежде всего для мобильных устройств» . Проверено 4 декабря 2012 г.
  4. ^ Беллонч, Альберт. «Оптимизация веб-производительности для всех» . Проверено 4 декабря 2012 г.
  5. ^ Киллелеа, Патрик (2002). Настройка веб-производительности . Севастополь: О'Рейли Медиа. п. 480. ИСБН  059600172X .
  6. ^ Фрик, Тим (2016). Проектирование для устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг . Бостон: О'Рейли Медиа. п. 195. ИСБН  1491935774 .
  7. ^ Фрик, Тим (2016). Проектирование для устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг . Бостон: О'Рейли Медиа. п. 56. ИСБН  1491935774 .
  8. ^ Содерс, Стив (2007). Высокопроизводительные веб-сайты . Фарнхэм: О'Рейли Медиа. п. 170. ИСБН  0596529309 . Архивировано из оригинала 8 марта 2019 года.
  9. ^ «Отложенная загрузка — Веб-производительность | MDN» . http://developer.mozilla.org . Проверено 15 марта 2022 г.
  10. ^ «Часто задаваемые вопросы по HTTP/2» . Рабочая группа HTTP . Проверено 14 апреля 2017 г.
  11. ^ «HTTP/2 — тест и анализ производительности в реальных условиях» . CSS-трюки . Проверено 14 апреля 2017 г.
  12. ^ Оптимизация производительности мобильного Интернета . 2015. ISBN  9781785284625 .
  13. ^ Коллекция веб-производительности . 2018. ISBN  9781492069805 .
  14. ^ Перейти обратно: а б Оптимизация производительности: методы и стратегии . ISBN  9783944540948 .
  15. ^ Адаптивный веб-дизайн с использованием HTML5 и CSS . 2022. ISBN  9781803231723 .
  16. ^ Перейти обратно: а б «Измерение производительности — изучение веб-разработки | MDN» . http://developer.mozilla.org . Проверено 9 января 2023 г.
  17. ^ «Измерение веб-производительности в 2023 году: полное руководство» . Запросить метрики . Проверено 9 января 2023 г.
  18. ^ «Контрольный список производительности внешнего интерфейса на 2021 год (PDF, Apple Pages, MS Word)» . Разрушительный журнал . 12 января 2021 г. Проверено 9 января 2023 г.
  19. ^ «Измерение производительности | Создание приложения React» . create-реагировать-app.dev . Проверено 9 января 2023 г.
  20. ^ "@nuxtjs/web-vitals" . НПМ . Проверено 9 января 2023 г.
  21. ^ "vue-web-vitals" . НПМ . Проверено 9 января 2023 г.
  22. ^ «Показатели производительности, ориентированные на пользователя» . веб.разработчик . Проверено 9 января 2023 г.

 

Arc.Ask3.Ru: конец переведенного документа.
Arc.Ask3.Ru
Номер скриншота №: 837a377dc1e121a65a55aac3c2535a0e__1721367840
URL1:https://arc.ask3.ru/arc/aa/83/0e/837a377dc1e121a65a55aac3c2535a0e.html
Заголовок, (Title) документа по адресу, URL1:
Web performance - Wikipedia
Данный printscreen веб страницы (снимок веб страницы, скриншот веб страницы), визуально-программная копия документа расположенного по адресу URL1 и сохраненная в файл, имеет: квалифицированную, усовершенствованную (подтверждены: метки времени, валидность сертификата), открепленную ЭЦП (приложена к данному файлу), что может быть использовано для подтверждения содержания и факта существования документа в этот момент времени. Права на данный скриншот принадлежат администрации Ask3.ru, использование в качестве доказательства только с письменного разрешения правообладателя скриншота. Администрация Ask3.ru не несет ответственности за информацию размещенную на данном скриншоте. Права на прочие зарегистрированные элементы любого права, изображенные на снимках принадлежат их владельцам. Качество перевода предоставляется как есть. Любые претензии, иски не могут быть предъявлены. Если вы не согласны с любым пунктом перечисленным выше, вы не можете использовать данный сайт и информация размещенную на нем (сайте/странице), немедленно покиньте данный сайт. В случае нарушения любого пункта перечисленного выше, штраф 55! (Пятьдесят пять факториал, Денежную единицу (имеющую самостоятельную стоимость) можете выбрать самостоятельно, выплаичвается товарами в течение 7 дней с момента нарушения.)