Оптимизация — это то, что мы должны рассмотреть в самом начале.

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

Прежде чем изучать инструменты для оптимизации приложений, мы рассмотрим структуру проекта. Сайт в этом блоге — это мое портфолио , созданное с использованием чистого HTML, CSS и JavaScript. Представьте себе создание пользовательского интерфейса без React или Angular. Возможно ли это в наши дни?

Некоторые из вас скажут, что это пустая трата времени, и это правда. Но, поскольку сайт статичен с несколькими страницами, я решил, что это отличный шанс избежать абстракций более высокого уровня и выйти и узнать все о показателях веб-производительности и SEO.

Возможность окупилась по двум причинам:

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

Перво-наперво

Прежде чем мы займемся серьезными вопросами, мы разожжем огонь с простой задачи. Оптимизация изображения является наиболее важной, так как это одна из вещей, за которые Lighthouse больше всего наказывает. Почему это так? Lighthouse тестирует первую нагрузку, имитирующую медленную сеть 3G, так как это все еще самая распространенная сеть в мире.

Загрузка 1 МБ может занять до 3 секунд, а что, если у нас есть изображения с высоким разрешением? Пользователи, вероятно, перестанут просматривать сайт, так как требуется 50 мс, чтобы определить, нравится ли он им . Забавный факт, это проще всего решить. Решение состоит в том, чтобы преобразовать все изображения в формат WebP .

Избавьтесь от ненужных вещей при первой загрузке!

Две наиболее важные вещи, влияющие на оценку, — это самая большая содержательная отрисовка — LCP и общее время блокировки — TBT (которые несут 50% рейтинга производительности).

The Largest Contentful Paint — это один из основных веб-показателей , который оценивает скорость отображения. Это можно решить, следуя Web Vitals Patterns . Для TBT нам нужна дополнительная работа.

Общее время блокировки — это период времени, в течение которого страница не может реагировать на взаимодействие. Оно должно быть меньше 50 мс. JavaScript — это однопоточный язык, и мы должны позаботиться о том, чтобы не перегрузить основной поток. Проблема с перегрузкой была решена с помощью Web Workers для кеширования шрифтов, изображений, HTML, CSS и JS — всего статичного.

Другие разумные вещи — удалить ненужный код CSS и разделить его на несколько файлов. Мы также должны удалить неиспользуемый JS-код, но это невозможно без сборщика. К счастью, в данном случае JS-код не сильно на это влияет.

Давайте начнем тестировать с Маяком!

Если мы хотим разместить сайт в Google с высоким индексом , необходимо учитывать две вещи:

• Поисковая оптимизация — SEO
• Доступность.

Google уделяет большое внимание доступности контента ( девиз. Доступен для всех ) для всех, кто просматривает веб-страницы, независимо от того, включают ли это люди с временными или постоянными ограничениями. Нет совпадений, чтобы рассказать о решении, так как будет четкий вклад для устранения проблем.

Усильте свою безопасность!

Еще одна важная статистика находится в рубрике «Лучшие практики». Пожалуй, самая важная функция, если тип приложения предполагает интеграцию с различными внешними сервисами (например, платежными системами). В этом случае мы должны уделить особое внимание следующим вещам:

Сайт должен быть HTTPS

Некоторые службы интеграции не могут работать без безопасного соединения, например Stripe API .

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

Сайт размещен на Netlify (в рамках бесплатного плана хостинга ). Единственное, за что вам нужно платить, это домен. После того, как вы купили домен, вы должны указать серверы имен Netlify (NS) для вашего купленного домена — создайте NS-запись на провайдере домена.

Еще одно готовое решение, предоставляемое через Netlify, — это SSL-сертификат, автоматически назначаемый вашему домену. Это может сэкономить вам много времени, так как установка сертификата SSL может занять много времени.

Избегайте использования библиотек с риском для безопасности

Учитывая, что многие современные программные решения зависят от сторонних сервисов, мы должны заботиться об их качестве. Многие открытые ошибки в библиотеках с открытым исходным кодом говорят нам, что мы должны дважды подумать, прежде чем включать их в нашу систему.

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

Существует практический инструмент , который документирует риски безопасности программного обеспечения. Достаточно ввести домен, и мы получим всю информацию о типе риска и версии найденного ПО.

Веб-сайт Национального института стандартов и технологий (NIST) является полезным ресурсом для всех зарегистрированных угроз безопасности. Иногда нам не нужно вытаскивать угрозы и обновлять версию, потому что, возможно, мы не используем часть сервиса с риском.

