CSS аптымізацыя - 21 спосаб паскорыць сайт

Надрукаваць · Время на чтение: 8мін · па · Апублікавана · Абноўлены

прайграцьПраслухаць артыкул

Як аптымізаваць CSS для павышэння прадукцыйнасці.

CSS павінен праходзіць праз адносна складаны канвеер, сапраўды гэтак жа, як HTML і JavaScript. Браўзэр павінен загрузіць файлы з сервера, А затым прыступіць да іх сінтаксічнага аналізу і прымянення да DOM. З-за экстрэмальных узроўняў аптымізацыі гэты працэс звычайна адбываецца даволі хутка – для невялікіх вэб-праектаў, не заснаваных на фрэймворках, CSS звычайна складае толькі невялікую частку ад агульнага спажывання рэсурсаў.

Рамкі парушаюць гэтую раўнавагу. Уключыце стэк графічнага карыстацкага інтэрфейсу JavaScript, такі як карыстацкі інтэрфейс jQuery, і назірайце за імклівым ростам памераў CSS, JS і HTML. Часта распрацоўшчыкі адчуваюць сябе не дрэнна - калі сядзяць за магутнай васьміядзернай працоўнай станцыяй з інтэрнэтам T3, хуткасць нікога не хвалюе. Гэта змяняецца па меры таго, як у гульню ўступаюць затрымкі ці прылады з абмежаваннямі ЦП.

Аптымізацыя CSS патрабуе шматмернага падыходу. У той час як напісаны ад рукі код можна паменшыць з дапамогай розных метадаў, перабіраць код фрэймворка ўручную неэфектыўна. У гэтых выпадках выкарыстанне аўтаматычнага мінімайзера дае лепшыя вынікі.
Наступныя крокі дапамогуць вам аптымізаваць CSS. Не кожны з іх можа быць непасрэдна дастасавальны да вашага праекту, майце гэта на ўвазе.

Выкарыстоўвайце скарачэнне CSS прапаноў

Аптымізацыя CSS для хуткай загрузкі старонак.

Самая хуткая прапанова CSS - гэта тое, якое ніколі не аналізуецца. Выкарыстанне скарочаных прапаноў, такіх як аб'ява поля, паказанае ніжэй, радыкальна памяншае памер вашых файлаў CSS. Мноства дадатковых скарочаных формаў можна знайсці, трошкі «CSS Shorthand».

Вось прыклад:

p { margin-top: 1px;
    margin-right: 2px;
    margin-bottom:  3px;
    margin-left: 4px; }

p { margin: 1px 2px 3px 4px; }

Выдаліце невыкарыстоўваны код CSS

Ухіленне непатрэбных частак вашай разметкі, відавочна, прыводзіць да велізарнага павелічэння хуткасці. Браўзэр Google Chrome мае гэтую функцыю са скрынкі.

Проста перайдзіце ў "Прагляд"> "Распрацоўшчык"> "Інструменты распрацоўшчыка", адкрыйце ўкладку "Крыніцы" ў апошняй версіі і адкрыйце меню каманд. Пасля гэтага абярыце «Паказаць пакрыццё» і палюбуйцеся на акно аналізу пакрыцця, якое падсвятляе невыкарыстоўваны код на бягучай вэб-старонцы.

Працуйце з CSS зручнейшым спосабам

Навігацыя па парадковаму аналізу не абавязкова зручная. Аўдыт вэб-прадукцыйнасці Chrome вяртае аналагічную інфармацыю - проста адкрыйце яго на панэлі прылад, абярыце «Прагляд» > «Распрацоўшчык» > «Інструменты распрацоўніка» > «Аўдыт» і запусціце яго. Калі гэта будзе зроблена, зьявіцца сьпіс праблемных элемэнтаў.

Заўсёды будзьце ў курсе праблем звязаных з вашымі стылямі

Майце на ўвазе, што аўтаматызаваны аналіз CSS заўсёды можа прывесці да памылак. Правядзіце пільны тэст усяго вэб-сайта пасля замены файлаў CSS на паменшаныя - ніколі не ведаеш, якія памылкі дапусціў аптымізатар. І ў далейшым годны вэб-хостынг можа дапамагчы вам згладзіць зморшчыны на вашым сайце.

Убудаваны крытычны CSS

Загрузка вонкавых табліц стыляў патрабуе часу з-за затрымкі - хто-небудзь памятае «выбліск нетылізаванага змесціва»? Такім чынам, найболей важныя фрагменты кода могуць быць змешчаныя ў тэг загалоўка.

