РЭДЛАЙН
Лучшие решения для Вас и Вашего бизнеса!
На нашем сайте вы можете получить информацию о веб-разработке, обслуживании и продвижении сайта. Интернет-маркетинге. SEO (поисковой оптимизации). Контекстной и медийной рекламе в Интернете. SMM. Регистрации доменов и хостинговых услугах. И современном дизайне сайтов. Вообщем того что касается веб-разработки, а также много другой полезной информации из мира интернета, бизнеса и интернет-технологий...
Создаем доступные и современные сайты, которые работают! Обслуживаем и эффективно продвигаем интернет-проекты с 2006 года!
Главная Web-мастеру CSS3 против CSS: Скорость


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 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>

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

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

Выводы

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

  CSS CSS3 Результаты
Время разработки 73 минут 49 минут CSS3 33% быстрее
Размер 849.2 KB 767.9 KB CSS3 9.5% меньше
Запросы 22 12 CSS3 45% меньше

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

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/nxsOyWRrXQs/lessons.php

CSS3 против CSS: Скорость | | 2012-06-19 12:07:17 | | Статьи Web-мастеру | | Я верю в силу, скорость и будущее CSS3. Нам больше нет необходимости загружать фоновые изображения, так как на смену PNG для закругленных углов и градиентов пришли соответствующие инструменты. Мы | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Дайджест новых статей по интернет-маркетингу на ваш email
Подписаться

Продающие сайты "под ключ"!

Наши сайты зарабытывают вам деньги. Landing-page. Эффективные продающие сайты точно в срок и под ключ! Всего от 14700 рублей
Подробнее...

Интернет-магазины и каталоги "под ключ"!

Эффективные и удобные инструменты торговли (электронной торговли) "под ключ". Продают, даже когда вы спите! Всего от 33800 рублей
Подробнее...

Комплексный интернет-маркетинг и продвижение сайтов

Максимальную эффективность дает не какой-то конкретный метод, а их комбинация. Комбинация таких методов и называется комплексным интернет-маркетингом. Всего от 8000 рублей в месяц
Подробнее...

Реклама в Yandex и Google

Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров. Всего от 8000 рублей в месяц
Подробнее...

Social media marketing (SMM) — продвижение в социальных медиа

Реклама в Однокласcниках и на Mail.ru Создание, ведение и раскрутка групп и реклама ВКонтакте и Facebook. Всего от 8000 рублей в месяц
Подробнее...

Приглашаем к сотрудничеству рекламные агентства и веб-студии!

Внимание Акция! Приглашаем к сотрудничеству рекламные агентства и различные веб-студии России! Индивидуальные и взаимовыгодные условия сотрудничества.
Подробнее...

Ускоренная разработка любого сайта от 5 дней!

Внимание Акция! Ускоренная разработка любого сайта! Ваш сайт будет готов за 5-10 дней. Вы можете заказать разработку любого сайта "под ключ" за 5-10 рабочих дней, с доплатой всего 30% от его стоимости!
Подробнее...

Ждем новых друзей!

Внимание Акция! Ждем новых друзей! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта при переходе к нам от другого разработчика.
Подробнее...

Приведи друга и получи скидку!

Внимание Акция! Приведи друга и получи скидку! Скидка 10% на услуги по созданию и(или) обслуживанию вашего сайта, если клиент заказавший наши услуги, пришел по Вашей рекомендации.
Подробнее...

1 2 3 4 5 6 7 8 9

Новые статьи и публикации



Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!

Качественное и объемное представление своего бизнеса в Сети требуется любой растущей коммерческой структуре, стремящейся увеличить продажи, именно по этой причине среди наших клиентов как крупные так и небольшие компании во многих городах России и ближнего зарубежья.
Как мы работаем

Заявка
Позвоните или оставьте заявку на сайте.


Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!


Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.


Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.


Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.

Остались еще вопросы? Просто позвоните и задайте их специалистам
с 2:30 до 11:30 по Мск, звонок бесплатный
Или напишите нам в WhatsApp
с 9:30 до 18:30 по Хабаровску
Или напишите нам в WhatsApp
Веб-студия и агентство комплексного интернет-маркетинга «РЭДЛАЙН» © 2006 - 2024

Профессиональная Веб-разработка. Создание сайтов и магазинов "под ключ" , а также по всей России и зарубежью. Продвижение и реклама. Веб-дизайн. Приложения. Сопровождение. Модернизация. Интеграции. Консалтинг. Продвижение и реклама. Комплексный Интернет-маркетинг.

Оставьте заявку / Задайте вопрос

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услугу

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Обратный звонок

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Подписка на дайджест новостей

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

Заказать услуги со скидкой \ Бесплатная консультация







КАКИЕ УСЛУГИ ВАС ИНТЕРЕСУЮТ?

КАКИЕ ДОПОЛНИТЕЛЬНЫЕ УСЛУГИ ПОТРЕБУЮТСЯ?

Нажимая на кнопку ОТПРАВИТЬ, я даю согласие на обработку персональных данных
×

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

Что нужно сделать, чтобы заказать создание сайта у нас?

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

Быстрый заказ \ Консультация

Для всех тарифных планов на создание и размещение сайтов включено:

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

Комплексная раскрутка работает в рамках стратегии развития вашего бизнеса в сети и направлена

Быстрый заказ \ Консультация

ЭФФЕКТИВНОЕ СОПРОВОЖДЕНИЕ (ПОДДЕРЖКА, ОБСЛУЖИВАНИЕ) САЙТОВ

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

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

Наша компания осуществляет техническую и информационную поддержку уже имеющихся сайтов. В понятие «поддержка сайтов» также входят услуги администрирования сайтов, обновления сайтов и их модернизация.

Быстрый заказ \ Консультация

Редизайн сайта и Адаптивный веб дизайн

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

Редизайн сайта — создание нового дизайна сайта с целью улучшения внешнего вида, функциональности и удобства использования. Редизайн сайта – это способ преобразовать проект к извлечению из него максимальной отдачи и средств. В современном мире задачами редизайна является поднятие существующего сайта на новый уровень для внедрения новых технологий, при этом сохраняя многолетний сформировавшийся опыт и успешные решения компаний.

Адаптивный дизайн сайтов и веб-приложений

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

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

Быстрый заказ \ Консультация

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

Реклама в поисковых системах Яндекс и Google. Профессиональная настройка рекламы и отслеживание эффективности!

Рекламные объявления показываются именно тем пользователям, которые ищут информацию о Ваших товарах или услугах, поэтому такая реклама не является навязчивой и раздражающей в отличие от других видов рекламы, с которыми мы сталкиваемся на телевидении или радио. Контекстная реклама нацелена лишь на тех пользователей, которые непосредственно заинтересованы в рекламе Ваших услуг или товаров.

Быстрый заказ \ Консультация

Скидка

1500 руб.
Заинтересовались услугами создания, обслуживания или продвижения вашей компании в Интернете?!
Получите 1500 руб.
за он-лайн заявку
Предложение ограничено.

После получения заявки с Вами свяжутся наши специалисты и уточнят все детали по интересующей вас услуге.
«Нажимая на кнопку "Получить скидку", я даю согласие на обработку персональных данных»
×
Получите 1500 рублей!
×
×