Интеграция политики безопасности контента (CSP)

CSP — это наиболее эффективная политика защиты от межсайтового скриптинга ( XSS ) и внедрения данных. С «идеальной» конфигурацией CSP посетители вашего сайта защищены от вредоносного спагетти-кода.

С CSP вы контролируете ресурсы, представленные на веб-сайте. Проще говоря, CSP — это строка с директивами для браузера загружать ресурсы (HTML, CSS, JS, изображения, видео и т. д.) только из доверенных источников, определенных в политике. Пример хорошей политики CSP:

Content-Security-Policy = "
 default-src 'none'; 
 base-uri 'self'; 
 style-src 'self' https://fonts.googleapis.com; 
 script-src https://*.googleapis.com https://*.gstatic.com *.google.com https://*.ggpht.com *.googleusercontent.com blob:; 
 form-action 'self'; img-src 'self' https://*.googleapis.com https://*.gstatic.com *.google.com *.googleusercontent.com data:; 
 connect-src 'self' https://*.googleapis.com *.google.com https://*.gstatic.com data: blob:; 
 font-src 'self' data: https://fonts.gstatic.com; 
 object-src 'none'; 
 media-src 'none'; 
 frame-src *.google.com; 
 child-src 'self'; 
 worker-src 'self' blob:; 
 frame-ancestors 'none'; 
 manifest-src https://alenvlahovljak.com/manifest.json
"

Добавить заголовок Strict-Transport-Security

Политика Strict Transport Security — это указание браузеру избегать загрузки сайта с использованием HTTP и автоматически преобразовывать все попытки доступа к сайту с использованием только HTTPS-запросов. Пример стандартной конфигурации следующий:

Strict-Transport-Security = "max-age=31536000; includeSubDomains; preload"

Попробуйте это на вкладке «Сеть» в режиме инкогнито. Во-первых, браузер запрашивает страницу HTTP, а затем политика HSTS вызывает другой запрос через внутреннюю переадресацию (307), чтобы запросить страницу HTTPS. После этого перезагрузите страницу, и вы увидите только один запрос (200) к HTTPS.

С директивой предварительной загрузки сайт запрашивает включение домена в список предварительной загрузки HSTS. Список предварительной загрузки содержит список всех сайтов, отмеченных как надежные источники по умолчанию. Другими словами, он никогда не будет запрашивать HTTP, а всегда будет запрашивать HTTPS, поскольку домен жестко закодирован в движке браузера. Большинство основных браузеров (Chrome, Firefox, Safari, Edge) имеют списки предварительной загрузки HSTS.

Существует веб-сайт, с которого вы можете вручную запросить включение в список предварительной загрузки Chrome HSTS.

X-XSS-защита

X-XSS-Protection — это политика, которая предотвращает загрузку при обнаружении XSS-атак. Эта защита в основном не нужна в современных браузерах, где сайты реализуют надежный CSP. Но в случае старых браузеров (конечно, Internet Explorer), которые не реализуют политику CSP уровня 2 , рекомендуется, и это всего одна строка кода:

X-XSS-Protection = "1; mode=block"

X-Frame-Options — это заголовок безопасности, который сообщает браузеру, может ли сайт быть представлен в iframe. Clickjacking — пример атаки, использующей эту проблему безопасности. Вредоносные сайты могут обманным путем заставить пользователей переходить по ссылкам на вашем сайте, даже если они могут выглядеть не на вашем сайте.

X-Content-Type-Options — это заголовок, который указывает браузеру не загружать скрипты и таблицы стилей, если сервер не укажет правильный тип MIME через заголовок Content-Type. Без него браузер может выполнять анализ MIME (угадывание типа MIME по байтам ресурса), что может привести к XSS-атаке.

Оба заголовка можно настроить следующим образом:

X-Frame-Options = "SAMEORIGIN"
X-Content-Type-Options = "nosniff"

Это было почти все от меня. Я дам ссылки на некоторые полезные инструменты, которые могут помочь вам настроить сайт(ы) и изучить новые заголовки (такие как Permissions-Policy ), поступающие в браузеры. Вот список инструментов:

• webhint (инструмент для веб-анализа),
• VulDB (база данных всех зарегистрированных проблем безопасности программного обеспечения),
• CSP-Fiddler-Extension (настройте CSP для нужд вашего сайта),
• DNS SPY (проверка записей DNS),
• SSL Labs (проверка SSL),
• Обсерватория Mozilla (проверьте заголовки).

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