Способы повышения производительности и безопасности сайта

В современной сетевой среде, где пользовательский трафик увеличивается с каждым днем, важно не только создать красивый и функциональный сайт, но и обеспечить его высокую производительность и защиту от вредоносных атак.​ В этой статье мы рассмотрим несколько способов, которые помогут вам повысить производительность и безопасность вашего сайта.​

1.​ Оптимизация кода и изображений

Один из основных способов повышения производительности сайта ⏤ это оптимизация кода и изображений. Разработчики сайтов должны стремиться к максимально эффективному использованию ресурсов сервера и минимизации размера страницы.​

Оптимизация кода включает удаление ненужных пробелов, комментариев и переносы строк, использование сжатия кода (например, с помощью Gzip), а также объединение и минификацию CSS и JavaScript файлов.​

Оптимизация изображений включает использование форматов с низкой степенью сжатия, таких как JPEG или PNG с использованием сжатия без потерь, а также изменение размера и декодирование изображений в коде страницы.​

2.​ Использование кеширования

Кеширование ౼ это техника, которая позволяет сохранять копии ресурсов (таких как изображения, CSS-файлы или JavaScript-файлы) на стороне пользователя или на сервере, чтобы уменьшить время загрузки страницы при последующих запросах.​

Для кеширования на стороне клиента можно использовать заголовки HTTP, которые указывают браузеру, сколько времени нужно хранить копию ресурса.​ Также можно использовать механизмы кеша веб-серверов или контент-доставки сети (CDN), которые позволяют хранить копии ресурсов на удаленных серверах, ближе к конечным пользователям.​

3.​ Защита от вредоносных атак

Повышение безопасности сайта ⏤ это одно из важнейших задач веб-разработчика.​ Ведь ваш сайт может быть подвержен различным видам атак, таким как внедрение вредоносного кода, кража данных или DDoS-атаки.​

Для защиты от вредоносных атак следует принимать следующие меры⁚

1. Устанавливать обновления CMS, плагинов и других компонентов сайта.​
2. Использовать сложные пароли и двухфакторную аутентификацию для доступа к административной панели сайта.​
3. Ограничивать доступ к скриптам и файлам, чтобы предотвратить возможность выполнения вредоносного кода.​
4. Отслеживать и регистрировать попытки неавторизованного доступа, чтобы быстро реагировать на потенциальные угрозы.
5. Использовать SSL-сертификаты для обеспечения безопасного соединения и шифрования передаваемых данных.

Кроме того, регулярное аудиторское обследование сайта позволяет выявить уязвимости и устранить их до того, как они будут использованы злоумышленниками.

4.​ Использование контент-доставки сети (CDN)

CDN ⏤ это инфраструктура, которая позволяет распределить копии ресурсов сайта (таких как изображения, CSS-файлы или JavaScript-файлы) на серверы, размещенные в различных точках мира. Это позволяет обслуживать контент более быстро и эффективно, особенно для пользователей, находящихся далеко от сервера.​

Использование CDN помогает ускорить загрузку ресурсов сайта, уменьшить нагрузку на основной сервер и повысить отказоустойчивость сайта.​

5.​ Оптимизация базы данных

База данных ౼ это важная часть веб-приложений, которая может оказывать значительное влияние на производительность сайта.​ Для повышения производительности базы данных рекомендуется следующее⁚

• Индексировать таблицы, чтобы ускорить поиск и сортировку данных.​
• Удалять ненужные данные и устаревшие записи, чтобы уменьшить объем хранимых данных.​
• Оптимизировать запросы к базе данных, используя инструкции JOIN и WHERE для минимизации объема передаваемых данных.​
• Использовать кэширование запросов, чтобы избежать повторного выполнения одних и тех же запросов к базе данных.​

Собран список из пяти технологий, используемых для повышения производительности и безопасности сайта.

• Let's Encrypt (SSL).

Бесплатный способ получения SSL-сертификатов для повышения безопасности и производительности.

Преемник протокола HTTP 1.1, который предлагает множество опций для оптимизации производительности.

Методы сжатия, позволяющие получать файлы меньшего размера, помимо GZIP.

Форматы изображений, которые делают изображения меньше, чем JPEG или PNG.

