От автора: CSS используется на веб-странице многими способами и до сих пор работает. Так как методов его применения огромное количество, то существует и множество разных настроек CSS.
Неважно, каким образом он установлен на страницах – CSS обязан помочь отображаться странице быстрее, а не тормозить отрисовку страницы.
Веб-дизайнеры
Способ применения CSS на страницах всецело определяется веб-дизайнерами, а не владельцами сайта. Поэтому дизайнеры пишут привлекательный, хорошо прокомментированный код CSS и помещают его в несколько разных файлов. Они заслуженно считают: «Я проделал прекрасную, удивительную работу». Этому их научили.
К сожалению, подобные этой практики заканчиваются смертоносным образом для производительности вебсайта. Если CSS находится во множестве файлов, то перед отображением страницы в браузере производится тьма запросов, замедляющих ее отображение и серьезно вредящих загрузке на мобильные устройства. Чтобы стала возможной нормальная сетевая производительность, весь CSS должен находиться в одном единственном файле.
Вы заметите, что веб-дизайнеры наконец начали писать код, помогающий пользователям тем, что работает как можно быстрее, хотя в данный момент… Ваш CSS, скорее всего, больше вредит вебсайту, чем помогает ему.
Пример «оптимизированной подачи CSS»
Документация Google и видео скорости страницы говорят о том, как должна выглядеть хорошая настройка CSS.
Не более одной внешней таблицы стилей
Совсем немного CSS в тэгах style для свертывания контента
Никаких вызовов CSS @import
Никакого CSS в таких HTML тегах, как div’ы или h1
Если вы знакомы с различными типами доставки CSS, то можете воспользоваться инструментом доставки css и получить представление о том, каким образом ваша страница или блог его применяют.
Если не знакомы, то не паникуйте, ниже я объясню каждый из них (обещаю: это не так запутанно, как кажется поначалу).
Внешние файлы CSS
Внешние файлы – основной способ применения CSS на веб-страницах и, скорее всего, ваш CSS используется именно таким образом. В разделе head вашего html есть нечто, весьма похожее на…
|
1 |
<link rel="stylesheet" type="text/css" href="//yoursite.com/main.css" media="screen" title="style (screen)" /> |
Так вызывается файл CSS и называется он внешним, потому что стили CSS находятся отдельно от HTML. Внешний файл – это способ обработки CSS де-факто, и в числе его преимуществ имеется кэширование (запоминание) CSS веб-браузером. Проблема возникает, если у вас имеется несколько таких файлов. К несчастью, такое часто случается в WordPress и прочих темах.
Если у вас более одного файла CSS, то их требуется объединить
Когда у вас несколько внешних файлов CSS, браузеру приходится скачивать каждый из них до того, как тот сможет отобразиться на странице. Этим вызывается множество сигналов туда и обратно к отдельным файлам, что выражается в замедленной загрузке вашей страницы. Можно легко изменить этот процесс, объединив их все в один.
Чтобы посмотреть, сколько внешних файлов CSS используется на вашей странице, перейдите сюда
Чтобы получить инструкции по объединению внешних файлов CSS, перейдите сюда
Встроенный CSS
Встроенный CSS – это инструкции, включенные в сам документ HTML. Основное преимущество этого метода в том, что перед отображением вебсайта не требуется искать дополнительный (внешний) файл. Оно имеет значение, только если инструкции CSS совсем небольшие. Если CSS большой, то этот метод вам не подходит.
Встроенный стиль обрабатывается путем размещения инструкций внутри тэгов style, как показано ниже…
|
1 2 3 |
<style> сюда помещается CSS </style> |
Маленький встроенный CSS действительно способен ускорить загрузку страниц в веб-браузере.
Чтобы узнать, применяется ли на вашей странице встроенный CSS, перейдите сюда
Чтобы получить инструкции о том, как встроить CSS, перейдите сюда
Не применяйте @import для вызова файлов CSS
Метод @import применяется там, где внешние файлы CSS вызываются командой @import, а не с помощью прямой ссылки на них, как обсуждалось ранее. Он заставляет вызываемый файл – или файлы – CSS загружаться медленнее, чем при ссылочном способе, потому что загружаться таким методом они могут только по одному. В коде это выглядит так…
|
1 |
@import url("style.css") |
Такие запросы действительно снижают скорость загрузки вашей страницы, но многие дизайнеры до сих пор ими пользуются, поэтому стоит проверить их наличие.
Чтобы посмотреть, используются ли на вашей странице запросы @import, перейдите сюда
Чтобы узнать об этом методе больше, перейдите сюда
Не встраивайте атрибуты CSS в элементы HTML
Очень часто стили вставляются прямо в теги HTML, например, я все время склонен так поступать. В руководстве Google о скорости страниц «Оптимизируйте подачу CSS» говорится, что в любом случае не следует так делать. Утверждается, что это заставляет браузер медленнее отвечать, и не очень умно вставлять в код подобные стили, так как это противоречит Политике безопасности контента W3, являющейся протоколом безопасности, по умолчанию блокирующим стили элементов любого уровня. Эти стили выглядят так…
|
1 |
<p style="float:left;"> or <div style="color:#fff;"> |
В моем коде их тьма, и мне придется много потрудиться, чтобы избавиться от них.
Чтобы посмотреть, есть ли на вашей странице подобный CSS, перейдите сюда
В заключение
Как видите, CSS используется на страницах многими способами, но в итоге все равно придется чистить код и пользоваться рекомендованными методами доставки CSS для того, чтобы наши сайты грузились как можно быстрее.
Рекомендуется следующее:
Объединяйте внешние таблицы стилей CSS
Встраивайте в тэги style совсем немного CSS
Где можно, не делайте к CSS запросов @import
Не вставляйте CSS в элементы HTML вроде div’ов или h1
Автор: Patrick Sexton
Источник: //www.feedthebot.com/
Редакция: Команда webformyself.
