Основное руководство по CDN, глава 4:
Оптимизация переднего плана
В контексте веб-служб термин «интерфейс» относится к взаимодействию между вашим веб-сайтом и браузером посетителя. Оптимизация внешнего интерфейса (FEO), также известная как оптимизация контента, - это процесс тонкой настройки вашего веб-сайта, чтобы сделать его более удобным для браузера и более быстрым для загрузки.
Вообще говоря, FEO фокусируется на уменьшении размеров файлов и минимизации количества запросов, необходимых для загрузки данной страницы.
Руководство Imperva CDN: оптимизация внешнего интерфейса
В процессе FEO веб-дизайнеры проводят различие между воспринимаемым и фактическим временем загрузки страницы. Воспринимаемое время загрузки учитывается из-за его влияния на общий пользовательский опыт (UX), в то время как фактическое время загрузки часто используется в качестве показателя производительности.
Сети доставки контента (CDN) играют важную роль в процессе FEO оптимизации внешнего интерфейса, поскольку они обычно используются для оптимизации многих наиболее трудоемких задач оптимизации. Например, типичный CDN предлагает функции автоматического сжатия файлов и автоматического минификации, избавляя вас от необходимости вручную возиться с отдельными ресурсами веб-сайта.
Факт: задержки внешнего интерфейса составляют до 80% времени отклика вашего веб-сайта.
Пример: время до первого байта (TTFB)
Время до первого байта, которое часто используется для измерения времени отклика веб-сайта, является одним из наиболее важных - а также одним из наиболее неправильно понимаемых - показателей производительности.
Руководство Imperva CDN: Пример: время до первого байта (TTFB)
С точки зрения фактического времени загрузки TTFB - это время, необходимое для доставки первого байта данных с сервера в запрашивающий браузер. Однако с точки зрения воспринимаемого времени загрузки TTFB - это время, которое требуется браузеру для анализа первого байта после загрузки файла HTML.
Только воспринимаемый TTFB влияет на пользовательский опыт, делая его более ценным из двух показателей.
Есть несколько способов улучшить отзывчивость вашего сайта:
Уменьшение количества HTTP-запросов
При загрузке веб-страницы браузер должен открывать отдельное TCP-соединение для каждого сделанного HTTP-запроса, что равно количеству элементов страницы, которые необходимо загрузить.
Проблема в том, что существует ограничение на количество одновременных подключений, которые браузер может открывать для одного хоста. Это ограничение существует для защиты сервера от перегрузки большим количеством HTTP-запросов. Однако он также служит потенциальным узким местом, часто заставляя браузер ставить в очередь запросы на подключение.
Руководство Imperva CDN: уменьшение количества HTTP-запросов
Поскольку максимальный порог соединения быстро достигается, используются различные методы FEO, чтобы минимизировать количество отдельных элементов страницы. Одним из наиболее распространенных является объединение ресурсов - практика объединения нескольких файлов меньшего размера.
Например…
Допустим, ваш шаблон веб-сайта состоит из одного файла HTML, двух файлов CSS и 16 изображений, включая ваш логотип и различные фоны меню. Всего браузеру нужно сделать 19 HTTP-запросов, чтобы загрузить пустую страницу на вашем сайте.
Посетитель, использующий браузер Google Chrome, может одновременно открыть только шесть TCP-соединений с вашим сервером, поэтому браузер должен поставить в очередь оставшиеся 13 запросов.
Однако, если вы объедините все изображения шаблона в одно изображение-спрайт, вы можете уменьшить количество запросов с 19 до четырех.
Это не только позволяет Chrome анализировать страницу за один раз, но и сокращает количество циклов, необходимых для загрузки страницы.
Руководство Imperva CDN: пример со спрайтом или без него
Фактор CDN
Сети CDN могут еще больше сократить время отклика сервера за счет предварительного объединения соединений и обеспечения того, чтобы они оставались открытыми на протяжении всего сеанса.
Хотя сети CDN сами по себе не уменьшают количество запросов, предварительное объединение повышает производительность за счет устранения времени задержки, связанного с закрытием и повторным открытием TCP-соединений.
Примечание. Протокол HTTP / 2, все еще находящийся на ранней стадии внедрения, вводит мультиплексирование - метод соединения, который позволяет отправлять несколько запросов и ответов через одно TCP-соединение.
В ближайшем будущем это может свести к минимуму преимущества объединения ресурсов.
Сжатие файлов
Каждая страница вашего веб-сайта состоит из набора файлов HTML, JavaScript, CSS и (возможно) других файлов кода. Чем сложнее страница, тем больше файлы кода и больше время загрузки.
С помощью сжатия файлов эти файлы можно уменьшить до доли от их исходного размера, чтобы улучшить скорость отклика сайта. Gzip - самый популярный вариант сжатия файлов, предпочитаемый за короткое время кодирования / декодирования и высокую степень сжатия. Он может уменьшить файл кода на 60 или даже 80 процентов.
Руководство по CDN: сжатие файлов
Примечание. Gzip-сжатие неэффективно для уменьшения размеров файлов изображений, поскольку они уже сжаты.
Фактор CDN
Почти все сети CDN обеспечивают автоматическое сжатие файлов, беспрепятственно Gzip все файлы сжимаемого кода (например, файлы CSS и JS) перед их отправкой посетителям веб-сайта.
Оптимизация кеша
Заголовки кэша HTTP играют важную роль в том, как браузеры анализируют веб-сайт, поскольку они определяют, какие элементы контента кэшируются и на какой срок.
Кэширование - это хранение ваших статических файлов, которые, как правило, являются самыми большими, за пределами вашего сервера - либо на локальных дисках посетителей, либо в ближайшем PoP CDN. Это может значительно улучшить скорость загрузки сайта.
Обратной стороной является то, что ручное управление заголовками кеша может быть утомительной и неэффективной задачей. Более того, механизмы кэширования часто сталкиваются с проблемами при обработке динамически сгенерированного контента, созданного «на лету», когда страница начинает загружаться (например, объекты AJAX и даже динамически сгенерированные файлы HTML).
Руководство Imperva CDN: Оптимизация кеша
Фактор CDN
Многие сети CDN предлагают варианты управления кешем, обычно с помощью удобной панели управления. С его помощью они позволяют вам устанавливать политики для всего сайта, управлять правилами кэширования для отдельных элементов и даже устанавливать политики для целых групп файлов на основе таких вещей, как тип и местоположение файла (например, всегда кэшировать все изображения в «/ blog /» папку на 60 дней).
CDN также начали интегрировать методы машинного обучения. Они следуют шаблонам использования контента для автоматической оптимизации политик кэширования, тем самым кэшируя обычно «некэшируемый» динамический контент. Это избавляет вас от почти всех задач по управлению кешем.
Минификация кода
Минификация - это процесс FEO, который распознает разницу между тем, как разработчики пишут код, и тем, как его читают машины.
Идея состоит в том, что, хотя разработчики пишут код для облегчения понимания прочитанного, с пробелами, разрывами строк и комментариями, машины могут читать его без каких-либо из этих элементов, что делает их несущественными символами
Минификация обрезает код до самого необходимого, часто сокращая его вдвое перед сжатием.
До минификации (201 символ)
После минификации (137 символов) = размер файла уменьшился более чем на 30%
Фактор CDN
CDN могут полностью автоматизировать минификацию кода. Как передовая служба, которая уже обслуживает большую часть контента сайта, CDN очень легко минимизировать все файлы JavaScript, HTML и CSS на лету, поскольку они отправляются в браузеры посетителей.
Gzip И Minify: хотя минимизация и сжатие кода могут показаться излишними, объединение обоих методов дает наилучшие результаты.
Таким образом, минимизация файлов перед их сжатием приведет к уменьшению размера tar-файла еще на 5–10 процентов.
Оптимизация изображения
Кэширование и сжатие - два наиболее распространенных метода оптимизации изображений, причем кеширование является более эффективным из двух. Это потому, что, в отличие от файлов кода, все форматы изображений уже сжаты.
В результате, чтобы еще больше уменьшить размер файла изображения, вы должны изменить данные этого изображения, либо удалив часть информации заголовка, либо снизив качество исходного изображения. Это называется сжатием с потерями.
Примечание. Хотя отбрасывание данных и уменьшение разрешения часто не рекомендуется, сжатие с потерями может быть полезно для некоторых изображений с высоким разрешением, потому что наши глаза не могут естественным образом воспринимать весь спектр визуальной информации, которую содержат такие изображения.
Например, сжатие с потерями может удалить градации цвета и уменьшить сложность пикселей, не оказывая заметного влияния на наше восприятие изображения.
Руководство Imperva CDN: Оптимизация изображения перед сжатием. До сжатия: 72кб
Руководство по CDN: Оптимизация изображения после сжатия: 14,7 КБ
Фактор CDN
CDN, стандартное решение для кэширования изображений, часто приобретаются только для этой цели. Кроме того, некоторые сети CDN также помогают автоматизировать процесс сжатия изображений, позволяя выбирать между скоростью загрузки страницы и качеством изображения.
Более продвинутые сети CDN также предлагают вариант прогрессивного рендеринга, изменяя исходную концепцию сжатия с потерями. При прогрессивном рендеринге CDN быстро загружает пиксельную версию изображения.
Затем CDN постепенно заменяет его серией все лучше и лучше выглядящих вариантов, пока фактическое изображение не будет готово к загрузке.
Прогрессивный рендеринг полезен тем, что позволяет уменьшить воспринимаемое время загрузки без ущерба для качества изображения.
Руководство по CDN: фактор CDN
Векторные и растровые изображения
Другой метод оптимизации изображений - замена некоторых ваших обычных (растровых) изображений их векторными аналогами.
Этот метод применим к изображениям, состоящим из простых геометрических фигур: линий, кривых, многоугольников и т. д. типичное векторное изображение - это значок или диаграмма.
Вы должны использовать векторные изображения всякий раз, когда можете, потому что:
Они очень маленькие по размеру, так как они должны хранить данные только для набора координат, а не для каждого отдельного пикселя.
Поскольку они не зависят от разрешения, их можно увеличивать и уменьшать бесконечно без какого-либо влияния на качество. Это делает их идеальными для адаптивного дизайна.
Руководство по CDN: векторные и растровые изображения
Следующая:
Глава 5: CDN и SSL / TLS>
Оптимизация переднего плана
В контексте веб-служб термин «интерфейс» относится к взаимодействию между вашим веб-сайтом и браузером посетителя. Оптимизация внешнего интерфейса (FEO), также известная как оптимизация контента, - это процесс тонкой настройки вашего веб-сайта, чтобы сделать его более удобным для браузера и более быстрым для загрузки.
Вообще говоря, FEO фокусируется на уменьшении размеров файлов и минимизации количества запросов, необходимых для загрузки данной страницы.
Руководство Imperva CDN: оптимизация внешнего интерфейса
В процессе FEO веб-дизайнеры проводят различие между воспринимаемым и фактическим временем загрузки страницы. Воспринимаемое время загрузки учитывается из-за его влияния на общий пользовательский опыт (UX), в то время как фактическое время загрузки часто используется в качестве показателя производительности.
Сети доставки контента (CDN) играют важную роль в процессе FEO оптимизации внешнего интерфейса, поскольку они обычно используются для оптимизации многих наиболее трудоемких задач оптимизации. Например, типичный CDN предлагает функции автоматического сжатия файлов и автоматического минификации, избавляя вас от необходимости вручную возиться с отдельными ресурсами веб-сайта.
Факт: задержки внешнего интерфейса составляют до 80% времени отклика вашего веб-сайта.
Пример: время до первого байта (TTFB)
Время до первого байта, которое часто используется для измерения времени отклика веб-сайта, является одним из наиболее важных - а также одним из наиболее неправильно понимаемых - показателей производительности.
Руководство Imperva CDN: Пример: время до первого байта (TTFB)
С точки зрения фактического времени загрузки TTFB - это время, необходимое для доставки первого байта данных с сервера в запрашивающий браузер. Однако с точки зрения воспринимаемого времени загрузки TTFB - это время, которое требуется браузеру для анализа первого байта после загрузки файла HTML.
Только воспринимаемый TTFB влияет на пользовательский опыт, делая его более ценным из двух показателей.
Есть несколько способов улучшить отзывчивость вашего сайта:
-
Руководство по CDN: уменьшение количества HTTP-запросов
Уменьшение HTTP-запросов -
Руководство по CDN: сжатие файлов
Сжатие файлов -
Руководство по CDN: оптимизация кеша
Оптимизация кеша -
Руководство по CDN: минификация кода
Минификация кода -
Руководство по CDN: Оптимизация изображений
Оптимизация изображения
Уменьшение количества HTTP-запросов
При загрузке веб-страницы браузер должен открывать отдельное TCP-соединение для каждого сделанного HTTP-запроса, что равно количеству элементов страницы, которые необходимо загрузить.
Проблема в том, что существует ограничение на количество одновременных подключений, которые браузер может открывать для одного хоста. Это ограничение существует для защиты сервера от перегрузки большим количеством HTTP-запросов. Однако он также служит потенциальным узким местом, часто заставляя браузер ставить в очередь запросы на подключение.
Руководство Imperva CDN: уменьшение количества HTTP-запросов
Поскольку максимальный порог соединения быстро достигается, используются различные методы FEO, чтобы минимизировать количество отдельных элементов страницы. Одним из наиболее распространенных является объединение ресурсов - практика объединения нескольких файлов меньшего размера.
Например…
Допустим, ваш шаблон веб-сайта состоит из одного файла HTML, двух файлов CSS и 16 изображений, включая ваш логотип и различные фоны меню. Всего браузеру нужно сделать 19 HTTP-запросов, чтобы загрузить пустую страницу на вашем сайте.
Посетитель, использующий браузер Google Chrome, может одновременно открыть только шесть TCP-соединений с вашим сервером, поэтому браузер должен поставить в очередь оставшиеся 13 запросов.
Однако, если вы объедините все изображения шаблона в одно изображение-спрайт, вы можете уменьшить количество запросов с 19 до четырех.
Это не только позволяет Chrome анализировать страницу за один раз, но и сокращает количество циклов, необходимых для загрузки страницы.
Руководство Imperva CDN: пример со спрайтом или без него
Фактор CDN
Сети CDN могут еще больше сократить время отклика сервера за счет предварительного объединения соединений и обеспечения того, чтобы они оставались открытыми на протяжении всего сеанса.
Хотя сети CDN сами по себе не уменьшают количество запросов, предварительное объединение повышает производительность за счет устранения времени задержки, связанного с закрытием и повторным открытием TCP-соединений.
Примечание. Протокол HTTP / 2, все еще находящийся на ранней стадии внедрения, вводит мультиплексирование - метод соединения, который позволяет отправлять несколько запросов и ответов через одно TCP-соединение.
В ближайшем будущем это может свести к минимуму преимущества объединения ресурсов.
Сжатие файлов
Каждая страница вашего веб-сайта состоит из набора файлов HTML, JavaScript, CSS и (возможно) других файлов кода. Чем сложнее страница, тем больше файлы кода и больше время загрузки.
С помощью сжатия файлов эти файлы можно уменьшить до доли от их исходного размера, чтобы улучшить скорость отклика сайта. Gzip - самый популярный вариант сжатия файлов, предпочитаемый за короткое время кодирования / декодирования и высокую степень сжатия. Он может уменьшить файл кода на 60 или даже 80 процентов.
Руководство по CDN: сжатие файлов
Примечание. Gzip-сжатие неэффективно для уменьшения размеров файлов изображений, поскольку они уже сжаты.
Фактор CDN
Почти все сети CDN обеспечивают автоматическое сжатие файлов, беспрепятственно Gzip все файлы сжимаемого кода (например, файлы CSS и JS) перед их отправкой посетителям веб-сайта.
Оптимизация кеша
Заголовки кэша HTTP играют важную роль в том, как браузеры анализируют веб-сайт, поскольку они определяют, какие элементы контента кэшируются и на какой срок.
Кэширование - это хранение ваших статических файлов, которые, как правило, являются самыми большими, за пределами вашего сервера - либо на локальных дисках посетителей, либо в ближайшем PoP CDN. Это может значительно улучшить скорость загрузки сайта.
Обратной стороной является то, что ручное управление заголовками кеша может быть утомительной и неэффективной задачей. Более того, механизмы кэширования часто сталкиваются с проблемами при обработке динамически сгенерированного контента, созданного «на лету», когда страница начинает загружаться (например, объекты AJAX и даже динамически сгенерированные файлы HTML).
Руководство Imperva CDN: Оптимизация кеша
Фактор CDN
Многие сети CDN предлагают варианты управления кешем, обычно с помощью удобной панели управления. С его помощью они позволяют вам устанавливать политики для всего сайта, управлять правилами кэширования для отдельных элементов и даже устанавливать политики для целых групп файлов на основе таких вещей, как тип и местоположение файла (например, всегда кэшировать все изображения в «/ blog /» папку на 60 дней).
CDN также начали интегрировать методы машинного обучения. Они следуют шаблонам использования контента для автоматической оптимизации политик кэширования, тем самым кэшируя обычно «некэшируемый» динамический контент. Это избавляет вас от почти всех задач по управлению кешем.
Минификация кода
Минификация - это процесс FEO, который распознает разницу между тем, как разработчики пишут код, и тем, как его читают машины.
Идея состоит в том, что, хотя разработчики пишут код для облегчения понимания прочитанного, с пробелами, разрывами строк и комментариями, машины могут читать его без каких-либо из этих элементов, что делает их несущественными символами
Минификация обрезает код до самого необходимого, часто сокращая его вдвое перед сжатием.
Code:
/ * I’m Just a Code Comment on Minif ication Example */
Var minifyExampIe = function ( ) {
fill(0, 0, 0);
text( "Minification makes code smaller without changing its behavior”, 100, 100);
};
Code:
Var minifyExampIe = function ( ) { fill(0, 0, 0); text( "Minification makes code smaller without changing its behavior”, 100, 100);};minifyExample();Фактор CDN
CDN могут полностью автоматизировать минификацию кода. Как передовая служба, которая уже обслуживает большую часть контента сайта, CDN очень легко минимизировать все файлы JavaScript, HTML и CSS на лету, поскольку они отправляются в браузеры посетителей.
Gzip И Minify: хотя минимизация и сжатие кода могут показаться излишними, объединение обоих методов дает наилучшие результаты.
Таким образом, минимизация файлов перед их сжатием приведет к уменьшению размера tar-файла еще на 5–10 процентов.
Оптимизация изображения
Кэширование и сжатие - два наиболее распространенных метода оптимизации изображений, причем кеширование является более эффективным из двух. Это потому, что, в отличие от файлов кода, все форматы изображений уже сжаты.
В результате, чтобы еще больше уменьшить размер файла изображения, вы должны изменить данные этого изображения, либо удалив часть информации заголовка, либо снизив качество исходного изображения. Это называется сжатием с потерями.
Примечание. Хотя отбрасывание данных и уменьшение разрешения часто не рекомендуется, сжатие с потерями может быть полезно для некоторых изображений с высоким разрешением, потому что наши глаза не могут естественным образом воспринимать весь спектр визуальной информации, которую содержат такие изображения.
Например, сжатие с потерями может удалить градации цвета и уменьшить сложность пикселей, не оказывая заметного влияния на наше восприятие изображения.
Руководство Imperva CDN: Оптимизация изображения перед сжатием. До сжатия: 72кб
Руководство по CDN: Оптимизация изображения после сжатия: 14,7 КБ
Фактор CDN
CDN, стандартное решение для кэширования изображений, часто приобретаются только для этой цели. Кроме того, некоторые сети CDN также помогают автоматизировать процесс сжатия изображений, позволяя выбирать между скоростью загрузки страницы и качеством изображения.
Более продвинутые сети CDN также предлагают вариант прогрессивного рендеринга, изменяя исходную концепцию сжатия с потерями. При прогрессивном рендеринге CDN быстро загружает пиксельную версию изображения.
Затем CDN постепенно заменяет его серией все лучше и лучше выглядящих вариантов, пока фактическое изображение не будет готово к загрузке.
Прогрессивный рендеринг полезен тем, что позволяет уменьшить воспринимаемое время загрузки без ущерба для качества изображения.
Руководство по CDN: фактор CDN
- Через 15 мс
- Через 45 мс
- Через 90 мс - изображение в полном разрешении
Векторные и растровые изображения
Другой метод оптимизации изображений - замена некоторых ваших обычных (растровых) изображений их векторными аналогами.
Этот метод применим к изображениям, состоящим из простых геометрических фигур: линий, кривых, многоугольников и т. д. типичное векторное изображение - это значок или диаграмма.
Вы должны использовать векторные изображения всякий раз, когда можете, потому что:
Они очень маленькие по размеру, так как они должны хранить данные только для набора координат, а не для каждого отдельного пикселя.
Поскольку они не зависят от разрешения, их можно увеличивать и уменьшать бесконечно без какого-либо влияния на качество. Это делает их идеальными для адаптивного дизайна.
Руководство по CDN: векторные и растровые изображения
Следующая:
Глава 5: CDN и SSL / TLS>
