Зачем вам нужен CSS? Причины просты: все эти «всплывающие» приложения-конструкторы будут лениво добавлять множество ненужных CSS и HTML. Медленные веб-сайты страдают от высоких показателей отказов и более низкого рейтинга в поисковых системах.Использование всплывающего окна тяжелее, работают медленнее и предлагают новичку более стабильную платформу для работы. Вы, конечно, можете использовать всплывающие окна для создания своих веб-сайтов, но вы покажете всем , насколько вы новичок в этом деле, поскольку ваш веб-сайт будет медленно загружаться и будете использовать много дополнительных HTML и CSS, чтобы заставить его работать.
1. Напишите свой собственный CSS и HTML
Пользовательские CSS и HTML всегда сделают ваш сайт быстрым. Всегда старайтесь уменьшить количество используемых вами элементов DOM или, другими словами, если вам не нужен тег HTML, избавьтесь от него.
Вот хороший пример того, как список используется там, где он не нужен, в нижнем колонтитуле веб-сайта.
<div class="example-footer-1"> class="example-footer-1"> <ul><ul> <li>© <a href="#"> my website 2011</a></li><li>© <a href="#"> my website 2011</a></li> <li><a href="#">privacy statment</a></li><li><a href="#">privacy statment</a></li> <li><a href="#">sitemap</a></li><li><a href="#">sitemap</a></li> <li>site created by <a href="#">my amazing company</a></li><li>site created by <a href="#">my amazing company</a></li> </ul></ul> </div></div>
215 символов CSS
в то время как
<div class="example-footer-2"> class="example-footer-2"> <p><p> © <a href="#"> my website 2011</a><a href="#"> my website 2011</a> <a href="#">privacy statment</a><a href="#">privacy statment</a> <a href="#">sitemap</a><a href="#">sitemap</a> site created by <a href="#">my amazing company</a><a href="#">my amazing company</a> </p></p> </div></div>
197 символов HTML
.example-footer-2 {example-footer-2 { padding:20px;:20px; border:solid 1px #ccc;:solid 1px #ccc; border-width:1px 0-width:1px 0 }} .example-footer-2 p {padding:0;margin:0}.example-footer-2 p {padding:0;margin:0} .example-footer-2 a {margin:0 3px 0 0}.example-footer-2 a {margin:0 3px 0 0}
153 символа CSS
Два разных примера в одном демонстрационном файле.
В примере 2 были разные вещи:
1) установите ширину границы для всех границ, затем отключите ширину границы для сторон, установите границу как для верхней, так и для нижней.
2) уменьшите цвет ширины границы на 3 символа, используя более короткую форму #ccc, а не #cccccc.
3) не используйте список, поскольку это действительно не список вещей. Просто используйте тег A только в HTML. Многие дизайнеры и разработчики в всплывающих окнах часто используют список.
4) измените список для тега абзаца, чтобы сохранить правильность проверки HTML, чтобы уменьшить ссылки на 9 символов на элемент списка. Теги ‘<li>’ и ‘</li>’ больше не нужны, а изменение ‘<ul>’ и ‘<p>’ сохраняло верх и низ символа.
5) изменено предельное утверждение от margin-right: 3px на margin: 0 3px 0 0, хотя это не экономит места, если вы используете более одного утверждения margin одновременно.
2. Избавьтесь от ненужных пробелов, табуляции и возврата каретки
Если вы обратитесь к W3C, WordPress или другим, они рекомендуют вам писать свой CSS в стиле сверху вниз, например, официальный способ написания CSS требует возврата каретки, табуляции и пробелов для повышения надежности.
.example { padding : 20px; border : 1px solid #ccc; border-width : 1px 0px; }
Количество символов 90, 4 символа возврата и 3 вкладки.
Если вы хотите более быстрый сайт, вы должны минимизировать его как можно больше при кодировании:
.example{padding:20px;border:solid 1px #ccc;border-width:1px 0;}
Количество символов 64, без возврата , без лишних пробелов, без лишних символов и без табуляции.
Здесь лишнее все убрали. Он по-прежнему будет успешно проверяться и не займет много места.
Чтобы сэкономить кучу времени, делая это вручную, вы можете использовать текстовый редактор или IDE. Вот несколько вариантов поиска и замены, которые вы можете запустить.
- заменить “{“
- заменить “}” на “}” [1]
- заменить «:» на «:» [1]
- заменить “:”
- заменить «; ” с участием “;” [1]
- заменить “;” с участием “;” [1]
- заменить “,”
- замените «0px» на «0 ″
- замените “0em” на “0”
[1] эти команды стоит запускать 2 или 3 раза подряд, чтобы избавиться от ненужных пробелов.
Помните: инструменты минификации CSS никогда не будут такими эффективными, как сделанные вручную. Возьмем, к примеру, минификацию W3 Total Cache, она не удаляет пробелы до / после двоеточия, перед открывающими фигурными скобками или после запятой. Общий кеш W3 хорошо удаляет символы возврата, которые помогают сделать ваш файл вообще читаемым.
3. Избавьтесь от ненужных точек с запятой в конце каждого кода CSS
Взяв наш эффективный CSS-код без пробелов, табуляции или возврата каретки, мы можем сделать его на 1 символ короче, удалив последнюю точку с запятой в конце кода
. пример { padding : 20px ; border : solid 1px #ccc; border-width: 1px 0;}
… Становится…
. пример { padding : 20px ; border : solid 1px #ccc; border-width: 1px 0}
Таким образом, наш код длиной 64 символа становится длиной 63 символа.
Если учесть, что в файле CSS часто бывает более 200 символов CSS, это позволяет сэкономить 1 символ для каждого оператора, поэтому, например, из файла с 200 символами удаляются 200 байтов. Легко удалить, если поискать «;}» и заменить на «}»
4. Изучите CSS правильно
Часто видно по дизайну и коду других людей, что они не понимают, как правильно работает CSS.
li {list-style-type:none}
где его следует применять не к элементу списка, а к списку в целом, например:
ul {list-style-type:none}
Или возьмите эти примеры потраченного впустую места или глупого кода
#header {width:auto; margin: 0 auto;} #footer {margin: 0 0px 0 0px; padding:0 0 0px 0} #sidebar { background-image: url(images/image.png); background-position: center top; background-color:transparent; background-repeat: no-repeat }
Где #header должен иметь определенную ширину, применяемую для автоматического поля для его центрирования, поэтому 2 бита потраченного впустую кода оставляют активными только нижний и верхний поля 0.
#Footer мог быть просто margin:0;padding:0;
#sidebar могло быть только что background:transparent url(images/image.png) no-repeat center top;
5. Остерегайтесь бесполезных сбросов CSS
Многие люди используют сброс CSS в начале своего кода CSS, чтобы попытаться получить равные условия для всех браузеров. Хотя исполнение часто ошибочно.
Возьмите этот сброс CSS, используемый mashable.com, определенный Ричардом Кларком.
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
Давайте на секунду разберемся.
footer, nav, section, label, dfn, cite, kbrd, code, samp, b, i, strong, em, canvas, tr, thead, tfoot, tbody, span, var& divсовсем не обязательно должны быть в этом списке, поскольку они уже предопределены всеми браузерами как без отступов, без полей, без фона, без границ, без контура, без примененного размера шрифта. Потраченное впустую пространство.
sup, small& sub размер шрифта не должен быть 100%, так как они должны быть другого размера, чем остальной текст fo. Опять зря потраченное место.
supи subне должны иметь вертикальное выравнивание базовой линии, supделает его маленьким и выше линии, subделает его маленьким и ниже линии.
thи tdдолжен иметь, vertical-align:topпоскольку это почти всегда способ их использования, и что им действительно нужно text-align:leftсделать их согласованными, поскольку в некоторых браузерах он находится посередине, а некоторые – слева.
Так много потраченного впустую места, а также множество дополнительных прикладных элементов, о которых браузер должен подумать, прежде чем обрабатывать всю страницу. Поскольку эти правила появляются на странице первыми, они будут применяться ко всем элементам на странице, а затем CSS перезапишет их. В основном это все замедляет и делает ваш CSS-файл больше, чем нужно.
6. Заархивируйте свой CSS
Gzip очень похож на обычный zip, который вы используете почти каждый день. Это инструмент, используемый для сжатия файлов до их минимального размера, чтобы при отправке в браузер они использовали меньшую пропускную способность сети.
Если ваш сервер позволяет это, будь то apache, tomcat, lighttp или IIS, всегда используйте сжатие CSS. Имейте в виду, что многие хостинговые компании отключают gzip для своих серверов, поскольку для этого требуется дополнительная вычислительная мощность, и они не хотят, чтобы их серверы зависали. Также имейте в виду, что если вы являетесь исключительно популярным сайтом, дополнительная обработка для gzip-сжатия вашего контента может отрицательно сказаться на производительности вашего сервера, возможно, вам придется инвестировать в дополнительную вычислительную мощность.
Существуют разные уровни gzip’ов, в целом большинство людей используют gzip-архивы «-9» или «level 9», так как именно он делает файлы самыми маленькими, но также требует максимальной вычислительной мощности.
Помните: не все браузеры могут обрабатывать сжатие с помощью gzip, и некоторые инструменты безопасности браузера прекращают его использование, поэтому в первую очередь сосредоточьтесь на небольшом файле CSS.
7. Поместите таблицы стилей в верхнюю часть головы
Всегда, всегда, всегда помещайте таблицу стилей вверху раздела HEAD вашего HTML, сразу под заголовком. Это потому, что он хочет быть загружен как можно быстрее, чтобы его можно было применить к странице. Ни по какой причине не помещайте тег STYLE в тело вашего html, если он не на 100% необходим для этой конкретной задачи, добавьте его во внешнюю таблицу стилей.
8. всегда используйте внешнюю таблицу стилей
Внешние таблицы стилей хороши тем, что их можно сжать и кэшировать в браузере. Если вы поместите стиль в заголовок, он будет загружаться заново каждый раз при загрузке страницы, что замедлит время отклика.
9. не используйте выражения CSS
Выражения CSS плохо поддерживаются и требуют дополнительной вычислительной мощности. Если вы хотите, например, иметь другой цвет фона в зависимости от времени суток, сделайте это на стороне сервера, динамически генерируя свой CSS, или напишите какой-нибудь забавный Javascript, который выполняет ту же задачу после того, как все файлы загружены для страница.
10. Не используйте @import используйте ссылку
Некоторые люди используют @import для включения CSS в свой HTML, это очень плохая идея, так как это замедляет работу, используйте стандартный синтаксис ссылок и не забудьте установить в нем правильный тип мультимедиа:
<link rel="stylesheet" type="text/css" href="styles.css" media="screen" >
11. Настройте кеширование браузера для ваших файлов CSS
Кэширование в браузере – это когда вы сообщаете браузеру, что файл CSS не будет изменяться в течение определенного периода времени. Это может быть 1 час, 1 день, 1 месяц, 1 год, 100 лет или что угодно. Пока в браузере не очищен кеш, он повторно загружает ваш файл CSS из своего локального хранилища и не будет запрашивать его у вашего сервера. У этого есть два отличных преимущества: во-первых, он загружает меньше файлов с сервера, что означает, что сервер может иметь больше подключений одновременно, и во-вторых, что файл CSS загружается в миллисекундах из локальной памяти, а не в 100 миллисекунд с сервера.
Помните: браузер может устанавливать только определенное количество подключений одновременно к серверу, он должен ждать, пока каждое подключение станет доступным, прежде чем его можно будет использовать, перейдя в другое место, чем сервер позволяет браузеру выполнять другие задачи, такие как загрузка изображений или HTML.
13. Постарайтесь уменьшить использование Decedent Selectors
Дизайнеры часто используют дочерние селекторы, чтобы явно определить, как должен выглядеть элемент страницы. Вернемся к примеру вверху страницы:
.example-footer-1 { padding:20px; border-top:solid 1px #cccccc; border-bottom:solid 1px #cccccc } .example-footer-1 ul {list-style-type:none;padding:0;margin:0} .example-footer-1 ul li {margin-right:3px; display:inline}
если бы он был настроен как:
ul {list-style-type:none;padding:0;margin:0} li {margin-right:3px; display:inline} .example-footer-1 { padding:20px; border-top:solid 1px #cccccc; border-bottom:solid 1px #cccccc }
Так быстрее, потому что браузеру не нужно искать .example-footer-1 и его потомков, когда он знает, что ul и li были настроены. Этот метод «установил и забыл», который вы должны попробовать использовать.
Это можно применить ко всему дизайну ваших сайтов, чтобы попытаться получить максимальную отдачу от скорости сайта, но, конечно, это баланс между скоростью и красотой.
14. Сложите все вместе, чтобы сэкономить место
Очень часто при создании веб-сайта большая часть кода CSS многократно дублируется по всей странице. Так, например, может быть случай, когда используются одни и те же поля, границы и отступы, но для каждого из них сделаны немного разные настройки.
.list1 {margin:0; padding:0; border:solid 1px red} .list2 {margin:0; padding:0; border:solid 1px green} .list3 {margin:0 5px; padding:0; border:solid 1px black}
где это можно было бы гораздо эффективнее записать как:
.list1, .list2, .list3 {margin:0; padding:0; border:solid 1px red} .list2 {border-color: green} .list3 {border-color: black;margin:0 5px}
На личном уровне стараемся немного отличаться от закругленных углов. Вместо того, чтобы применять их к каждому элементу CSS по очереди, обычно создаем 1 или 2 класса, у которых уже настроены закругленные углы, и применяю их к HTML. Например:
.rounded {-moz-border-radius:3px; border-radius:3px; -webkit-border-radius:3px} .rounded-big {-moz-border-radius:15px; border-radius:15px; -webkit-border-radius:15px} .rounded-top { -moz-border-radius-topleft:3px; border-top-left-radius:3px; -webkit-border-top-left-radius:3px; -moz-border-radius-topright:3px; border-top-right-radius:3px; -webkit-border-top-right-radius:3px;}
15. объедините весь свой CSS в один файл
Все веб-серверы и страницы работают быстрее, если у них сокращено количество подключений для каждой страницы. Так что, имея это в виду, гораздо быстрее иметь только 1 файл CSS, который вызывается (gzip’ed, кешированный и на вашем CDN), а не много. Каждый запрос нового файла требует дополнительного времени, часто требуется поиск в DNS, обмен информацией cookie и ожидание соединения с сервером. Просто добавьте весь свой CSS в один файл.
16. Старайтесь изо всех сил, чтобы ваш файл CSS был меньше 25 КБ
Если вы можете уменьшить размер файлов до 25 КБ, iPhone и другие мобильные устройства будут кэшировать их. Очень важно, если они – ваша целевая аудитория. Если файл кэширован, он больше не будет загружен.
17. Если вы не используете его, не отправляйте
Представим, что вы создаете сайт для флориста и адаптируете для него тему Twenty Ten для WordPress. Можете ли вы вспомнить какой-нибудь случай, когда тег CODE вообще используется? Нет, я тоже. Так что не отправляйте этот CSS клиенту. Эта методология также должна применяться к сбросу CSS, который вы также можете использовать, если они не используют abbr, sub, sub blockquote и т. Д., Удалите его из кода CSS. Точно так же, если на создаваемом вами сайте нет комментариев, не включайте весь тот CSS, который имеет дело с комментариями.
Это простое правило, о котором часто забывают, особенно когда вы адаптируете работу других людей в качестве отправной точки.
18. Сократите свой CSS
После того, как вы потратили время на то, чтобы максимально сэкономить место, последнее, что вам нужно сделать, – это минимизировать свой CSS, чтобы сделать его как можно меньше. Это то, что вы должны сделать, прежде чем официально получите достойный производственный CSS.
Есть несколько различных способов выполнить минификацию, вы можете сделать это перед загрузкой CSS с помощью таких инструментов, как этот онлайн-компрессор CSS , локальное приложение на вашем ПК, такое как YUI Compressor, или на сервере в качестве серверной задачи, которая вызывается каждым время загрузки файла CSS для браузера. Как всегда, лучше сначала минимизировать, а затем загрузить, так как тогда для предоставления минимизированного файла требуется меньше ресурсов сервера.
Заключение.
Помните, что каждый из этих пунктов основан на многолетнем опыте и каждый из этих пунктов поможет сделать ваш сайт быстрее.
