7 трюков по улучшению производительности CSS

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

Что такое CSS?

Каскадные таблицы стилей или CSS — это язык, используемый для определения визуального представления веб-сайта на основе содержимого, содержащегося в документе языка разметки. Он считается одной из «краеугольных технологий» Интернета наряду с HTML и JavaScript. CSS обычно хранится во внешних таблицах стилей или .css-файлах, но также может быть интегрирован непосредственно в HTML-документы.

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

Производительность CSS и скорость сайтов

При оценке скорости веб-сайта существует множество показателей эффективности, однако два из них выделяются:

Время до первого байта

Онлайн курс «Веб-разработчик с нуля до PRO»

Изучите курс и разработайте полноценную CRM-систему управления контактными данными клиентов

Вы научитесь верстать сайты на HTML и CSS, изучите JavaScript. Сможете разрабатывать на PHP серверную часть сайта — и сделаете первые проекты для портфолио.

Научитесь разрабатывать сайты с помощью HTML и CSS
Научитесь делать анимации, слайдеры, выпадающее меню с помощью JavaScript
Сможете создавать сайты и веб-приложения повышенной сложности на PHP

Время начала рендера

Время до первого байта – это сколько времени требуется, чтобы посетители получили первый байт данных после запроса URL-адреса. Время начала рендеринга — это момент, когда браузер пользователя фактически начинает отображать контент. Первый в значительной степени зависит от настройки вашего сервера, но последний больше зависит от того, как структурирован ваш CSS.

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

Как производительность CSS влияет на время начала рендера

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

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

Улучшение производительности CSS: знакомство с инлайном

Одним из способов обеспечения быстрой доставки CSS является практика встраивания. Вложение означает вставку внешних ресурсов CSS непосредственно в документы HTML. Этот метод лучше всего подходит для небольших ресурсов. Однако он сильно отличается от обычного способа.

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

Чтобы встроить CSS, просто скопируйте нужный код CSS из внешнего файла CSS и вставьте его между тегами style в разделе head вашего документа HTML следующим образом:

.your-styles < font-weight : bold ; color : #222222 ;

Инлайн крупных ресурсов CSS

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

Critical CSS — это проект GitHub, который поможет вам выбрать, какой CSS принадлежит верхней части страницы, но вы также должны выполнить ручную проверку, чтобы исключить отсутствие критических компонентов.

После минификации и сжатия все стили верхней части страницы, скрипты, разметка в идеале должны весить менее 14 кб. Так как 14 kb — это примерно объем данных, которые сервер может отправить в первом запросе. Пребывание под этим порогом позволяет пользователям получить данные верхней части страницы в первом пакете, который они получают.

Улучшение производительности CSS с помощью асинхронной загрузки и кэширования

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

Умный способ обойти эту проблему — асинхронная загрузка. К сожалению, нет способа асинхронно загружать файлы CSS изначально, но вы можете использовать скрипт типа loadCSS.js.

Инструменты для улучшения производительности CSS

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

Еще советы по улучшению производительности CSS

1. Используйте preload / HTTP/2 Push

Ресурсная подсказка preload указывает браузеру вытянуть ресурсы заранее. Чтобы дать CSS фору, укажите в HTML ссылку следующим образом:

Как ускорить загрузку сайта: 7 советов по оптимизации для начинающих

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

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

Введение: как загружаются сайты

В материале под названием «Что происходит, когда пользователь вбивает адрес сайта Google.com» очень подробно описаны все процессы, связанные с посещением сайта. Если говорить кратко, то между тем, как посетитель сайта вобьет в адресную строку его URL и получит ответ, в общем виде проходит несколько этапов:

1. Сначала браузер осуществит DNS-запрос по имени сайта.
2. Далее инициируется TCP-подключение к серверу, на котором этот сайт расположен.
3. Следом устанавливается соединения http или https.
4. Потом запрашивается нужная страницы и загружается ее HTML-код.
5. Стартует парсинг HTML.
6. После этого браузер начинает подгружать внешние ресурсы, связанные со страницей (стили, изображения, скрипты и так далее).
7. В итоге рендерится финальная версия страницы со всем контентом.
8. Затем исполняется JS-код — скрипты могут потребовать обработки дополнительных сетевых запросов, изменять страницу или её шаблон, так что возможен и новый круг рендеринга.

Первый шаг: понять, что тормозит

Бывший инженер Facebook и основатель стартапа Pave Джастин Митчел в треде на Quora так описывал начало работы по оптимизации загрузки сайта:

Прежде чем начинать чинить, надо узнать, что сломалось. Если ваш сервер генерирует страницу 5 секунд, то использование CDN не поможет, если у вас на каждый просмотр страницы загружается по 10 мегабайт картинок, добавлять memcache в бэкенд-архитектуру тоже бессмысленно.

