Список полезных практик для ускорения работы веб-сайта.

Предисловие.

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

1. CSS

Начну с моего любимого CSS. Большинство мнений в сети сводится к таким тезисам:

  • Стили необходимо стремится располагать первыми в коде. В самом верху секции <head> после мета тегов (title, meta description, разметки Open Graph) и до критически важных подключений javascript библиотек (jquery, jquery ui, jquery migrate и др.).

В спецификации html однозначно указано, что таблицы стилей должны быть включены в <head> страницы. Ни одна из альтернатив: пустой белый экран или мигание не стилизованного контента — не стоит риска. Оптимальное решение — следовать спецификации html и загружать таблицы стилей в <head>.

  • Избегать использование CSS выражений. Выражения CSS — это мощный (но и опасный) способ динамического создания свойств CSS. Они поддерживались в IE, начиная с версии 5, но считались устаревшими, начиная с IE8. Например, цвет фона можно настроить на чередование каждый час с помощью выражений CSS:
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

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

  • Подключать CSS рекомендуется через тег <link>, а не через @import.

Я много гуглил и читал информации по этому вопросу. Позже начал применять эту рекомендацию повсеместно. Стало очевидно, что большинство специалистов утверждающих, что <link> загружает стили параллельно, а @import последовательно (соблюдая очередность) все же правы.

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

Как итог — CSS должен быть наверху и подгружаться параллельно, чтобы обеспечить прогрессивный рендеринг.

2. Javascript

  • Поместите, по возможности, скрипты внизу — ближе к закрывающему тегу </body>.

Проблема, связанная со скриптами javascript, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP / 1.1 предполагает, что браузеры загружают не более двух компонентов параллельно на одно имя хоста. Если вы обслуживаете свои изображения с нескольких имен хостов, вы можете получить более двух загрузок параллельно. Однако во время загрузки сценария браузер не будет запускать другие загрузки, даже с другими именами хостов.

Иногда бывает непросто переместить скрипты в подвал. Если, например, сценарий использует document.write для вставки части содержимого страницы, его нельзя переместить ниже по странице. Также могут быть проблемы с областью видимости. Во многих случаях есть способы обхода этих ситуаций.

Часто возникает альтернативное предложение — использовать отложенные скрипты. Атрибут defer указывает, что сценарий не содержит document.write, и указывает браузерам, что они могут продолжить рендеринг. Если сценарий можно отложить, его также можно переместить в нижнюю часть страницы. Это ускорит загрузку ваших веб-страниц.

  • Сделайте JavaScript и CSS внешними.

Использование внешних файлов в реальном мире обычно позволяет создавать более быстрые страницы, поскольку файлы JavaScript и CSS кэшируются браузером. JavaScript и CSS, встроенные в HTML-документы, загружаются каждый раз при запросе HTML-документа. Это уменьшает количество необходимых HTTP-запросов, но увеличивает размер HTML-документа. С другой стороны, если JavaScript и CSS находятся во внешних файлах, кэшированных браузером, размер HTML-документа уменьшается без увеличения количества HTTP-запросов.

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

3. Изображения

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

  • Оптимизация изображений.

Оптимизировать изображения можно несколькими способами. На CMS бывает достаточно поставить хороший проверенный плагин. На проектах по сложнее, на фреймворках, устанавливать дополнительные решения либо разрабатывать свои. В любом случае, следует стремится к использованию самых современных форматов (например .svg или .webp) и к оптимальному сжатию с сохранение качества картинки.

Про объединение в спрайты я писать не буду – это уже прошлое. Почему? Все больше мониторов 2к, 4к Full HD, Retina и т.д. где каждый пиксель это уже сам по себе контейнер пикселей. В итоге любое .png будет выглядеть размытым, мутным и выглядеть не презентабельно по причине несовпадения масштабов.

  • Отложенная загрузка изображений.

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

<img src="loading.gif" data-src="original-image.jpg"/>

