Веб-производительность - это скорость, с которой веб-страницы загружаются и отображаются в веб-браузере пользователя . Оптимизация веб-производительности (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. Веб-браузеры также могут сохранять контент для повторного использования через кеш HTTP или веб-кеш . Запросы, которые делают веб-браузеры, обычно направляются в кеш HTTP для проверки того, может ли кэшированный ответ использоваться для выполнения запроса. Если такое совпадение выполнено, ответ выполняется из кеша. Это может быть полезно для уменьшения задержки в сети и затрат, связанных с передачей данных. Кеш HTTP настраивается с использованием заголовков запросов и ответов.
Минификация кода отличает несоответствия между кодами, написанными веб-разработчиками, и тем, как элементы сети интерпретируют код. Минификация удаляет комментарии и лишние пробелы, а также имена переменных crunch, чтобы минимизировать код, уменьшая размер файлов на целых 60%. Помимо кэширование и сжатие с потерями сжатия техники (аналогичная тем , которые используются со звуковыми файлами) удалить несущественную информацию заголовка и снизить исходное качество изображений на многих изображениях с высоким разрешением. Эти изменения, такие как сложность пикселей или градации цвета, прозрачны для конечного пользователя и не влияют заметно на восприятие изображения. Другой метод - замена векторной графики растровой графикой, не зависящей от разрешения . Замена растра лучше всего подходит для простых геометрических изображений.
Ленивая загрузка изображений и видео сокращает время начальной загрузки страницы, начальный вес страницы и использование системных ресурсов, что положительно влияет на производительность веб-сайта. Он используется для отсрочки инициализации объекта до момента, когда это необходимо. Браузер загружает изображения на страницу или в публикацию, когда они необходимы, например, когда пользователь прокручивает страницу вниз, а не все изображения сразу, что является поведением по умолчанию и, естественно, занимает больше времени.
HTTP / 1.x и HTTP / 2
Поскольку веб-браузеры используют несколько TCP-соединений для параллельных пользовательских запросов, может возникнуть перегрузка и монополизация браузером сетевых ресурсов. Поскольку запросы HTTP / 1 связаны с накладными расходами , на производительность сети влияет ограниченная пропускная способность и повышенное использование.
По сравнению с HTTP / 1, HTTP / 2
- это двоичное вместо текстовой
- полностью мультиплексирован, а не упорядочен и заблокирован
- поэтому можно использовать одно соединение для параллелизма
- использует сжатие заголовков для уменьшения накладных расходов
- позволяет серверам проактивно «проталкивать» ответы в клиентские кеши [10]
Вместо сервера хостинга веб-сайта CDN используются в тандеме с HTTP / 2, чтобы лучше обслуживать конечного пользователя веб-ресурсами, такими как изображения, файлы JavaScript и файлы каскадных таблиц стилей (CSS), поскольку расположение CDN обычно находится ближе близость к конечному пользователю. [11]
Рекомендации
- ^ "Google увеличивает скорость сайта в поисковом рейтинге" . Проверено 4 декабря 2012 года .
- ^ Шэрон, Белл. «WPO | Подготовка к трафику киберпонедельника» . CDNetworks . Проверено 4 декабря 2012 года .
- ^ Содерс, Стив. «Интернет прежде всего для мобильных устройств» . Проверено 4 декабря 2012 года .
- ^ Беллонч, Альберт. «Оптимизация веб-производительности для всех» . Проверено 4 декабря 2012 года .
- ^ «Почему скорость веб-сайта имеет значение [Инфографика] - LoveUMarketing» . LoveUMarketing . 2018-10-06 . Проверено 21 октября 2018 .
- ^ Киллелеа, Патрик (2002). Настройка веб-производительности . Севастополь: O'Reilly Media. п. 480. ISBN 059600172X.
- ^ Фрик, Тим (2016). Проектирование в интересах устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг . Бостон: O'Reilly Media. п. 195. ISBN 1491935774.
- ^ Фрик, Тим (2016). Проектирование в интересах устойчивого развития: руководство по созданию более экологичных цифровых продуктов и услуг . Бостон: O'Reilly Media. п. 56. ISBN 1491935774.
- ^ Содерс, Стив (2007). Сайты с высокой производительностью . Фарнхэм: O'Reilly Media. п. 170. ISBN 0596529309.
- ^ «Часто задаваемые вопросы по HTTP / 2» . Рабочая группа HTTP . Проверено 14 апреля 2017 года .
- ^ «HTTP / 2 - Тест и анализ производительности в реальном мире» . CSS-хитрости . Проверено 14 апреля 2017 года .