Существуют различные инструменты анализа производительности сайтов. К примеру, можно использовать бесплатный сервис от Google, который анализирует производительность сайта и выдает рекомендации по ее улучшению:

Существует несколько важных метрик быстродействия сайта. Одна из них — это время до первого байта (TTFB — time to first byte), которая показывает, как быстро браузер начинает получать данные от сервера после отправки запроса. Также важно замерять начало рендеринга страницы и время загрузки (load time).

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

Вот какие шаги по серверной оптимизации для ускорения загрузки сайта применяют чаще всего.

Расширение ресурсов сервера

Если медленно работает сам сервер, то нет никакого смысла тратить время и силы на клиентскую оптимизацию. В случае небольших проектов при росте нагрузки сайт часто начинает тормозить именно из-за того, что ему перестает хватать ресурсов хостинга — например, CPU и дисков.

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

Кэширование

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

Некоторые элементы можно закешировать и не загружать каждый раз при заходе на сайт. Это позволяет серьезно сократить время загрузки:

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

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

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

Существует несколько инструментов для компрессии изображений, среди которых TinyPNG, Kraken.io и JPEGmini. Кроме того, имеет смысл попробовать включить конвертацию изображений в формат WebP. Он был разработан Google, и по данным компании такие изображения на 26% легче PNG-файлов и на 25-34% меньше JPEG-картинок.

Чтобы активировать конвертацию, можно добавить в файл .htaccess следующий код:

 RewriteEngine On RewriteCond % image/webp RewriteCond %/$1.webp -f RewriteRule ^(path/to/your/images.+)\.(jpe?g|png)$ $1.webp [T=image/webp,E=accept:1] Header append Vary Accept env=REDIRECT_accept AddType image/webp .webp

К сожалению, на данный момент формат WebP поддерживается далеко не всеми браузерами — пока среди них только Chrome и Opera.

CDN

Еще один «инфраструктурный» метод снижения задержек — использование сетей доставки контента (content delivery network, CDN). Такие сети состоят из серверов в разных точках мира. При подключении сайта к сети на входящих в нее серверах создают копии файлов веб-ресурса, а затем пользователю отдают данные с ближайшего к нему сервера — в итоге скорость загрузки увеличивается.

Использование Gzip

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

Включить использование Gzip довольно просто — нужно просто добавить несколько строк кода в файл .htaccess. К примеру, при использовании веб-сервера Apache веб-мастерам доступен модуль mod_gzip, чтобы активировать Gzip в таком случае нужно внести в .htaccess такой код (подробнее — в туториале на SitePoint):

mod_gzip_on Yes mod_gzip_item_include mime ^application/x-javascript$ mod_gzip_item_include mime ^application/json$ mod_gzip_item_include mime ^text/.*$ mod_gzip_item_include file .html$ mod_gzip_item_include file .php$ mod_gzip_item_include file .js$ mod_gzip_item_include file .css$ mod_gzip_item_include file .txt$ mod_gzip_item_include file .xml$ mod_gzip_item_include file .json$

Оптимизация кода сайта

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

Также стоит избегать инлайн-CSS и JS-кода. В таком случае браузеры будут кэшировать эти внешние ресурсы, что позволит сэкономить время загрузки. Также JS и CSS следует минифицировать – сделать это можно с помощью инструментов вроде JSMIN, YUI Compressor и Packer.

Использование связки Nginx+Apache

Для увеличения скорости загрузки страниц можно использовать связку Apache и Nginx. Это два самых распространённых веб-сервера в мире, популярность объясняется мощью Apache и скоростью Nginx. Помимо плюсов, у каждого инструмента есть и свои недостатки: например, в Apache есть ограничения памяти сервера, в то время как Nginx, эффективный для статических файлов, нуждается в помощи php-fhm или аналогичных модулей для загрузки динамического контента.

Тем не менее можно и даже нужно объединить два веб-сервера для большей эффективности, используя Nginx, как статический фронтенд и Apache — как бэкенд. Такое решение положительно скажется на скорости загрузки страниц сайта.

Заключение: полезные ресурсы и статьи по теме оптимизации работы сайтов

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

• Как ускорить сайт или факторы, влияющие на загрузку сайта
• Очень шустрый блог на WordPress при помощи связки nginx + PHP-FPM + MariaDB + Varnish (продолжение)
• Топ-10 советов о том, как увеличить скорость загрузки страницы
• Ruhighload – ресурс со статьями по теме оптимизации
• Топ-15 бесплатных инструментов проверки производительности сайта
• Как ускорить работу сайта: лучшие практики Yahoo
• 10 способов ускорить сайт и увеличить конверсию

• оптимизация
• ускорение работы сайтов
• руководство для начинающих

Как улучшить скорость загрузки страниц и увеличить конверсию сайта?

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

893 просмотров

Согласно отчету Google пользователи на 24% реже утрачивали интерес к сайту, если его скорость загрузки соответствует пороговым значениям – не более 2 секунд.

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

