CSS3 против CSS: Скорость

Я верю в силу, скорость и будущее CSS3. Нам больше нет необходимости загружать фоновые изображения, так как на смену PNG для закругленных углов и градиентов пришли соответствующие инструменты. Мы можем сэкономить время работы (оплачиваемые часы) и скорость загрузки страницы. Уже многие сайты могут похвастаться тем, что используют CSS3 более года, и этот обновлённый язык медленно, но уверенно, адаптируется в сети.

До сих пор все это было основано на утверждении: я могу оформить веб-страницу на CSS3 намного быстрее, чем на CSS (с фоновыми изображениями), таким образом, CSS3 способствует увеличению скорости загрузки страницы из-за уменьшения размера файла и сокращения количества HTTP запросов. Однажды я решил провести эксперимент – посмотреть два случая. Что я сделал? Спроектировал и закодил веб-страницу, добавил огромное количество визуальных эффектов: первый вариант был на CSS3, а второй - с использованием фоновых изображений, которые нарезал непосредственно из PSD файла. Для отслеживания времени загрузки, я использовал инструмент Pingdom.

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

Итак, что же приходилось заменять в CSS (т.е. какими CSS3 свойствами я руководствовался):

1. linear-gradient
2. border-radius
3. radial-gradient
4. text-shadow
5. box-shadow с RGB

Эксперимент

День 1

Я закодил HTML и CSS по структурной схеме: никаких закругленных углов, теней, никаких градиентов и изображений кроме фотографий автомобилей и эмблем. Я решил сосредоточиться на материале, который мог также быть оформлен кроссбраузерным шрифтом (Helvetica, Georgia, и т.д.). К слову, @font-face был опубликован задолго до выхода CSS3.

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

День 2

На второй день я создал CSS3 стиль для стартовой страницы. На это мне потребовалось 49 минут. Вот код CSS (css3.css):

