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

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

Было показано, что более высокая скорость загрузки веб-сайта увеличивает удержание посетителей и их лояльность.[1][2] и удовлетворенность пользователей, особенно для пользователей с медленным интернет-соединением и тех, кто мобильные устройства.[3] Производительность веб-сайтов также приводит к меньшему количеству данных, перемещаемых по сети, что, в свою очередь, снижает энергопотребление веб-сайта и воздействие на окружающую среду.[4] Некоторые аспекты, которые могут повлиять на скорость загрузки страницы, включают кеш браузера / сервера, оптимизацию изображений и шифрование (например, SSL), что может повлиять на время, необходимое для отображения страниц.[5]. Производительность веб-страницы можно улучшить с помощью таких методов, как многоуровневый кэш, облегченный дизайн компонентов уровня представления и асинхронная связь с компонентами на стороне сервера.

История

В первые десять лет существования Интернета повышение производительности сети было сосредоточено в основном на оптимизации кода веб-сайта и устранении аппаратных ограничений. По книге 2002 г. Настройка веб-производительности Патрик Киллелеа, некоторые из ранних используемых методов заключались в использовании простых сервлетов или CGI, увеличении памяти сервера и поиске потери и повторной передачи пакетов.[6] Хотя эти принципы сейчас составляют большую часть оптимизированной основы интернет-приложений, они отличаются от нынешней теории оптимизации тем, что было гораздо меньше попыток улучшить скорость отображения в браузере.

Стив Содерс ввел термин «оптимизация веб-производительности» в 2004 году.[7] В то время Содерс сделал несколько прогнозов относительно того, какое влияние WPO как «развивающаяся отрасль» окажет на Интернет, например, скорость веб-сайтов по умолчанию, консолидация, веб-стандарты производительности, влияние оптимизации на окружающую среду и скорость как отличительный признак.[8]

Один важный момент, сделанный Содерсом в 2007 году, заключается в том, что по крайней мере 80% времени, необходимого для загрузки и просмотра веб-сайта, контролируется структурой внешнего интерфейса. Это время задержки можно уменьшить, зная о типичном поведении браузера, а также о том, как HTTP работает.[9]

Методы оптимизации

Оптимизация веб-производительности улучшается Пользовательский опыт (UX) при посещении веб-сайта и поэтому очень востребован веб-дизайнеры и веб-разработчики. Они используют несколько методов, которые упрощают задачи веб-оптимизации, чтобы уменьшить время загрузки веб-страницы. Этот процесс известен как оптимизация внешнего интерфейса (FEO) или оптимизация контента. FEO концентрируется на уменьшении размеров файлов и «минимизации количества запросов, необходимых для загрузки данной страницы».

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

Следующие методы являются обычно используемыми задачами веб-оптимизации и широко используются веб-разработчиками:

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

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

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

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

HTTP / 1.x и HTTP / 2

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

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

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

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

Рекомендации

  1. ^ «Google увеличивает скорость загрузки сайта в поисковом рейтинге». Получено 4 декабря 2012.
  2. ^ Шэрон, Белл. "WPO | Подготовка к трафику киберпонедельника". CDNetworks. Получено 4 декабря 2012.
  3. ^ Содерс, Стив. "Интернет прежде всего для мобильных устройств". Получено 4 декабря 2012.
  4. ^ Беллонч, Альберт. «Оптимизация веб-производительности для всех». Получено 4 декабря 2012.
  5. ^ "Почему скорость веб-сайта имеет значение [Инфографика] - LoveUMarketing". ЛюбовьМаркетинг. 2018-10-06. Получено 2018-10-21.
  6. ^ Киллелеа, Патрик (2002). Настройка веб-производительности. Севастополь: O'Reilly Media. п. 480. ISBN  059600172X.
  7. ^ Фрик, Тим (2016). Устойчивое проектирование: руководство по созданию более экологичных цифровых продуктов и услуг. Бостон: O'Reilly Media. п. 195. ISBN  1491935774.
  8. ^ Фрик, Тим (2016). Устойчивое проектирование: руководство по созданию более экологичных цифровых продуктов и услуг. Бостон: O'Reilly Media. п. 56. ISBN  1491935774.
  9. ^ Содерс, Стив (2007). Сайты с высокой производительностью. Фарнем: O'Reilly Media. п. 170. ISBN  0596529309.
  10. ^ «HTTP / 2: часто задаваемые вопросы». Рабочая группа HTTP. Получено 14 апреля 2017.
  11. ^ «HTTP / 2 - Тест и анализ производительности в реальных условиях». CSS хитрости. Получено 14 апреля 2017.