Проблемы при низкой скорости

Низкая скорость загрузки страниц – это причина двух серьезных проблем:

1. Пользователи не станут ждать, пока загрузится весь контент страницы, и уйдут к конкурентам в поисках альтернативы.
2. Из-за долгих загрузок алгоритмы Яндекса и Google не выводят сайт в топ выдачи. Поисковые системы анализируют показатели и фиксируют факт быстрого ухода пользователей. У того же Google для этого есть отдельный сервис – PageSpeed Insights (GPSI). Он оценивает сайты по шкале от 0 до 100 и выдает рекомендации по улучшению параметров.

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

• социальная сеть;
• знакомый сайт;
• официальные интернет-ресурсы органов власти.

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

Влияние скорости загрузки на конверсию

Теме влияния скорости загрузки страниц на продажи посвящено одно из исследований команды маркетологов Unbounce – Page Speed Report For Marketers. В нем приведены результаты опросов пользователей о рекламных приоритетах, интернет-привычках, восприятии мобильных версий сайтов и многое другое. По итогу исследования удалось выявить два основных момента:

1. 81% маркетологов уверены, что скорость загрузки страниц влияет на показатель конверсии.
2. Почти 70% пользователей считают, что высокая скорость загрузки повышает вероятность покупки.

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

Если страница медленная – ее станет реже посещать почти половина целевой аудитории, а треть и вовсе не вернется на сайт.

Более того, низкая производительность лишает сайт мобильного трафика. Для многих он является приоритетным, ведь по данным Яндекс.Радара более 65% пользователей пользуется интернетом со смартфонов или планшетов. И большая часть из них ожидает, что мобильная версия сайта будет работать так же быстро, как и десктопная.

Как повысить скорость загрузки страниц?

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

В целом оптимизацию можно разделить на три сегмента: контент, сервер и код.

Оптимизируем контент

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

1. Сжатие текстовых файлов и изображений. Картинки можно конвертировать в новые форматы: JPEG 2000, JPEG XR или WebP. Для сжатия текста используют алгоритмы, позволяющие уменьшить размер файлов для более быстрой передачи между сервером и браузером.
2. Использование адаптивных изображений через атрибуты srcset и позволяет браузеру выбрать, какое именно показать в зависимости от размера экрана пользователя. Также можно настроить lazyload – ленивую загрузку. Она снижает нагрузку на сервер, подгружая изображения по мере скроллинга или навигации.

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

Улучшаем работу сервера

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

1. Сокращение времени ответа. Для этого по логам определяют наиболее затратные операции, сокращают базу данных и осуществляют другие действия. При необходимости меняют хостинг на более производительный.
2. Снижение количества HTTP-запросов. Чем меньше данных запрашивается от сервера, тем быстрее загрузится страница. Влияние оказывает не только размер файлов, но и их количество. Например, совсем маленькие изображения можно загружать с помощью стандарта Base64 или показывать вместо них CSS-спрайты.
3. Кэширование файлов. Указывает браузеру на то, какие файлы нужно сохранить в памяти ПК или мобильного устройства. При повторном посещении страницы они не будут загружаться, что увеличит скорость загрузки страницы.
4. GZIP-сжатие. Оно позволяет увеличить скорость загрузки за счет сокращения размера файлов со стороны сервера.

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

Оптимизируем CSS и JavaScript-файлы

При оптимизации CSS и JavaScript перед разработчиками стоят две задачи: сжатие и объединение. Данные при этом могут загружаться как отдельным файлом, так и сразу встраиваться в код страницы сайта. Среди основных направлений оптимизаций выделяют:

1. Минимизирование данных. Удаление лишнего кода JS или CSS экономит ресурсы и снижает нагрузку на браузер за счет меньшего объема дополнительных файлов.
2. Выставление приоритетов загрузки. Важно определить, какой код JS и CSS нужен для быстрого отображения полезного контента. Все остальное (например, формы подписки) можно загружать в последнюю очередь.

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

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

Быстрая загрузка страниц – это важный критерий при оценке сайта. Поисковые алгоритмы Яндекса и Google с каждым обновлением уделяют ему все больше внимания. Особенно важна скорость загрузки при высокой конкуренции в выдаче – в этом случае страницы с низкой производительностью могут стать причиной плохой конверсии.

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

Мы же в своей работе включаем это направление оптимизации в комплексное SEO-продвижение. Заметили проблемы со скоростью загрузки страниц? Обращайтесь! Мы устраним причины падения трафика, ухода посетителей и низких позиций в выдаче.

При подготовке материала использовались источники:
https://webformyself.com/7-tryukov-po-uluchsheniyu-proizvoditelnosti-css/
https://habr.com/ru/companies/kingservers/articles/346956/
https://vc.ru/seo/499889-kak-uluchshit-skorost-zagruzki-stranic-i-uvelichit-konversiyu-sayta