Во второй части оптимизации вашего веб-сайта мы рассмотрим обработку вашего CSS и извлечение из него каждой унции производительности. Пожалуйста, прочитайте часть 1, если вы пропустили ее. На любой веб-странице ваш браузер загружает ваш контент очень просто: он извлекает HTML, который сообщает ему другие файлы для запроса с вашего сервера, в то время как ваш CSS предоставляет все стиль, чтобы он отображался по мере необходимости. Показано, что повышение производительности внешнего интерфейса влияет на общую конверсию, включая рейтинг кликов, среднее время на сайте, продажи и даже рейтинг Google .
Сокращение запросов
Даже Дарт Вейдер уменьшает запросы. Мне нравится иметь мой CSS во множестве файлов. Файлы только для заголовка моих страниц или для нижнего колонтитула, для домашней страницы — для каждого раздела моего сайта. Это, конечно, означает, что если бы я включил их в заголовок документа, было бы огромное количество запросов. Итак, самый простой способ справиться с этим — объединить файлы. Для этого есть много приложений: Turbine (похоже на CSScaffold), Juicer (слышал хорошие вещи, но еще не попробовал), и мой любимый CSScaffold ( в настоящее время не в сети, но создан Энтони Шортом ). Они объединяют ваш CSS в меньшее количество файлов (один файл, если это соответствует вашим настройкам), что означает, что у вас меньше запросов.
Минификация и Gzipping
Минификация может принести большую экономию. Он сжимает ваш CSS, удаляя все ненужные пробелы и разрывы строк, и сокращает ваш код до как можно меньшего количества строк. Обычно это делается так же, как вы делаете свой код живым, потому что с минимизированным кодом очень трудно работать. Gzipping — это сжатие на стороне сервера, которое может принести огромную экономию. Он поддерживается всеми современными браузерами, и, хотя для его корректной работы может потребоваться некоторое время , оно того стоит. В приложениях, перечисленных выше, обычно есть минификация и Gzipping в качестве параметров для дальнейшего уменьшения размеров файлов.
Положите таблицы стилей наверх
Это очевидно, что большинство из вас уже будут делать. Используя таблицы стилей, связанные с заголовком вашего HTML, браузеры ваших пользователей начнут стилизовать страницу, как только смогут, и веб-страница будет загружаться. Это мешает вашим пользователям думать, что ничего не происходит, расстраиваться и уходить, поскольку они уверены, что браузер отвечает.
Используйте link Tag вместо @import
Некоторые улучшения производительности не делают сайты быстрее; они просто делают веб-сайт более быстрым для вашего конечного пользователя. Вместо @import ( <style type="text/css">@import url("styles.css");</style> ) следует использовать тег link ( <link href="styles.css" type="text/css" /> ). <style type="text/css">@import url("styles.css");</style> ) для использования стилей. Они идентичны, но тег link будет отображать CSS как можно скорее, в то время как @import будет ждать полной загрузки страницы, прежде чем отобразиться в некоторых браузерах.
Избегайте встроенных стилей
Было предложено, чтобы вы включили некоторые (или все) ваши встроенные CSS в ваш HTML, тем самым уменьшая количество запросов в целом. Это звучит как хорошая идея, и бывают моменты, когда это удобно; однако HTML не кэшируется при такой обработке. Имея его во внешнем файле, браузер пользователя сохранит его, так что когда пользователь вернется, и он не изменился, он будет использовать этот файл вместо загрузки другой копии файла.
специфичность
Специфика CSS — странная тема для обсуждения при оптимизации. Специфика — насколько сильный определенный стиль; элемент (например, якорь, абзац или форма) переопределяется классом (« .post »), который в свою очередь #header идентификатор (« #header »). Энди Кларк выразил это замечательно, когда он придумал изображение CSS: Specificity Wars, объясняющее концепцию с использованием трех уровней в стиле «Звездных войн»: лорды ситхов представляют идентификаторы (и стоят 100 баллов), Дарт Вейдерс — классы (10 баллов) и Storm Десантники — это элементы (1 балл). Помимо всего прочего, специфичность (или, что более важно, то, насколько конкретно вы склонны писать свои классы) может реально изменить размеры файлов! Мы все сделали это: написали CSS, включающий два или три Идентификаторы, может быть, класс или два, а затем элемент, все это просто для стилизации блока на странице. В идеальном мире 90% стилей должны состоять только из идентификатора, класса и, возможно, элемента. Даже у этого есть показатель специфичности 111, который все еще должен быть достаточно сильным, чтобы противостоять другим стилям. Например, #container #content #header h1.logo имеет силу 311, но с точки зрения размера файла это 35 символов длиной , Его можно легко уменьшить до #header h1 (101 балл), что сокращает его до десяти символов, поскольку должен быть только один элемент h1. Даже в HTML5, где вы можете иметь несколько элементов h1, заголовок с несколькими элементами h1 не имеет большого смысла. Вы можете спросить, и что? Мы сохранили 25 целых персонажей. Но распространите это на таблицу стилей из двух или трех тысяч символов (к которой в конечном итоге вырастет большинство крупных сайтов, даже если они разделены на несколько файлов). Это может быть реальная экономия в ожидании. И, как и весь унаследованный код, это можно сделать только один раз, иначе это станет кошмаром. Хитрость заключается в написании стилей, которые используют меньше очков специфичности по всей таблице стилей, так что вам нужно меньше силы в отдельном стиле, чтобы использовать его.
Вывод
Я обсудил большинство правил, которые заставят ваш CSS работать быстрее. Большинство из них просты в реализации, и вы заметите разницу в скорости загрузки ваших страниц. В следующих нескольких постах я расскажу об обработке JavaScript и изображений, так что следите за обновлениями.