• Сети доставки контента.

Набор серверов, расположенных по всему миру, для временного хранения и быстрой доставки ресурсов вашего сайта.

Если вы не уделяли особого внимания повышению производительности и безопасности своего сайта, учтите, что с 2010 года Google учитывает скорость сайта как фактор ранжирования.

Кроме того, ведение журнала интернет-магазина улучшит показатели конверсии, так как ваш сайт станет быстрее.

Весь интернет переходит на SSL, обеспечивая большую безопасность и производительность для пользователей. Для некоторых технологий, рассматриваемых в этой статье, SSL является обязательным условием.

Let's Encrypt (SSL).

Google уже рассматривает HTTPS как сигнал ранжирования. Как говорится в блоге Google о безопасности, все незащищенные веб-сайты сразу же отображаются в браузере Chrome как небезопасные.

Let's Encrypt — это бесплатный способ получения SSL-сертификата. В прошлом, если вы хотели использовать HTTPS, вы должны были приобрести действующий SSL-сертификат. По этой причине многие веб-менеджеры продолжали использовать HTTP.

Однако в конце 2015 года была представлена публичная бета-версия Let's Encrypt и были выпущены миллионы бесплатных SSL-сертификатов. Encrypt заявила, что к концу июня 2017 года было выдано более 100 миллионов сертификатов. До этого на HTTPS было переведено менее 40% веб-сайтов. За 18 месяцев после запуска Let's Encrypt это число увеличилось до 58%.

Причины, по которым переход на HTTPS действительно важен, следующие

• Повышенная безопасность (так как все зашифровано), и
• https необходим для работы http/2 и brotli
• HTTPS является фактором ранжирования, потому что
• SSL безопасно внушает доверие посетителям.

Как получить SSL-сертификат Let’s Encrypt

Сертификаты зашифрованы и действуют в течение 90 дней. Необходимо вручную продлевать до истечения срока действия или настроить процесс автоматического продления.

Существует два способа получения SSL-сертификатов Let's Encypt encrypt

• Используя доступ к оболочке: запустите установку и получите сертификат самостоятельно.
• Нет доступа к оболочке: вы можете получить сертификат через своего хостинг-провайдера или CDN.

Второй вариант очень прост. Если ваш хостер или CDN-провайдер поддерживает шифрование Let's, вам необходимо включить его, чтобы начать доставку ресурсов по HTTPS.

Если у вас есть доступ к оболочке и вам нужно настроить Let's Encrypt, вам нужно определить, какой веб-сервер и операционную систему использовать. Затем перейдите на сайт Certbot и в выпадающем меню выберите "Программное обеспечение и операционная система", чтобы найти инструкции по установке.

Домашняя страница Certbot

HTTP / 2

Одним из наиболее полезных усовершенствований HTTP/2 является то, что протокол позволяет путешественникам создавать несколько загрузок одновременно, используя только одно соединение. При использовании HTTP 1.1 большинство браузеров могли обрабатывать только шесть одновременных запросов. С появлением HTTP/2 такие методы, как шейдеры домена, стали устаревшими.

HTTP/2 предлагает и другие преимущества:.

• Давление на сервер. Представляет дополнительные ресурсы, которые, по мнению сервера, понадобятся клиенту в будущем.
• Сжатие заголовков. Используйте сжатие HPACK для уменьшения размера заголовка.
• Бинарный характер. В отличие от текстового HTTP 1.1, двоичный код сокращает время, необходимое для преобразования текста в двоичные файлы, упрощая разрешение сервера.
• Иерархия приоритетов. Уровни приоритета связаны с заявками. Это гарантирует, что наиболее важные ресурсы будут доступны в первую очередь.

Включить HTTP / 2.

Определить, поддерживает ли ваш интернет-провайдер HTTP/2, очень просто — перейдите на страницу Характеристики хостинга и найдите эту информацию.

Если вы хотите проверить, использует ли ваш сайт HTTP/2, установите последнюю версию curl и закажите

Если вы не знакомы с использованием командной строки, откройте инструменты роста Google Chrome и перейдите на вкладку Сеть. В столбце Протокол вы увидите значение H2.

H2 — Инструменты разработки Google Chrome

