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

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

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

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 в код приводит к сокращению времени ответа сервера у конечного пользователя в браузере. Еще не проверял это утверждение, но записал его сюда для себя и для тех, кто захочет проверить. Я предполагаю, что есть смысл карусели и галереи, работающие только на главной сформировать скриптами только на главной – и не размещать их в общий файл скриптов.

  • Tagformat не веб-студия
  • Я частный frontend-разработчик
  • Вашим проектом я буду заниматься индивидуально
Отправить заявку
Написать отзыв
Отзывы
От реальных существующих клиентов