Аднак паспрабуйце не перашчыраваць. Майце на ўвазе, што код таксама павінен быць прачытаны людзьмі, якія выконваюць задачы абслугоўвання.

Вось прыклад:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>

 

Антыпаралельны аналіз

@import дадае структуру вашаму коду CSS. Нажаль, перавагі не бясплатныя: паколькі імпарты могуць укладвацца сябар у сябра, іх раўналежны аналіз немагчымы. У больш раўналежным спосабе выкарыстоўваецца шэраг тэгаў , якія браўзэр можа атрымаць адразу.

Прыклад:

@import url("a.css");
@import url("b.css");
@import url("c.css");
v <link rel="stylesheet" href="a.css"> <link rel="stylesheet" href="b.css"> <link rel="stylesheet" href="c.css">

 

Заменіце вашыя выявы з дапамогай CSS

Некалькі гадоў таму набор напаўпразрыстых файлаў PNG для стварэння напаўпразрыстых эфектаў на вэб-сайтах быў звычайнай з'явай. У цяперашні час фільтры CSS уяўляюць сабой рэсурсазберагальную альтэрнатыву. Напрыклад, фрагмент, які суправаджае гэты крок, гарантуе, што разгляданы малюнак адлюстроўваецца як версія самога сябе ў градацыях шэрага.

Прыклад:

img { -webkit-filter: grayscale(100%); /* old safari */ filter: grayscale(100%); }

 

Выкарыстоўвайце спалучэнні кветак

Разумны сэнс падказвае, што шасцізнакавыя каляровыя дэскрыптары з'яўляюцца найболей эфектыўным спосабам выраза колераў. Гэта не так - у некаторых выпадках скарочаныя апісанні або назвы кветак могуць быць карацей.