Включите HTTP/2 в nginx

Если вы используете собственный сервер и более старую версию программного обеспечения, вам необходимо обновить его до версии, поддерживающей http/2. Для пользователей Nginx этот процесс очень прост. Убедитесь, что вы используете версию 1.9.5 или более новую версию Nginx. Затем добавьте следующие директивы прослушивания в блок конфигурации в файле файла

Включите HTTP/2 в Apache

Пользователи Apache должны перейти на версию 2.4.17 или ниже, чтобы использовать http/2. Им также нужно будет настроить HTTPS в разделе MOD_HTTP2 в Apache и опустить раздел, чтобы определить подходящую конфигурацию для своего сервера. Краткое описание этого процесса можно найти в руководстве Apache по http/2.

Независимо от используемого веб-сервера, сайт должен работать по протоколу HTTPS, чтобы использовать HTTP/2.

HTTP/2 в сравнении с HTTP 1.1: тесты производительности

Вы можете вручную проверить HTTP/2 по сравнению с HTTP 1.1, запустив онлайн тест скорости до и после активации HTTP/2.

В зависимости от структуры и количества ресурсов, загружаемых сайтом, существует несколько вариантов оптимизации. Например, веб-сайт с большим количеством ресурсов требует много соединений HTTP 1.1. Это увеличивает количество посещений, но для HTTP/2 требуется только одно.

Ниже показаны результаты тестирования сайта WordPress с настройками по умолчанию, 2017 темами и 18 загруженными изображениями. Каждая система была опробована три раза через соединение 100 Мбит/с. В результате появилось среднее время приема. Потоки анализировались с помощью браузера Firefox.

Первый тест показывает результаты HTTP 1.1. На загрузку всей страницы и различных барьеров (как показано красной полосой на рисунке ниже) ушло в среднем 1,73 секунды.

HTTP 1.1 и время загрузки потока

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

HTTP/2 и время загрузки потока

После перехода на HTTP/2 среднее время обработки составило 330 мм процентов. Однако чем больше сайт загружается, тем больше соединений ему необходимо создать. Поэтому, если сайт загружает много ресурсов, необходим переход на HTTP/2.

Сжатие Brotli

Третья технология, которую мы рассмотрим, — алгоритм сжатия Brotli, разработанный Google в 2015 году; Brotli продолжает набирать популярность и поддерживается всеми популярными браузерами (кроме Internet Explorer). .

Brotli обладает впечатляющим эффектом сжатия по сравнению с другими алгоритмами. Например, согласно исследованию алгоритмов Google, Brotli превосходит Zopfli (другой современный метод сжатия) на 20-26%.

Активация Brotli.

Если вы используете Nginx, Apache или Microsoft IIS, для активации Brotli доступны следующие разделы

• ngx_brotli, раздел nginx, и
• mod_brotli, раздел в apache, и
• IIS Brotli — расширение, предоставляемое сообществом Microsoft IIS.

После установки одного из вышеупомянутых модулей необходимо скорректировать инструкции. Следует отметить три важных момента

• Типы файлов. Типы файлов, которые Brotli может сжимать, — это CSS, JavaScript, XML и HTML.
• Качество сжатия. Чем выше степень сжатия, тем больше экономия размера файла, хотя это требует больше времени и ресурсов. Степень сжатия Brotli может быть установлена в диапазоне 1-11.
• Статическая и динамическая компрессия. Шаг сжатия Brotli определяет, будет ли создано статическое или динамическое сжатие.

-Статическая компрессия сжимает ресурс еще до того, как пользователь выполнит сам вопрос. В результате, когда приложение запускается, Brotli не нужно сжимать ресурсы — они уже сжаты и готовы к доставке. Эта функциональность встроена в модуль Brotli в Nginx. Статическая компрессия Apache требует дополнительной настройки.

— Динамическое сжатие происходит на ходу. Когда посетитель запускает приложение, ресурс сжимается, а затем доставляется. Это полезно для динамического содержимого, которое необходимо сжимать в каждом приложении. Недостатком является то, что пользователю приходится ждать, пока товар будет сжат перед доставкой.