Очевидно, что атрибут data-src им ни о чем не скажет. А там находится как раз та ссылка на оригинальное изображение, которое нужна для индексации.

Бонусом перестанет адекватно работать разметка (микроразметка Schema и так же Open Graph).

Поэтому, если сделали отложенную загрузку, то готовьтесь повозиться. Необходимо исключить из обработки изображения, которые используются в микроразметке и обязательно проследить, что бы вся ссылочная масса на изображения формировалась в sitemap-images.xml.

4. Gzip сжатие и валидация Html, оптимизация CSS, JS.

  • Html – gzip и валидация.

Валидный html код – код не содержащий ошибок спецификации. Большинство уже использует html5, поэтому и спецификацию необходимо проверять этого формата. Самое острое внимание необходимо уделять именно ошибкам (выделенные красным цветом error и fatal error). Рекомендованные исправления (оранжевого цвета) критического влияния не оказывают, исправляйте по возможности.

Gzip сжатие в любой CMS включается просто. Его необходимо включать всегда.

  • Оптимизация CSS и JS

Я использую только минификацию (minification). Объединения файлов в один, выносы всего вверх или вниз – в итоге оборачивается проблемами почти всегда. Кроме одно страничных сайтов где только текст и две картинки. На больших сайтах – всегда из-за этого только проблемы. А вот сжатие, уменьшение размера – полезно!

5. Кеширование. DNS.

Масса вариантов. От плагинов до включения на стороне хостинга различных дополнительных бустов-ускорителей: memcache, opcache, redis и так далее.

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

Подгрузка статических файлов (.css, .js, .pdf, .mp4, .jpeg, .png) раньше довольно не плохо помогала. Сейчас я видел доказательств тому. Что со своего сервера, что с другого – никакой особой разницы, только деньги на ветер и вечные сюрпризы из-за зависимости от сторонних серверов.

6. Шрифты.

  • Форматы шрифтов только веб-оптимизированные.

Тут все коротко и ясно – .woff и .woff2 специально разработаны и сжаты для использования на веб-страницах. Никакие .ttf его не заменят, но подключать и этот формат необходимо для поддержки устаревших браузеров. Современны браузеры сами обнаружат оптимизированный формат и загрузят именно его.

  • Preload для иконочных и критически-важных декоративных шрифтов.

Частенько мы все видим как при загрузке страницы изначально отображается какой-то подозрительный шрифт системный, который через пару секунд, при загрузке нужных CSS превращается в красивый. Это можно ускорить с помощью атрибута для <link rel="preload"/> и шрифт будет подгружаться заранее.

Описывать приемы применения атрибута я в этой статье не буду. Слишком большой объем разъяснять. Посвятим этому отдельную статью и оставлю потом здесь ссылку на нее.

7. Ошибки 404.

HTTP-запросы обходятся дорого, поэтому выполнение HTTP-запроса и получение бесполезного ответа (например, 404 Not Found) совершенно не нужны и замедлит работу пользователя без каких-либо преимуществ.

На некоторых сайтах есть полезные сообщения 404 «Вы имели в виду X?», что очень удобно для пользователей, но также расходует ресурсы сервера (например, базу данных и т. д.). Особенно плохо, когда ссылка на внешний JavaScript неверна и результат – 404. Во-первых, эта загрузка блокирует параллельные загрузки. Затем браузер может попытаться проанализировать тело ответа 404, как если бы это был код JavaScript, пытаясь найти в нем что-то пригодное для использования.

В заключение:

Во всем важна мера. оптимизируйте сайт без слепого фанатизма.
не ориентируйтесь на Google Page Speed возводя его в ранг идеала,
это всего лишь рекомендательный аудит указывающий на проблемные места.
При оптимизации – всегда заботьтесь о том, что бы сайт был удобным
для пользователей. В первую очередь!
string(2) "US"
  • Tagformat не веб-студия
  • Я частный frontend-разработчик
  • Вашим проектом я буду заниматься индивидуально
Отправить заявку
Написать отзыв
Отзывы
От реальных существующих клиентов