CSS3 против CSS: Скорость
Я верю в силу, скорость и будущее CSS3. Нам больше нет необходимость загружать фоновые изображения, так как на смену PNG для закругленных углов и градиентов пришли соответствующие инструменты. Мы можем сэкономить время работы (оплачиваемые часы) и скорость загрузки страницы. Уже многие сайты могут похвастаться тем, что используют CSS3 более года, и этот обновлённый язык медленно, но уверенно, адаптируется в сети.
До сих пор все это было основано на утверждении: я могу оформить веб-страницу на CSS3 намного быстрее, чем на CSS (с фоновыми изображениями), таким образом, CSS3 способствует увеличению скорости загрузки страницы из-за уменьшения размера файла и сокращения количества HTTP запросов. Однажды я решил провести эксперимент – посмотреть два случая. Что я сделал? Спроектировал и закодил веб-страницу, добавил огромное количество визуальных эффектов: первый вариант был на CSS3, а второй - с использованием фоновых изображений, которые нарезал непосредственно из PSD файла. Для отслеживания времени загрузки, я использовал инструмент Pingdom.
Вот то, что я наклепал - веб-страница для Mercury Automobiles. Страница была разработана, чтобы продемонстрировать широкий спектр свойств CSS3, которые в прошлом должны были быть достигнуты, используя фоновые изображения.
Итак, что же приходилось заменять в CSS (т.е. какими CSS3 свойствами я руководствовался):
linear-gradient
border-radius
radial-gradient
text-shadow
box-shadow с RGB
Эксперимент
День 1
Я закодил HTML и CSS по структурной схеме: никаких закругленных углов, теней, никаких градиентов и изображений кроме фотографий автомобилей и эмблем. Я решил сосредоточиться на материале, который мог также быть оформлен кроссбраузерным шрифтом (Helvetica, Georgia, и т.д.). К слову, @font-face был опубликован задолго до выхода CSS3.
Передо мной был чистый холст, на который я мог добавить визуальные эффекты. Стартовая страница - это результат моего первого дня работы. Часть написания CSS3 кода состоит в планировании оформления веб-сайтов, которые будут хорошо выглядеть и без поддержки новых технологий.
День 2
На второй день я создал CSS3 стиль для стартовой страницы. На это мне потребовалось 49 минут. Вот код CSS (css3.css):
День 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 CSS3 Разница
Размер 767.9 KB 849.2 KB 81.3 KB
Запросы 12 22 10
Для того чтобы иметь больше аргументов, я создал еще одну версию страницы, основанную на изображениях, а затем снова замерил время загрузки страницы. Эта версия CSS, которая использовала спрайт действительно ненамного лучше, чем предыдущая. Количество HTTP запросов сократилось с 22 до 19, а размер файла с 849.2 КБ до 846.7 КБ. Как видите, результаты получились приблизительно такими же.
Без того, чтобы склоняться и давать предпочтение какому-то варианту, я выявил, что различие во времени загрузки страницы не является очень уж существенным. Если веб-сайт получает 100 пользователей в день, то скорость загрузки может и не имеет значения, но более высокий трафик даст другие результаты. Метод, основанный на фоновых изображениях, может привести к тому, что ваши страницы будут грузиться на 15% медленнее (всё дело в миллисекундах). Интересно, сколько времени и денег могло быть спасено, если только одной кнопке регистрации применить CSS3 стиль, а не изображение.
Другой поразительный пример - это CSS3, который вы можете найти в интерфейсе популярнейшей почтовой службы Gmail. Градиенты CSS3 и закругленные углы значительно увеличивают скорость страницы.
Ну что? Я всё ещё вас не убедил? Хорошо, идём дальше…
Думаем о будущем
Обновление сайтов: Простой и Сложный путь
CSS3 действительно «окупается», когда дело доходит до создания обновлений по соответствующим требованиям завтрашнего дня. Это важный аспект с точки зрения обслуживания веб-страниц. Изучая сайт Mercury Automobiles, всё время приходят мысли о том, чтобы сделать его трёх колоночным, или более широким, или сделать что-то с панелью навигации... Реализация состояла бы в том, чтобы открыть Фотошоп, восстановить и изменить размеры изображений, обновить соответствующие свойства CSS и так далее:
Это конечно не идеальный вариант.
Обслуживание разных размеров изображения и изменение размера шрифта, для различных разрешений экранов просто не могли быть реализованы без CSS3. Меня очень радует тот факт, что новые свойства взаимодействуют и дополняют друг друга. Вы только себе представьте, сколько времени бы ушло на нарезку изображений… ужас!
Выводы
Давайте посмотрим ещё раз на результаты моих исследований…
CSS CSS3 Результаты
Время разработки 73 минут 49 минут CSS3 33% быстрее
Размен 849.2 KB 767.9 KB CSS3 9.5% меньше
Запросы 22 12 CSS3 45% меньше
Да, это только один эксперимент, и результат был основан только на моих малых способностях. Всё это не значит, что я хотел доказать глобальное превосходство CSS3. Нет, всё это только пища для размышления.
Мы все обеспокоены совместимостью браузеров, и мнения будут отличаться. Для меня и большинства моих клиентов, это было бы совершенно приемлемым. Возможно, если таких экспериментов будет проводиться больше, то статистические данные могли бы быть очень полезны для работодателей и клиентов. Если сайт может стать на 49% быстрее (или даже наполовину от этого) при помощи CSS3, то это явная выгода: экономия денег и времени.
До сих пор все это было основано на утверждении: я могу оформить веб-страницу на CSS3 намного быстрее, чем на CSS (с фоновыми изображениями), таким образом, CSS3 способствует увеличению скорости загрузки страницы из-за уменьшения размера файла и сокращения количества HTTP запросов. Однажды я решил провести эксперимент – посмотреть два случая. Что я сделал? Спроектировал и закодил веб-страницу, добавил огромное количество визуальных эффектов: первый вариант был на CSS3, а второй - с использованием фоновых изображений, которые нарезал непосредственно из PSD файла. Для отслеживания времени загрузки, я использовал инструмент Pingdom.
Вот то, что я наклепал - веб-страница для Mercury Automobiles. Страница была разработана, чтобы продемонстрировать широкий спектр свойств CSS3, которые в прошлом должны были быть достигнуты, используя фоновые изображения.
Итак, что же приходилось заменять в CSS (т.е. какими CSS3 свойствами я руководствовался):
linear-gradient
border-radius
radial-gradient
text-shadow
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) -----*/
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 CSS3 Разница
Размер 767.9 KB 849.2 KB 81.3 KB
Запросы 12 22 10
Для того чтобы иметь больше аргументов, я создал еще одну версию страницы, основанную на изображениях, а затем снова замерил время загрузки страницы. Эта версия 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>
<div class="border_box_bottom">
<img src="your_content_here.jpg" />
</div>
Это конечно не идеальный вариант.
Обслуживание разных размеров изображения и изменение размера шрифта, для различных разрешений экранов просто не могли быть реализованы без CSS3. Меня очень радует тот факт, что новые свойства взаимодействуют и дополняют друг друга. Вы только себе представьте, сколько времени бы ушло на нарезку изображений… ужас!
Выводы
Давайте посмотрим ещё раз на результаты моих исследований…
CSS CSS3 Результаты
Время разработки 73 минут 49 минут CSS3 33% быстрее
Размен 849.2 KB 767.9 KB CSS3 9.5% меньше
Запросы 22 12 CSS3 45% меньше
Да, это только один эксперимент, и результат был основан только на моих малых способностях. Всё это не значит, что я хотел доказать глобальное превосходство CSS3. Нет, всё это только пища для размышления.
Мы все обеспокоены совместимостью браузеров, и мнения будут отличаться. Для меня и большинства моих клиентов, это было бы совершенно приемлемым. Возможно, если таких экспериментов будет проводиться больше, то статистические данные могли бы быть очень полезны для работодателей и клиентов. Если сайт может стать на 49% быстрее (или даже наполовину от этого) при помощи CSS3, то это явная выгода: экономия денег и времени.