Конфигурация Brotli для пользователя Nginx может выглядеть следующим образом Эта конфигурация создает динамическое сжатие ("на лету"), уровень сжатия 5 и различные типы файлов.

Чтобы проверить, включен ли Brotli на вашем сервере, откройте инструменты роста Google Chrome и перейдите на вкладку Сеть. Затем выберите ресурс и проверьте заголовки кодировки содержимого. Теперь у вас должна быть цена BR.

Инструменты разработчика от BR доступны в браузере Google Chrome.

Вы также можете выполнить простую команду curl.

Возвращает список заголовков ответа, которые необходимо проверить на значение заголовка content encoding.

Brotli по сравнению с GZIP: тест производительности

Для сравнения размера и скорости приема используются три сжатых онлайн-ресурса. Для обоих методов был определен уровень компрессии 5.

Полос Название	Размер GZIP	Время загрузки GZIP	Размер Brotli	Время загрузки Brotli
jquery.js	33.4 кб	308 миллисекунд	32.3 кб	273 миллисекунды
Dashicons.min.css	28.1 кб	148 мс	27.9 кб	132 миллисекунды
style.css	15.7 кб	305 мс	14.5 кб	271 миллисекунда

Общее количество сжатых ресурсов при использовании GZIP составляет 77,2 KIB, по сравнению с 74,7 KIB при использовании Brotli. При использовании только Brotli размер страницы уменьшается всего на 3,3%.

Для загрузки реконструированных в GZIP ресурсов потребовалось 761 миллисекунда, а для загрузки ресурсов Brotli -Componess — 676 миллисекунд. Улучшение составляет 12,6%.

WebP-изображения

WebP был разработан компанией Google для уменьшения размера изображений. Webp — это формат изображения. Основное преимущество изображений WebP заключается в том, что они меньше по размеру, чем изображения JPEG и PNG. Экономия до 80% может быть достигнута после преобразования изображений JPEG или PNG в WebP.

Недостатком WebP является то, что он поддерживается не всеми браузерами. На момент написания этой статьи — только Google Chrome и Opera. Однако при правильной настройке вы можете предоставлять изображения WebP браузерам, которые его поддерживают, и альтернативные изображения (например, JPEG) другим браузерам.

WebP уменьшает общий размер страницы, ускоряет работу сайта и экономит полосу пропускания.

Как конвертировать и обмениваться данными WebP

Для WordPress, Joomla или Magento вы можете использовать ADD -ON для конвертации изображений через панель управления CMS. Вы также можете использовать конвертер изображений в Интернете для формата WebP.

Некоторые сервисы редактирования изображений также предоставляют API, которые можно использовать для интеграции непосредственно в интернет-проекты. Это позволяет автоматически преобразовывать изображения.

Как упоминалось выше, в настоящее время поддерживаются не все изображения WebP. Поэтому важно иметь резервную копию. Давайте рассмотрим три способа, как это можно сделать.

1) Используйте элементы изображения.

Используя этот метод, вы можете направить HTML-документ на WebP-изображение и оригинальное JPEG-изображение. Поддерживающие браузеры будут отображать WebP, другие браузеры будут отображать изображение по умолчанию, определенное меткой воспроизведения последнего изображения. Рассмотрим следующий пример.

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

2. измените файл конфигурации сервера.

Этот метод использует правила обмена, определенные в файле конфигурации сервера, для возврата к другому формату изображения, если браузер не поддерживает формат WebP. Использует правильный отрывок кода из Apache или Nginx, в зависимости от веб-сервера.

Не используйте этот метод, если вы планируете использовать изображения WebP в сочетании с CDN. Причина этого заключается в том, что CDN будет хранить изображения WebP в своем кэше, когда браузер, поддерживающий WebP, впервые запросит Pollos. В результате следующее приложение будет возвращать изображение WebP, независимо от того, поддерживает его браузер или нет.

3. плагин кэша WordPress

Если вам нужно решение, совместимое с CDN, вы можете использовать временное хранилище ADD -ON, например, Cache Enabler.

WebP против JPEG: тест на производительность

Используйте три изображения JPEG, преобразуйте их в WebP и сравните результаты. Следующие три изображения имеют размер 2,1 МБ, 4,3 МБ и 3,3 МБ соответственно

