CC BY
12
УДК 004.75 DOI: 10.30837/0135-1710.2019.176.058
А.В. ВОВК, В.С. КУЗНЕЦОВА
МЕТОД ПОВЫШЕНИЯ СКОРОСТИ ЗАГРУЗКИ САЙТОВ
В предлагаемой статье разработан метод создания сайтов с учетом требований относительно увеличения скорости их загрузки. Описаны рекомендации по оптимизации сайта и шаги, которым необходимо уделить особое внимание. Применение разработанного метода способствует увеличению скорости загрузки, что окажет ключевое влияние на доступность сайта пользователю, особенно в психологическом аспекте, что повысит активность пользователей на сайте и конверсию.
1. Введение
Современные технологии играют одну из ведущих ролей в повседневной жизни, а Интернет, несомненно, занимает лидирующие позиции, следовательно, сайты являются одним из самых незаменимых атрибутов большинства фирм и организаций, так как выполняют роль профессионального и квалифицированного представителя в Интернете, доступного круглосуточно для всех пользователей из любой точки мира.
Потребность в сайте формируется на основе ряда следующих преимуществ:
- эффективное привлечение новых клиентов;
- увеличение числа стабильных заказов и прибыли;
- улучшенная коммуникация и другие виды взаимодействия с потребителями;
- возможность показать большому количеству людей свое творчество и поделиться мыслями.
- улучшение узнаваемости бренда.
Следует заметить, что данные преимущества будут присутствовать лишь при качественном создании сайта. Его основными характеристиками являются:
- высокая скорость загрузки;
- удобство навигации;
- интуитивно понятный интерфейс;
- наличие специальных инструментов, которые смогут привлечь и убедить потенциального покупателя;
- лаконичный дизайн.
Быстрота загрузки страниц - одно из главных правил качественного Интернет-сайта, она увеличивает коэффициент конверсии, вовлеченность пользователей и поднимает сайт в результатах выдачи. Особенно большое значение она приобретает, если речь идет о мобильном трафике.
2. Цель и задачи исследования
Цель работы - исследование способов повышения качества сайтов как IT-продуктов по критерию скорости их загрузки.
Для достижения данной цели необходимо решить такие задачи:
- разработать метод повышения скорости загрузки сайтов;
- разработать рекомендации по практической реализации предлагаемого метода.
3. Описание метода повышения скорости загрузки сайтов
В настоящее время оценивание скорости загрузки сайтов осуществляется на основе общей совокупности метрик. Однако множество сервисов и средств решения задачи оценивания (например, WebPageTest, Google PageSpeed Insights, Pingdom) оптимизированы для решения отдельных частных случаев этой задачи. Так Google PageSpeed Insights, например, даёт рекомендации по увеличению полученной оценки сайта, то есть его ускорения в соответствии с требованиями и рекомендациями корпорации Google.
Однако проведенный анализ основных представителей данного множества сервисов и средств решения задачи оценивания скорости загрузки сайтов позволил выделить ряд общих положений, следование которым гарантирует улучшение итоговой оценки для создаваемых сайтов. На основе этих положений был разработан метод увеличения скорости загрузки сайтов, представляющий собой последовательность следующих этапов. 58
Этап 1. Изначальное создание сайта в соответствии со стандартами W3C или исправление ошибок и несоответствий в коде.
Этап 2. Сокращение объема ресурсов CSS и JavaScript.
Этап 3. Уменьшение времени ответа сервера путём перемещения всех статичных файлов с веб-сайта на CDN.
Этап 4. Уменьшение количества HTTP-запросов.
Этап 5. Помещение CSS-файлов в начале страницы.
Этап 6. Включение сжатия в настройках сервера.
Этап 7. Оптимизация мобильной версии сайта.
Этап 8. Использование кэша браузера.
Этап 9. Уменьшение количества DNS-запросов.
Этап 10. Оптимизация изображения.
Этап 11. Работа над сокращением времени ответа сервера, в том числе:
- оптимизация работы с базой данных;
- использование наиболее производительного сервера;
- использование акселераторов PHP;
- настройка серверного кэширования страниц.
4. Разработка рекомендаций по практической реализации этапов метода
повышения скорости загрузки сайтов
В ходе практической апробации предложенного метода были разработаны следующие рекомендации по выполнению его отдельных этапов.
В ходе выполнения Этапа 2 уменьшение объема файла приводит к уменьшению времени его загрузки браузером. Для JavaScript и CSS утилиты по сжатию файлов удаляют комментарии, лишние пробелы и переводы строк, заменяют все объявленные переменные меньшими по длине, уменьшая общий объем файла более чем в 2 раза.
В ходе выполнения Этапа 3 на CDN можно перенести все изображения, файлы JavaScript и CSS и оставить на главном сервере только файл HTML. Размещение данной информации на CDN может существенно повысить скорость загрузки страниц сайта.
В ходе выполнения Этапа 4 следует учитывать, что 80 % загрузки страницы ориентировано на загрузку компонентов: скриптов, фотографий, файлов CSS, flash. Спецификация HTTP/1.1 советует, чтобы браузеры параллельно загружали не более двух компонентов веб-страницы с одного хоста. При уменьшении количества этих компонентов (использование Image Map, CSS-спрайтов, Inline-картинок) уменьшится количество HTTP-запросов к серверу и, как результат, увеличится скорость загрузки страницы.
Применение спрайтов в вёрстке страниц сайтов позволяет:
- сократить количество обращений к серверу;
- загрузить несколько изображений сразу, включая те, которые понадобятся в будущем;
- уменьшить размер объединённого изображения, по сравнению с совокупностью исходных картинок, в случае, если у изображений сходная палитра.
Для автоматизированной сборки спрайтов используются специальные инструменты, например, SmartSprites.
Image Map позволяют привязывать ссылки к разным областям одного изображения. Реализуется в двух различных вариантах - серверном и клиентском. В случае применения серверного варианта браузер посылает запрос на сервер для получения адреса выбранной ссылки и ждет ответа с требуемой информацией. Такой подход требует дополнительного времени на ожидание результата и отдельных файлов для каждой карты-изображения.
В клиентском варианте карта располагается в том же HTML-документе, что и ссылка на изображение.
Преимущества карт-изображений:
- карты позволяют задать любую форму области ссылки. Учитывая, что изображения по своей природе прямоугольны, сделать графическую ссылку сложной формы, например, для указания географического района, без карт-изображений не представляется возможным. Как правило, в географической тематике карты-изображения и применяются наиболее часто;
- с одним файлом удобней работать: не приходится заботиться о состыковке отдельных фрагментов, и рисунок легко можно поместить в нужное место.
В ходе выполнения Этапа 5 помещение CSS-файлов в начале страницы позволит получить постепенный рендеринг, то есть страница будет загружаться постепенно - сначала заголовок, потом логотип наверху, навигация и так далее, а это, в свою очередь, служит отличным индикатором загрузки страницы для пользователя и улучшает общее впечатление от сайта. Помещение JavaScript в конец страницы, что позволит браузеру загрузить страницу с контентом в первую очередь, перед загрузкой JavaScript-файлов.
В ходе выполнения Этапа 6 включение сжатия помогает уменьшить время загрузки HTTP-ответа, уменьшая его объем. Рекомендуется также сжимать скрипты и CSS. На данный момент gzip является наиболее популярным и эффективным алгоритмом сжатия. В среднем сжатие gzip уменьшает размер HTTP-ответа на 70 %.
Выполнение Этапа 7 предполагает использование правильного разрешения изображений, параметров шрифта и правильной навигационной системы [1]:
- адаптация размера контента для области просмотра. На сайтах для мобильных устройств пользователи предпочитают видеть вертикальную прокрутку, а не горизонтальную. Указав область просмотра, необходимо убедиться, что содержание не выходит за ее пределы;
- использование шрифтов легко читаемого размера. Сайт, на котором посетителям приходится увеличивать масштаб для того, чтобы прочитать текст на экране смартфона, не может считаться оптимизированным. PageSpeed Insights проверяет, подойдет ли размер шрифта на сайте для пользователей мобильных устройств;
- увеличение размера активных элементов на странице. Область касания при сенсорном управлении значительно больше курсора мыши, и не всегда удается нажать нужную кнопку или ссылку, если не произошло адаптации под мобильную версию сайта;
- исключение использования Flash [3], виджетов или контента, который нельзя воспроизвести на мобильных устройствах.
В ходе выполнения Этапа 8 файлы с веб-сайта - изображения, файлы CSS и JavaScript -загружаются с сервера всего один раз, и браузер сохраняет их на компьютере пользователя.
В ходе выполнения Этапа 9 для повышения быстродействия результаты DNS-запросов кэшируют-ся [2]. Это кэширование может происходить как на специальном сервере Интернет-провайдера, так и на компьютере пользователя. Информация DNS сохраняется в системном кэше (в Windows за это отвечает служба «DNS Client Service»). Большинство браузеров имеет свой кэш, не зависящий от системного. Пока браузер хранит DNS-запись в своем кэше, он не обращается к операционной системе для DNS-преобразования. Когда клиентский кэш очищается (как системный, так и у браузера), количество DNS-запросов возрастает до количества уникальных имен хостов на странице. Множество имен хостов включает в себя собственно адрес самой страницы, картинок, скриптов, CSS, объектов Flash и так далее. Уменьшение количества уникальных имен хостов уменьшает количество DNS-запросов.
Уменьшение количества уникальных имен хостов потенциально уменьшает количество параллельных загрузок компонентов страницы. Снижение количества DNS-запросов уменьшает время загрузки страницы, но уменьшение количества параллельных загрузок может это время увеличить. Рекомендуется распределять загружаемые компоненты между двумя-четырьмя (но не более) уникальными хостами. Такое распределение является компромиссом между уменьшением количества DNS-запросов и сохранением приемлемой параллельности при загрузке компонентов страницы.
В ходе выполнения Этапа 10 применяются методы оптимизации изображений, которые способствуют повышению производительности веб-ресурса:
- отсутствие масштабирования при загрузке, то есть предоставление изображений изначально в подходящем размере, так как если картинка больше необходимого размера, то при помощи CSS она все равно будет уменьшена до подходящего размера, но ресурсы, затрачиваемые на ее загрузку, останутся прежними;
- сжатие изображений. По информации HTTP Archive [4], вес изображений составляет 62 % от общего веса каждой страницы веб-сайта. Поэтому лучший способ оптимизации -сжатие изображений без потерь. При таком методе сжатия изображение уменьшается по весу, но при этом не теряет в качестве. Используя этот метод оптимизации, можно уменьшить использование ресурсов на 30 %;
- использование верного формата изображений. Необходимо правильно выбирать форматы изображений, чтобы изображения отображались без погрешностей и имели опти-60
мальный размер при загрузке. Выбор неверного формата изображения может существенно увеличить размер файла;
- оптимизация графических объектов CSS: горизонтально расположенные изображения занимают меньший объем памяти [5], чем вертикальные, комбинирование похожих цветов в графическом объекте снизит нагрузку на сервер, избежание больших пробелов между рисунками в графическом объекте (размер файла не изменится и снизится нагрузка на сервер).
Favicon небольшого размера, желательно не более 1Кб, кэшируется.
Примерами наиболее распространенных форматов изображений на сайтах являются:
- SVG - наиболее часто используется для простых изображений, таких как логотипы, элементы дизайна и так далее. Неприменим для фотографий. Имеет малый вес, отлично масштабируется, обеспечивая чёткость изображения на любом разрешении экрана, поддерживает анимацию. Им можно управлять через CSS и размещать в HTML, сокращая количество запросов;
- JPEG - подходит для детализированных изображений с большим количеством цветов (фотографий, картинок). Поддерживается всеми устройствами и браузерами [6]. Большой недостаток - отсутствие прозрачности вследствие чего - невозможность комбинирования изображений;
- PNG - используется для высококачественных изображений с эффектом прозрачности. Часто применяется для создания анимированных кнопок, иконок, CSS-спрайтов.
5. Выводы
Индустрия ускорения сайтов - довольно молодая отрасль веб-разработки и активно развивается. Важность скорости сайтов для Интернет-бизнеса уже очевидна, она становится одним из факторов конкуренции. Именно поэтому стоит заниматься увеличением скорости сайта.
Тема скорости сайта обширна и затрагивает многие аспекты разработки и поддержки веб-приложения: от серверного кода до контента. Важно помнить о пользователях, учитывать разнообразные условия использования сайта. Ускорение сайта - процесс, который с разной интенсивностью происходит на всём жизненном цикле проекта.
На основании анализа аналогов разработан метод создания сайтов с учетом требований, выполнение которых необходимо для быстрой загрузки. Описаны рекомендации по оптимизации сайта и шаги, которым необходимо уделить особое внимание. Преимуществами данного метода является наличие этапов, связанных с применением технологии уменьшения количества HTTP-запросов; с учётом в ходе проектирования требований к мобильной версии сайта; с использованием особенностей оптимизации изображений. Стоит также отметить сокращение времени, затраченного на создание сайта, как следствие применения метода с четко прописанными этапами и отсутствия необходимости исправлять ошибки.
Помимо сказанного выше, применение предложенного метода способствует увеличению скорости загрузки, что окажет ключевое влияние на доступность сайта пользователю, особенно в психологическом аспекте. Это повысит активность пользователей на сайте и конверсию.
Список литературы: 1. Как сделать сайт дружественным для мобильных устройств. URL: www.cossa.ru/ 155/95723/ - 05.01.2018. Загл. с экрана. 2. Способы ускорения загрузки вашего сайта. URL: https:// webo.in/articles/habrahabr/15-yahoo-best-practices/ - 04.12.2017. Загл. с экрана. 3. 10 ошибок мобильной версии сайта, которые убивают желание купить. URL: https://habrahabr.ru/company/perezvoni/blog/ 299632/ - 05.01.2018. Загл. с экрана. 4. Оптимизация изображений для web. URL: http://timeweb.com/ru/ community/articles/optimizaciya-izobrazheniy-dlya-web-1 - 04.01.2018. Загл. с экрана. 5. Рекомендации по повышению скорости работы вашего веб-сайта. URL: http://timeweb.com/ru/community/articles/ optimizaciya-izobrazheniy-dlya-web-1 - 04.01.2018. Загл. с экрана. 6. Форматы изображений - HTML Academy. URL: https://htmlacademy.ru/blog/113-image-formats - 05.01.2018. Загл. с экрана.
Надтшла до редколегИ' 21.01.2019
Вовк Александр Владимирович, канд. техн. наук, доцент, доцент кафедры МСТ ХНУРЭ. Научные интересы: математическая статистика, технологии печатных процессов. Адрес: 6ll66, Украина, г. Харьков, пр. Науки, 14, ХНУРЭ, кафедра МСТ.
Кузнецова Виктория Сергеевна, студентка кафедры МСТ ХНУРЭ. Научные интересы^ моделирование, web-разработка. Адрес: 61166, Украина, Харьков, пр. Науки, 14, ХНУРЭ, кафедра МСТ. Тел. +380633732920.
