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

Когда дело доходит до веб-производительности, то пользователям не нравится ждать, поэтому очень важно «отшлифовать» ваш сайт и максимально ускорить веб-страницы. Что же определяет эту «скорость страницы»? Это следующие параметры:

  • поиск DNS
  • SSL связь (если применимо)
  • HTTP ответ
  • поиск DOM
  • HTML отрисовка
  • CSS отрисовка
  • События JavaScript

Из каждого элемента складывается общее время, потраченное на получение, визуализацию и выполнение кода, в целом это всё время от момента нажатия клавиши ввода в адресной строке до появления страницы в веб-браузере.

Имеет ли производительность значение?

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

Давайте разберёмся, что можно и нужно делать для повышения производительности сайта!

Общие рекомендации

Не злоупотребляйте плагинами

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

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

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

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

Минимизация HTTP запросов

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

Общие советы по снижению HTTP запросов:

  • Объединяйте стили и скрипты для уменьшения количества файлов
  • Используйте вместо CSS изображений, когда это возможно
  • Комбинируйте встроенные изображения в ваши стили, чтобы избежать увеличения размеров страниц
  • Используйте кэширование браузера.

Минификация данных

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

Поэтому перед выдачей кода полезно минифицировать HTML, CSS и JavaScript, когда это возможно.

Уменьшение редиректов

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

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

Изображения

Выбор правильного формата файла

Изображения могут занимать много времени для загрузки.

Средний размер веб-страниц возрос с 702 кБайт в 2010, до 1042 кБайта в 2012 и прогнозируется в 2344 кБайта в 2015 году. И большинство от этого объёма занимает изображения.

В изображениях следует учесть их формат, так как изображения часто содержат данные, которые не используются в веб. Например, JPEG имеет Exif метаданные из камеры — дату, модель и место, всё это не используется в браузере и абсолютно бесполезно.

Наиболее распространенные форматы файлов:

  • PNG (Portable Network Graphics)
  • TIFF (Tagged Image File Format)
  • JPEG/JFIF (Joint Photographic Experts Group File Interchange Format)
  • GIF (Graphic Interchange Format)

Для большинства сайтов PNG велики, как это сжатие без потерь, формат, который используется для иллюстраций, текста, графики и логотипов. JPG не предлагают сжатие без потерь, поэтому они должны использоваться только для фотографий.

Сжатие изображений

Есть 2 типа сжатия: без потерь (не ухудшение качества) и с потерями (ухудшение качества). Лучше использовать первый при сжатии изображений, но иногда из-за формата файла вы потеряете в оптимизации. Такое может произойти при JPEG, сжатие которого вызовет потери в оптимизации, так как формат не предусматривает сжатие без потерь.

Вот некоторые полезные инструменты для сжатия изображений:

Онлайн

Десктопные

Не масштабируйте изображения в разметке

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

<img width="100" height="100" src="logo.jpg" alt="Logo">

В таком случае отправляется полное изображение и сокращается время загрузки.

[[$googleAdsenceResponsive?]]

Использование иконочных шрифтов

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

Иконочные шрифты могут быть в любом из форматов: SVG, EPS, AI, PSD, PDF, а также CSS спрайты, однако браузеры захватывают первый формат файла и игнорируют все остальные, так что лучше выбрать один формат такой, как SVG при построении иконочного шрифта.

Пользователи могут сделать свой собственный иконочный шрифт с помощью:

В качестве альтернативы сделать это самостоятельно, следуя этому руководству по созданию SVG иконочного шрифта .

Данные URI

Данные URI — это техника встраивания содержимого, например, изображений в CSS, так что они отправляются в одном запросе HTTP, а не в нескольких, например здесь:

.icon-foobar { background-image: url('foo.png'); }

потребуется два запроса: один для файла CSS, а другой для изображения, в то время с помощью URI метода, нужен один будет запрос:

.icon-foobar { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAACnej3aAAAAAXRSTlMAQObYZgAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII%3D'); }

Тем не менее, не используйте этот метод, если вы не сжимаете gzip’ом ваш HTML / CSS в HTTP, как над головой размер может быть значительно больше.

HTML

Стили сверху, скрипты снизу

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

`

CDNify `

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

`

Ускоряем всё до 1й космической!

`

Не встраивать или включайте код

Вы можете включать CSS или JavaScript в страницы с помощью 3 различных методов:

  • Inline — в строках: CSS определяется внутри атрибута стиля и JavaScript внутри атрибута OnClick.
  • Embedded — встроенный: CSS определяется внутри тега