Тематические статьи →

Ускоряем работу сайта за счёт оптимизации CSS

Время загрузки и отри­совки сайта в бра­у­зере можно заметно сни­зить, если вос­поль­зо­ваться сле­ду­ю­щими советами.

Если какие-то стили не нужны на стра­нице — их надо отклю­чить. В про­цессе раз­ра­ботки часто под­клю­ча­ются те сти­ли, кото­рые потом не исполь­зу­ют­ся. Напри­мер, стили для отладки или стили для под­клю­чен­ных скрип­тов, кото­рые не исполь­зу­ют­ся. Не надо застав­лять поль­зо­ва­теля загру­жать ненуж­ные фай­лы.

Загру­жайте стили с под­до­ме­нов, с дру­гих доме­нов или CDN — файлы с одного домена загру­жа­ются в огра­ни­чен­ное число пото­ков, коли­че­ство этих пото­ков даже у самых про­дви­ну­тых бра­у­зе­ров не более деся­ти. Поэтому если кар­ти­нок, фай­лов сти­лей и скрип­тов на стра­нице мно­го, то неко­то­рым из них при­дется ждать своей оче­ре­ди. Лимит коли­че­ства пото­ков рас­про­стра­ня­ется только на домен, поэтому если CSS-файлы будут загру­жаться с дру­гого доме­на, то ско­рость загрузки воз­рас­тет за счёт парал­лель­но­сти.

Бло­ки­ру­ю­щие отри­совку стра­ницы стили не должны загру­жаться с неста­биль­ных внеш­них доме­нов. Если исполь­зу­е­мый для загрузки внеш­ний домен пере­ста­нет отве­чать или ста­нет отве­чать с дли­тель­ной задерж­кой, то суще­ственно замед­лится загрузка вашего сай­та. Если исполь­зу­ете внеш­ние доме­ны, то убе­ди­тесь, что они доста­точно ста­бильно рабо­та­ют.

CSS надо сжать, мини­ми­зи­ро­вать и опти­ми­зи­ро­вать. Уда­ле­ние про­бе­лов, ком­мен­та­ри­ев, пере­но­сов строк, сокра­ще­ние кодов цве­тов и дру­гие опти­ми­за­ции умень­шают раз­мер фай­лов и уско­ряют загруз­ку. При исполь­зо­ва­нии сто­рон­них биб­лио­тек — про­сто под­клю­чайте мини­ми­зи­ро­ван­ную вер­сию. Для соб­ствен­ных скрип­тов исполь­зуйте спе­ци­аль­ные биб­лио­теки, сжи­ма­ю­щие и опти­ми­зи­ру­ю­щие CSS, — CSSO или YUI Compressor.

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

Исполь­зуйте GZIP для сжа­тия дан­ных. Почти все совре­мен­ные бра­у­зеры могут обра­ба­ты­вать сжа­тые в GZIP стили CSS. Опти­маль­ный спо­соб – пред­ва­ри­тель­ное сжа­тие исполь­зу­е­мых CSS-фай­лов на мак­си­маль­ном (девя­том) уровне ком­прес­сии и после­ду­ю­щая отдача веб-сер­ве­ром уже сжа­тых фай­лов. Сжа­тие «на лету» вызы­вает нагрузку на про­цес­сор сер­ве­ра, поэтому его на нагру­жен­ных про­ек­тах не стоит исполь­зо­вать.

Кэши­руйте CSS на сто­роне кли­ента — не застав­ляйте поль­зо­ва­те­лей мно­го­кратно ска­чи­вать один и тот же файл: задайте соот­вет­ству­ю­щие заго­ловки в ответе веб-сер­вера (Expires или Cache-Control max-age + Last-Modified или ETag).

Сокра­тите кас­кады в CSS — на «сла­бых» устрой­ствах быст­рее отри­со­вы­ва­ются стра­ницы, где для опре­де­ле­ния стиля эле­мента не тре­бу­ется обра­ботка мно­го­кратно вло­жен­ных правил.

Поделитесь с друзьями:


Информация о публикации:

Материал опубликован в 2014 году. Эта статья про фронтенд-разработку и о веб-разработке. При пере­пуб­ли­ка­ции обя­за­тельно ука­за­ние пер­во­ис­точ­ника в виде гипер­тек­сто­вой ссылки на сайт web-creator.ru

Воспользуйтесь нашими
знаниями и опытом

Отправьте нам сообщение при помощи формы. Или напишите на e-mail s@web-creator.ru

Мы максимально оперативно ответим Вам по электронной почте или перезвоним.

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

Либо просто позвоните нам по номеру: +7 495 215-1501

Мы работаем по будним дням с 10 до 19 часов.

Комплексные услуги

Реализация «под ключ» проектов по созданию различных видов сайтов, разработка веб-приложений для автоматизации бизнес-процессов, ведение контекстных и медийных рекламных кампаний, поисковое продвижение, комплексная поддержка веб-проектов, консалтинговые услуги.