JPEG 1 Тестируемое изображение.

Тестируемое изображение JPEG

Изображение JPEG 3 Тестирование изображения JPEG

При преобразовании в формат WebP каждое изображение было уменьшено в размере. В таблице ниже показан размер исходного изображения, размер WebP-версии и то, насколько WebP-изображение меньше, чем JPEG-изображение. Изображения были преобразованы в WebP с помощью сжатия с потерей качества на 80.

Название изображения	размер jpeg	Размер WebP	Сбережения
test-jpg-1	2.1 МБ	1.1 МБ	48% от
test-jpg-2	4.3 МБ	1 МБ	77% (%)
тест-JPG-3	3.3 МБ	447 МБ	85,9% (1 МБ)

Потеря качества приводит к уменьшению размера изображения. При применении сжатия с потерями для дополнительной экономии размера в WebP качество находится на том же уровне, что и в JPEG, но размер файла меньше.

Сети доставки контента.

CDN (Content Delivery Networks) ускоряют работу интернет-ресурсов, временно храня их на кластерах серверов. Когда веб-сайт использует CDN, он распределяет основную часть своего движения по сети, направляя посетителей на ближайший сервер CDN.

CDNS хранят ресурсы сайта в течение определенного периода времени посредством временного хранения. Когда временное хранение завершается, сервер CDN создает копию ресурса на сервере сервера и хранит ее на своем собственном сервере. Этот процесс делает запросы более эффективными и позволяет посетителям получать доступ к сайту из многих географических зон.

Если CDN не настроена, все запросы посетителей отправляются на сервер Origin Server. Это вызывает дополнительные задержки, особенно для посетителей, запрашивающих ресурсы из мест, удаленных от сервера Origin Server. Однако при использовании правильно регулируемой CDN посетители перенаправляются на ближайший сетевой сервер для получения необходимых ресурсов. Это минимизирует время применения и время отклика.

Установочные CDN

Характеристики установки CDN зависят от используемой CMS или фреймворка. Однако процесс настройки в основном одинаков на всех платформах.

1. Создайте зону CDN, которая будет отображаться в URL источника (https://yourwebsite.com).
2. Создайте регистрацию CNAME, которая появится в URL, предоставленном службой CDN, из URL CDN (cdn.yourwebsite.com).
3. Интегрируйте CDN в ваш сайт, используя пользовательский URL CDN (следуйте инструкциям в конфигурации сайта).
4. Проверьте HTML сайта, чтобы убедиться, что статические ресурсы вызываются с использованием настроенного вами адреса CDN.

Как только это будет сделано, ресурсы сайта будут доставлены ближайшим сервером CDN. Это увеличивает скорость работы сайта, повышает безопасность и снижает нагрузку на сервер Origin Server.

До и после CDN: тестирование производительности

Результаты теста производительности будут зависеть от местоположения запрашивающего ресурс и от того, где находится ближайший сервер CDN. Для простоты выбраны три места.

• Франкфурт, Германия;.
• Нью-Йорк, США; и
• Торонто, Канада.

Мы решили измерить время загрузки изображений, файлов CSS и файлов JavaScript. Результаты каждого теста отображаются в таблице, независимо от наличия или отсутствия активированной CDN.

Франкфурт, Германия.	Нью-Йорк, США	Торонто, Канада
Изображение, без CDN	222 мс	757 миллисекунд	764 миллисекунды
Изображение, с CDN	32 мс	81 мс	236 мс
Файл JavaScript, без CDN	90 миллисекунд	441 миллисекунда	560 миллисекунд
Файл JavaScript, с CDN	30 миллисекунд	68 мс	171 миллисекунда
CSS файл, без CDN	96 миллисекунд	481 миллисекунда	553 миллисекунды
CSS файлы, CDN	31 миллисекунда	77 миллисекунд	148 мс

Во всех случаях время приема ресурсов, полученных через CDN, было короче, чем без CDN. Результаты зависят от местоположения CDN и посетителей. Однако общая производительность должна быть улучшена.

Заключение

Некоторые из этих технологий все еще находятся на стадии глобального внедрения (например, поддержка браузера, дополнительная программная поддержка). Однако по мере роста спроса совместимость будет увеличиваться.