/*-----CSS3 Started on 2/26/11 at 7:28 AM CST-----*/    
h1 {

    text-shadow: -3px 2px 0px #514d46; }    
 

#nav {
    -moz-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7); 

    -webkit-box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);  
    box-shadow: 0px 0px 12px rgba(88, 83, 74, .7);

    background-image: -moz-linear-gradient(top, #5c5850, #48473e);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#5c5850),color-stop(1, #48473e));   

    background-image: -webkit-linear-gradient(#5c5850, #48473e);    
    background-image: linear-gradient(top, #5c5850, #48473e); }

 
nav a { 

    -moz-border-radius: 12px;
    -webkit-border-radius: 12px;    

    border-radius: 12px; }  
 

nav a:hover {
    background-color: #3a3e38;  

    background-color: rgba(47, 54, 48, .7); }   
 

nav a.active {
    background-color: #070807;  

    background-color: rgba(7, 8, 7, .7); }  
 

body {
    background-image: -webkit-gradient(radial, 50% 10%, 0, 50% 10%, 500, from(#FBF8E3), to(#E6E3D0));   

    background-image: -moz-radial-gradient(50% 10%, farthest-side, #FBF8E3, #E6E3D0); } 
 

#learn_more, #details img {
    -moz-border-radius: 8px;    

    -webkit-border-radius: 8px; 
    border-radius: 8px;

    -webkit-box-shadow: inset 0px 0px 8px rgba(88, 83, 74, .2); 
    -moz-box-shadow: inset 1px 0px 1px rgba(88, 83, 74, .2);

    box-shadow: inset 0px 0px 1px rgba(88, 83, 74, .2); }   
 

#learn_more a {
    -moz-border-radius: 8px;    

    -webkit-border-radius: 8px; 
    border-radius: 8px;

    background-color: #cc3b23;
    background-image: -moz-linear-gradient(top, #cc3b23, #c00b00);  

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#cc3b23),color-stop(1, #c00b00));   
    background-image: -webkit-linear-gradient(#cc3b23, #c00b00);

    background-image: linear-gradient(top, #cc3b23, #c00b00); } 
 

a {
    -moz-transition: all 0.3s ease-in;  

    -o-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;   

    transition: all 0.3s ease-in; } 
 

/*-----CSS3 Finished on 2/26/11 at 8:17 AM CST (49 minutes) -----*/

День 3

Я добавил фоновые изображения с помощью обычного CSS, которые предварительно были нарезаны из PSD файла. Кода на этот раз было меньше, но это как ни странно не сократило время создания страницы и заняло 73 минуты. Вот страница, которая получилась. Вот и код (css.css):

/*-----CSS (the image-based approach) Started on 2/27/11 at 12:42 PM CST-----*/ 
 

#header {
    background: url(../img/navbg.png) left top repeat-x; }  

 
body {  

    background: #e6e3d0 url(../img/radial_gradient.jpg) no-repeat center top; } 
 

#nav {
    background-color: transparent; }    

 
h1 {    

    background: url(../img/mercuryautomobiles.png) no-repeat center center;text-indent:-9999px; }   
 

#learn_more {
    background-image: url(../img/learn_morebg.jpg);}    

 
#details img {  

    background-image: url(../img/detailsbg.jpg);}   
 

#learn_more a {
    background: url(../img/learn_more_abg.jpg) no-repeat;}  

 
.css3 { 

    background: url(../img/css3_hover.png) no-repeat center top; }  
 

.smashing {
    background: url(../img/smashing_hover.png) no-repeat center top; }  

 
.trent {    

    background: url(../img/trentwalton_hover.png) no-repeat center top;}    
 

.css3:hover {
    background: url(../img/css3_hover.png) no-repeat center -20px;} 

 
.css:hover {    

    background: url(../img/css_hover.png) no-repeat center -20px;}  
 

.smashing:hover {
    background: url(../img/smashing_hover.png) no-repeat center -20px;} 

 
.trent:hover {  

    background: url(../img/trentwalton_hover.png) no-repeat center -20px; } 
 

.css {
    background: url(../img/css_hover.png) no-repeat center -50px; } 

 
/*-----CSS (the image-based approach) Finished on 2/27/11 at 1:55 AM CST (1 hour and 13 minutes)-----*/ 

Результаты

Итак, разница во времени составила 24 минуты: 49 минут, чтобы добавить визуальные эффекты с помощью CSS3, и 73 минуты, чтобы сделать то же самое при помощи изображений. Разработка на CSS3 была не только более быстрой, но очень приятной, потому что я был сосредоточен только на одном окне (мой редактор CSS). С другой стороны, разрезание изображений и переключение из Фотошопа в CSS редактор и назад здорово раздражало. Это действительно занимало больше времени.

Также стоит отметить, что я приложил все усилия, чтобы найти какие-то недостатки при написании кода на CSS3. В целом, возможно, 24 минуты - это не так уж много времени, но не забывайте, что это довольно-таки простенькая страница. Просто подумайте, сколько времени (и денег) вы могли бы сэкономить в течение года.

Что? Я всё ещё не убедил вас?…

Размер файла и скорость загрузки

Я воспользовался специальным инструментом для выявления размера файла и скорости загрузки.

Обе страницы довольно быстры, но CSS3 всё же вышел победителем, обогнав соперника. К тому же файл был легче на 81.3 КБ. На приблизительно равное время загрузки страницы повлияли большие файлы PNG, используемые на обеих страницах. В общем, выигрыш составил 0.75 секунды. Когда речь идёт о 3 - 6 секундах, то это уже серьёзные результаты.

Для того чтобы иметь больше аргументов, я создал еще одну версию страницы, основанную на изображениях, а затем снова замерил время загрузки страницы. Эта версия CSS, которая использовала спрайт действительно ненамного лучше, чем предыдущая. Количество HTTP запросов сократилось с 22 до 19, а размер файла с 849.2 КБ до 846.7 КБ. Как видите, результаты получились приблизительно такими же.

Без того, чтобы склоняться и давать предпочтение какому-то варианту, я выявил, что различие во времени загрузки страницы не является очень уж существенным. Если веб-сайт получает 100 пользователей в день, то скорость загрузки может и не имеет значения, но более высокий трафик даст другие результаты. Метод, основанный на фоновых изображениях, может привести к тому, что ваши страницы будут грузиться на 15% медленнее (всё дело в миллисекундах). Интересно, сколько времени и денег могло быть спасено, если только одной кнопке регистрации применить CSS3 стиль, а не изображение.

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

Ну что? Я всё ещё вас не убедил? Хорошо, идём дальше…

Думаем о будущем

Обновление сайтов: Простой и Сложный путь

CSS3 действительно «окупается», когда дело доходит до создания обновлений по соответствующим требованиям завтрашнего дня. Это важный аспект с точки зрения обслуживания веб-страниц. Изучая сайт Mercury Automobiles, всё время приходят мысли о том, чтобы сделать его трёх колоночным, или более широким, или сделать что-то с панелью навигации... Реализация состояла бы в том, чтобы открыть Фотошоп, восстановить и изменить размеры изображений, обновить соответствующие свойства CSS и так далее:

<div class="border_box_top"></div>  
<div class="border_box_bottom">

    <img src="/your_content_here.jpg" />   
</div>

Это конечно не идеальный вариант.

Обслуживание разных размеров изображения и изменение размера шрифта, для различных разрешений экранов просто не могли быть реализованы без CSS3. Меня очень радует тот факт, что новые свойства взаимодействуют и дополняют друг друга. Вы только себе представьте, сколько времени бы ушло на нарезку изображений… ужас!

Выводы

Давайте посмотрим ещё раз на результаты моих исследований…

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

Мы все обеспокоены совместимостью браузеров, и мнения будут отличаться. Для меня и большинства моих клиентов, это было бы совершенно приемлемым. Возможно, если таких экспериментов будет проводиться больше, то статистические данные могли бы быть очень полезны для работодателей и клиентов. Если сайт может стать на 49% быстрее (или даже наполовину от этого) при помощи CSS3, то это явная выгода: экономия денег и времени.

• Комментарии