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

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

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

Проблема в том, что браузер не отображает любую часть страницы (это не касается Opera: у нее время отображения страницы без полной загрузке файлов стилей задано по умолчанию в настройках, посмотреть их можно следующим образом: ‘preferences’ (ctrl-f12) -> ‘advanced’ -> ‘browsing’ -> ‘loading’ или ‘инструменты’ -> ‘настройки’ -> ‘дополнительно’ -> ‘перемещение’ -> ‘загрузка’), пока не загрузит все файлы стилей — в том числе и те из них, которые не предназначены для устройства, с помощью которого производится отображение страницы. Другими словами, браузер не покажет страницу, пока не загрузит и файл стилей для принтера, хотя он совсем и не требуется для визуализации страницы. Это неправильно с точки зрения производительности, но это так (Safari, на самом деле, ведет себя как раз «правильно»: ненужные файлы не задерживают загрузку, но это связано с особенностью модели визуализации, о нем более подробно рассказывается ниже).

Решение выглядит весьма тривиально: мы можем в общем CSS-файле объявить правила для любого устройства через @media. Например, все стили для принтера могут быть записаны в следующем виде

@media print {
стилевые правила для принтера
}

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

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

Очень часто верстка страниц производится таким образом, что у нас появляется основной файл стилей и несколько дополнительных, рассчитанных на конкретные браузеры (речь идет, в основном, о Internet Explorer, однако, иногда требуются какие-то специальные правила для Firefox, Opera или Safari). В этом случае файлы подключают через так называемые «условные комментарии», которые выглядят как обычные HTML- комментарии для всех браузеров, кроме Interner Explorer (у остальных браузеров есть свои способы загрузить какой-то файл стилей только для них).

Финальная конструкция выглядит примерно следующим образом:

Для всех браузеров используется main.css, а для IE6 и ниже — ie6.css. Однако Interner Explorer этих версий не запрашивает файлы стилей параллельно, поэтому при загрузке страницы произойдет ненужная задержка, связанная с доставкой еще одного файла.

Чтобы избежать ее (особенно в случае небольшого количества стилей конкретно для IE), можно использовать CSS-хаки уже в исходном CSS-файлы. Например, если нам нужно определить правило только для IE7, мы можем написать так:

*+html body {
margin: 0 auto;
}

* html body {
margin: 0 auto;
}

и для IE5.5- (эта группа браузеров не распознает экранирование символов, поэтому сможет применить только первое правило из двух, второе правило отработает для IE6, переопределив первое):

* html body {
margin: 0;
marg\in: 0 auto;
}

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

Объединение HTML, CSS и JavaScript в одном файле

Чтобы избежать дополнительных запросов со стороны браузера, можно включить непосредственно стилей и(ли) скриптов в сам HTML-документ.

Здесь стоит остановиться на следующем моменте: если размер CSS- (или JavaScript-) файла больше, чем 20% (и при этом больше 5 Кб в сжатом виде), лучше вынести его как отдельный компонент. Это позволит настроить его кэширование для постоянных пользователей вашего сайта.

Рассматривать включение всех ресурсов в исходную HTML-страницу стоит только в том случае, если достаточно большой процент посетителей (больше 90%) пришли на нее в первый и (возможно) в последний раз. Тогда эта технология будет замечательно работать: кэширование ничего практически не даст, а дополнительные запросы к серверу замедлят загрузку страницы для новых, незнакомых со спецификой сайта посетителей (что может быть решающим фактором для их окончательного ухода).

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

Как рабочий пример можно привести заглавные страницы Яндекса и Google - на них вызывается минимум внешних ресурсов, а стилевые правила включены в саму страницу.

13-я КОМНАТА: Две в одном Люди готовы щедро платить за небольшую экономию и даже за потенциальную возможность таковой. Этот психологический нюанс давно используют маркетологи, и в компьютерной отрасли можно найти немало тому примеров. Например, если помните, главной

4.1. Объединение HTML- и CSS-файлов Число запросов является наиболее узким местом при загрузке страницы. По последним исследованиям, порядка 40% времени загрузки уходит только на установление новых соединений с сервером. В этом свете любые методы, позволяющие уменьшить число

4.2. Объединение JavaScript-файлов Все внешние JavaScript-файлы с сайта можно слить в один большой, загружаемый только один раз и навсегда. Это очень удобно: браузер не делает тысячу запросов на сервер для отображения одной страницы, скорость загрузки резко повышается. А

Объединение JavaScript и CSS в одном файле Однако существует способ объединения CSS с JavaScript и сведения количества загрузок к одной. Техника основана на том, как CSS и анализатор JavaScript ведут себя в IE и Firefox.Когда анализатор CSS сталкивается с символом комментария HTML ( Внешний вид --> Редактор --> Смотрим на правую колонку.

Обычно CSS-файлы подключаются темой в файле шапки сайта — header.php . Находим его в правой колонке файлов и кликаем на него.

Если нужные нам CSS-файлы нашлись — отлично.

На картинке выделено подключение внешнего Гугл-шрифта. Если он нам не нужен — удалим эту строку и затем в файле CSS-стилей темы оформления везде сотрем упоминание этого шрифта.

А если файлы стилей не найдены? Тогда надо продолжить поиск, CSS-файлы могут подключаться в разных местах в зависимости от темы оформления.

На картинке пример, когда файл стилей подключается в init.php, причем способ подключения отличается от такового в шапке сайта:

Как искать CSS-файлы эффективно? Для этого нам потребуется файловый менеджер, например, .

Мы копируем все файлы темы оформления на наш компьютер. Далее заходим в Total Commander, открываем в нем папку темы оформления. Нажимаем «Поиск файлов», ставим галовку «С текстом» и вписываем имя нужного файла стилей:

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

После чего открываем каждый из найденных файлов и смотрим его на предмет подключение файла стилей в нем.

Мы не может просто отключить все лишние CSS-файлы, иначе мы потеряем стилевое оформление сайта. Прежде нам нужно скопировать все их содержимое в главный файл стилей темы оформления (обычно это файл style.css ).

Он лежит по пути: /wp-content/themes/ваша_тема_оформления/style.css

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

Все, стили мы скопировали.

Теперь просто удаляем ранее найденный код, в котором подключаются эти дополнительные файлы стилей .

Удалять следует код такого вида:

1)

2) wp_register_style ("elements_style", $directory_uri . "/elements/lib/css/elements.css");
wp_enqueue_style ("elements_style");

3)

Делаем это по одному для каждого файла и после удаления каждый раз проверяем работоспособность сайта и наличием в нем изменений. Перед проверкой не забываем очистить кеш браузера и кеш сайта , особенно если вы используете плагины кеширования (например, Hyper Cache).