target { background-color: #ffffff; }
target { background: #fff; }

 

Выдаліце непатрэбныя нулі і адзінкі

CSS падтрымлівае шырокі спектр адзінак вымярэння і лікавых фарматаў. Яны з'яўляюцца ўдзячнай мішэнню для аптымізацыі - як канчатковыя, так і наступныя нулі могуць быць выдаленыя, як паказана ў фрагменце ніжэй. Акрамя таго, майце на ўвазе, што нуль заўсёды з'яўляецца банкрутам, і што даданне вымярэння не павялічвае каштоўнасць якая змяшчаецца інфармацыі.

padding: 0.2em;
margin: 20.0em;
avalue: 0px;
padding: .2em;
margin: 20em;
avalue: 0;

 

Выдаліце лішнія кропкі з коскай

Гэтая аптымізацыя некалькі крытычная, бо ўплывае на змены кода. Спецыфікацыя CSS дазваляе апускаць апошнюю кропку з коскай у групе ўласцівасцяў. Паколькі эканомія, якая дасягаецца гэтым метадам аптымізацыі, мінімальная, мы згадваем пра гэта ў асноўным для тых, хто працуе з аўтаматычным аптымізатарам.

p {
. . .
font-size: 1.33em
}

 

Выкарыстоўвайце спрайты тэкстур

Загрузка некалькіх невялікіх спрайт неэфектыўная з-за накладных выдаткаў пратаколу. Спрайты CSS аб'ядноўваюць серыю невялікіх малюнкаў у адзін вялікі файл PNG, які затым разбіваецца на часткі з дапамогай правіл CSS. Такія праграмы, як TexturePacker , значна спрашчаюць працэс стварэння.

.download {
  width:80px; 
  height:31px; 
  background-position: -160px -160px
}
.download:hover {
  width:80px; 
  height:32px; 
  background-position: -80px -160px
}

 

Выдаляйце непатрэбны піксель

Адзін з хупавых спосабаў павысіць прадукцыйнасць - гэта асаблівасць стандарту CSS. Мяркуецца, што лікавыя значэнні без адзінкі вымярэння з'яўляюцца пікселямі - выдаленне пікселяў эканоміць два байта для кожнага ліку.

h2 {padding:0px; margin:0px;}
h2 {padding:0; margin:0}

 

Пазбягайце патрабавальных прапорцый

Аналіз паказаў, што некаторыя тэгі каштуюць даражэй за іншыя. Спіс, які суправаджае гэты крок, лічыцца асабліва патрабавальным да прадукцыйнасці - пазбягайце яго, калі падаецца магчымасць зрабіць гэта.

border-radius box-shadow transform
    filter
    :nth-child
    position: fixed;
    etc.

 

Выдаліць непатрэбныя прабелы

Прабелы - падумайце аб табуляцыях, звароце карэткі і прабелах - палягчаюць чытанне кода, але з пункту гледжання сінтаксічнага аналізатара мала што даюць. Ухіліце іх перад адпраўкай. Яшчэ лепш дэлегаваць гэтую працу сцэнару абалонкі ці аналагічнай прыладзе.

Выдаліце непатрэбныя каментары

Каментары таксама бескарысныя для кампілятара. Стварыце ўласны парсер, каб выдаліць іх перад дастаўкай. Гэта не толькі эканоміць прапускную здольнасць, але таксама гарантуе, што зламыснікам і клонерам будзе цяжэй зразумець, што ляжыць у аснове кода.

Выкарыстоўвайце аўтаматычны сціск

Каманда Yahoo, якая займаецца карыстацкім інтэрфейсам, стварыла дадатак, якое выконвае мноства задач па сціску. Ён пастаўляецца ў выглядзе файла JAR,і можа быць запушчаны з абранай JVM.

java -jar yuicompressor-xyzjar
Usage: java -jar yuicompressor-xyzjar [options] [input file] Global Options -h, --help Displays гэтая інфармацыя --type Specifies the typ of input file

 

Запуск з NPM

Калі вы аддаеце перавагу інтэграваць прадукт у Node.JS, наведайце npmjs.com/package/yuicompressor . Дрэнна падтрымоўваны рэпазітар утрымоўвае набор файлаў-абалонак і JavaScript API.

var compressor = require('yuicompressor');
 compressor.compress('/path/to/ file or String of JS', {
    //Compressor Options:
    charset: 'utf8',
    type: 'js',

 

Трымайце Sass і інш. пад кантролем

Хоць прадукцыйнасць селектара CSS не так крытычная, як некалькі гадоў таму (гл. рэсурс), такія фрэймворкі, як Sass, часам выдаюць надзвычай складаны код. Час ад часу праглядайце выходныя файлы і думайце, як аптымізаваць вынікі. Ёсць вынікі, каб падзяліцца з камандай? Захоўваеце файлы ў агульнадаступным хмарным сховішчы.

Наладзьце кэшаванне

Старая прымаўка абвяшчае, што самы хуткі файл – гэта той, які ніколі не перадаецца па правадах. Выкананне запытаў да кэшу браўзэра дазваляе дабіцца гэтага эфектыўна. Нажаль, налада загалоўкаў кэшавання павінна выконвацца на серверы. Эфектыўна выкарыстоўвайце дзве прылады, паказаных на здымках экрана, - яны забяспечваюць хуткі спосаб аналізу вынікаў вашых змен.

Ачысціць кэш

Дызайнеры часта не любяць кэшаванне з-за боязі праблем з маючымі адбыцца зменамі. Акуратны спосаб вырашыць гэтую праблему ўключае ў сябе ўключэнне тэгаў з імем файла. Нажаль, схема, апісаная ў кодзе, які суправаджае гэты крок, працуе не ўсюды, бо некаторыя проксі адмаўляюцца кэшаваць файлы з «дынамічнымі» шляхамі.

<link rel="stylesheet" href="style.css?v=1.2.3">

 

Не забывайце аб асновах

Аптымізацыя CSS - гэта толькі частка мерапрыемстваў па аптымізацыі. Калі ваш сервер не выкарыстоўвае сціск HTTP/2 і gzip, пры перадачы даных губляецца шмат часу. На шчасце, вырашыць гэтыя дзве праблемы дастаткова проста. У маім прыкладзе паказана некалькі налад шырока выкарыстоўванага сервера Apache з дапамогай файла .htaccess. Калі вы апынецеся ў іншай сістэме, проста звернецеся да дакументацыі сервера.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/css

Буду вельмі рады, калі гэты артыкул апынецца карысным для Вас. Ну а я працягну дадаваць новыя актуальныя матэрыялы па дадзенай тэме.

Дзякуй, што чытаеш Nicola Top

Наколькі публікацыя карысная?

Націсніце на смайлік, каб ацаніць!

Сярэдняя адзнака 4.9 / 5. Колькасць адзнак: 8

Ацэнак пакуль няма. Пастаўце адзнаку першым.

Вам таксама можа спадабацца...

1 адказ

  1. Илья кажа:

    Даўно назіраю за вашым праектам. Гляджу пачалі аднаўленне, вельмі прыемна бачыць змены ў лепшы бок. Мне падабаецца ваш дызайн і афармленне. Відаць працуеце над якасцю. Дзякую за старанні.

Пакінуць адказ

Ваш адрас электроннай пошты не будзе апублікаваны. Неабходныя палі пазначаны як *

1 × два =