CSS оңтайландыру - веб-сайтыңызды жылдамдатудың 21 жолы

басып шығару · Время на чтение: 8мин · бойынша · Жарияланды · Жаңартылған

көбейтуМақаланы тыңдаңыз

Өнімділік үшін CSS қалай оңтайландыруға болады.

css сияқты салыстырмалы түрде күрделі құбыр арқылы өтуі керек HTML және JavaScript. Браузер міндетті түрде файлдарды серверден жүктеп алыңыз, содан кейін оларды талдауды және DOM жүйесіне қолдануды жалғастырыңыз. Оңтайландырудың экстремалды деңгейлеріне байланысты бұл процесс әдетте өте жылдам жүреді - фреймворктарға негізделмеген шағын веб-жобалар үшін CSS әдетте жалпы ресурстарды тұтынудың аз ғана бөлігін құрайды.

Фреймдер бұл тепе-теңдікті бұзады. jQuery UI сияқты JavaScript GUI стекін қосыңыз және CSS, JS және HTML экспоненциалды түрде өсетінін бақылаңыз. Көбінесе әзірлеушілер өздерін жаман сезінбейді - олар T3 Интернеті бар қуатты сегіз ядролы жұмыс станциясында отырғанда, ешкім жылдамдықты ойламайды. Бұл кешігулер немесе CPU шектеулері бар құрылғылар іске қосылған сайын өзгереді.

CSS оңтайландыруы көп өлшемді көзқарасты қажет етеді. Қолжазба кодты әртүрлі әдістер арқылы азайтуға болатынымен, жақтау кодын қолмен қайталау тиімсіз. Мұндай жағдайларда автоматты минимизаторды пайдалану жақсы нәтиже береді.
Келесі қадамдар CSS-ті оңтайландыруға көмектеседі. Олардың барлығы сіздің жобаңызға тікелей қатысты болмауы мүмкін, мұны есте сақтаңыз.

Таңбаша CSS ұсыныстарын пайдаланыңыз

Бетті жылдам жүктеу үшін CSS оңтайландыруы.

Ең жылдам CSS сөйлемі ешқашан талданбайтын сөйлем болып табылады. Төменде көрсетілген өріс декларациясы сияқты стенографиялық ұсыныстарды пайдалану CSS файлдарыңыздың өлшемін күрт азайтады. Көптеген қосымша стенографияларды «CSS Shorthand» googling арқылы табуға болады.

Міне, мысал:

б { маржа-жоғарғы: 1px;
    оң жақ шет: 2px;
    маржа-төменгі:  3px;
    шет-сол: 4px; }

б { маржа: 1px 2px 3px 4px; }

Пайдаланылмаған CSS кодын алып тастаңыз

Белгілеудің қажетсіз бөліктерін жою жылдамдықтың үлкен өсуіне әкеледі. Google Chrome браузерінде бұл мүмкіндік қораптан тыс бар.

Тек Көрініс > Әзірлеуші > Әзірлеуші құралдары тармағына өтіп, соңғы нұсқадағы Көздер қойындысын ашыңыз және пәрмен мәзірін ашыңыз. Осыдан кейін «Қамту аймағын көрсету» тармағын таңдап, ағымдағы веб-беттегі пайдаланылмаған кодты көрсететін қамтуды талдау терезесіне таңданыңыз.

CSS-пен ыңғайлырақ жұмыс жасаңыз

Жол бойынша талдау арқылы шарлау міндетті түрде ыңғайлы емес. Chrome Web Performance Audit ұқсас ақпаратты қайтарады – оны құралдар тақтасынан ашып, Көрініс > Әзірлеуші > Әзірлеуші құралдары > Тексеру тармағын таңдап, оны іске қосыңыз. Бұл орындалғанда, проблемалық элементтердің тізімі пайда болады.

Әрқашан стильдеріңізге қатысты мәселелерден хабардар болыңыз

Автоматтандырылған CSS талдауы әрқашан қателерге әкелуі мүмкін екенін есте сақтаңыз. CSS файлдарын кішірейтілген файлдармен ауыстырғаннан кейін бүкіл веб-сайтты мұқият тексеріп алыңыз - сіз оптимизатордың қандай қателіктер жібергенін ешқашан білмейсіз. Әрі қарай, лайықты веб-хост сайтыңыздағы әжімдерді үтіктеуге көмектеседі.

Inline Critical CSS

Сыртқы мәнерлер кестелерін жүктеу кешігуге байланысты уақытты алады - ешкім «мәнерленбеген мазмұнның жарқылын» есіне алады ма? Осылайша, кодтың ең маңызды бөліктері тақырып тегіне орналастырылуы мүмкін.

Дегенмен, оны асыра алмауға тырысыңыз. Кодты техникалық қызмет көрсету тапсырмаларын орындайтын адамдар да оқуы керек екенін есте сақтаңыз.

Міне, мысал:

<html>
  <бас>
    <стиль>
      .көк{түс:көк;}
    </стиль>
    </бас>
  <дене>
    <див сынып="көк">
      Сәлем Әлем!
    </див>

 

Параллельге қарсы талдау

@import CSS кодыңызға құрылым қосады. Өкінішке орай, артықшылықтар тегін емес: импортты кірістіруге болатындықтан, оларды параллель талдауға болмайды. Параллельді әдіс браузер бірден ала алатын тегтер қатарын пайдаланады.

Мысалы:

@import url("a.css");
@import url("b.css");
@import url(c.css);
v <link rel=«стиль парағы» href="a.css"> <link rel=«стиль парағы» href="b.css"> <link rel=«стиль парағы» href=c.css>

 

Суреттеріңізді CSS-пен ауыстырыңыз

Бірнеше жыл бұрын веб-сайттарда мөлдір әсерлер жасау үшін мөлдір PNG файлдарының жиынтығы әдеттегідей болды. Қазіргі уақытта CSS сүзгілері ресурстарды үнемдейтін балама болып табылады. Мысалы, осы қадаммен бірге келетін үзінді қарастырылып отырған кескіннің сұр реңкті нұсқасы ретінде көрсетілуін қамтамасыз етеді.

Мысалы:

img { -webkit-сүзгісі: сұр реңк (100%); /* ескі сафари */ сүзгі: сұр реңк (100%); }

 

Түс комбинацияларын қолданыңыз

Жалпы түсінік алты таңбалы түс дескрипторлары түстерді білдірудің ең тиімді жолы екенін айтады. Бұлай емес - кейбір жағдайларда қысқартылған сипаттамалар немесе түс атаулары қысқа болуы мүмкін.

мақсат { фон түсі: #ffffff; }
мақсат { фон: #fff; }

 

Қажет емес нөлдер мен бірлерді алып тастаңыз

CSS бірлік пен сан пішімдерінің кең ауқымын қолдайды. Олар оңтайландыру үшін қолайлы мақсат болып табылады - төмендегі үзіндіде көрсетілгендей кейінгі және кейінгі нөлдерді жоюға болады. Сондай-ақ, нөл әрқашан нөл болатынын және өлшемді қосу қамтылған ақпараттың мәнін арттырмайтынын есте сақтаңыз.

төсеу: 0,2 эм;
маржа: 20,0эм;
мән: 0px;
төсеу: .2эм;
маржа: 20em;
мән: 0;

 

Қосымша нүктелі үтірлерді алып тастаңыз

Бұл оңтайландыру біршама маңызды, себебі ол код өзгерістеріне әсер етеді. CSS спецификациясы сипат тобындағы соңғы нүктелі үтірді алып тастауға мүмкіндік береді. Бұл оңтайландыру әдісі арқылы қол жеткізілген үнемдеу ең аз болғандықтан, біз оны негізінен автоматты оңтайландырушымен жұмыс істейтіндер үшін айтамыз.

б {
. . .
шрифт өлшемі: 1,33 эм
}

 

Текстуралық спрайттарды пайдаланыңыз

Бірнеше шағын спрайттарды жүктеу хаттаманың үстеме шығындарына байланысты тиімсіз. CSS спрайттары шағын кескіндер сериясын бір үлкен PNG файлына біріктіреді, содан кейін олар CSS ережелері арқылы бөлінеді. сияқты бағдарламалар texturepacker , жасау процесін айтарлықтай жеңілдетеді.

.download {
  ені:80px; 
  биіктігі:31px; 
  фондық позиция: -160px -160px
}
.download: меңзерді апарыңыз {
  ені:80px; 
  биіктігі:32px; 
  фондық позиция: -80px -160px
}

 

Қажет емес пикселді жойыңыз

Өнімділікті жақсартудың тамаша тәсілі CSS стандартының ерекшелігі болып табылады. Бірліксіз сандық мәндер пикселдер деп есептеледі - пикселдерді жою әрбір сан үшін екі байтты сақтайды.

h2 {төсеу:0px; маржа:0px;}
h2 {төсеу:0; маржа:0}

 

Пропорцияларды талап етуден аулақ болыңыз

Талдау көрсеткендей, кейбір тегтер басқаларға қарағанда қымбатырақ. Бұл қадаммен бірге жүретін тізім әсіресе өнімділікті талап етеді - бұл мүмкіндік берілгенде одан аулақ болыңыз.

шекара-радиус қорап-көлеңке түрлендіру
    сүзгі
    :n-ші бала
    позиция: тұрақты;
    т.б.

 

Қажет емес бос орындарды алып тастаңыз

Бос орындар – ойлау қойындылары, каретканы қайтару және бос орындар – кодты оқуды жеңілдетеді, бірақ талдаушының көзқарасы бойынша көп нәрсе істемейді. Жеткізу алдында оларды жойыңыз. Жақсырақ, бұл жұмысты қабық сценарийіне немесе ұқсас құрылғыға тапсырыңыз.

Қажет емес пікірлерді алып тастаңыз

Компилятор үшін түсініктемелер де пайдасыз. Жеткізу алдында оларды жою үшін өзіңіздің талдауышыңызды жасаңыз. Бұл өткізу қабілеттілігін үнемдеп қана қоймайды, сонымен қатар шабуылдаушылар мен клонерлер үшін кодтың артында не тұрғанын анықтауды қиындатады.

Автоматты қысуды пайдаланыңыз

Yahoo-ның UI командасы қысу жұмыстарын көп орындайтын қолданба жасады. Ол JAR файлы ретінде келеді және сіз таңдаған JVM арқылы іске қосуға болады.

java -jar yuicompressor-xyzjar
Қолданылуы: java -jar yuicompressor-xyzjar [опциялар] [енгізу файлы] Жаһандық опциялар -h, --help Бұл ақпаратты көрсетеді --түрі Енгізу файлының түрін көрсетеді

 

NPM жүйесінен іске қосу

Өнімді Node.JS жүйесіне біріктіргіңіз келсе, өтіңіз npmjs.com/package/yuicompressor . Нашар ұсталған репозиторийде қаптама файлдарының жиынтығы және JavaScript API бар.

var компрессор = талап етеді('yuicompressor');
 компрессор.компресс('/path/to/ файлы немесе JS жолы', {
    //Компрессор опциялары:
    таңбалар жинағы: 'utf8',
    түрі: 'js',

 

Сассты және басқаларды бақылауда ұстаңыз

CSS селекторының өнімділігі бірнеше жыл бұрынғыдай маңызды болмаса да (ресурсты қараңыз), Sass сияқты фреймворктер кейде өте күрделі кодты шығарады. Шығару файлдарын мезгіл-мезгіл қарап шығыңыз және нәтижелерді қалай оңтайландыру керектігін ойлаңыз. Топпен бөлісетін нәтижелер бар ма? Файлдарды жалпыға қолжетімді бұлттық қоймада сақтаңыз.

Кэштеуді орнату

Ескі сөз ең жылдам файл ешқашан сымнан өтпейтін файл екенін айтады. Браузердің кэшін сұрау мұны тиімді етеді. Өкінішке орай, кэштеу тақырыптарын орнату серверде орындалуы керек. Скриншоттарда көрсетілген екі құралды жақсы пайдаланыңыз, олар өзгертулер нәтижелерін талдаудың жылдам жолын қамтамасыз етеді.

кэшті тазалау

Дизайнерлер алдағы өзгерістерге байланысты проблемалардан қорқып, кэштеуді жиі ұнатпайды. Бұл мәселені шешудің ұқыпты жолы файл атауы бар тегтерді қосуды қамтиды. Өкінішке орай, осы қадаммен бірге жүретін кодта сипатталған схема барлық жерде жұмыс істемейді, өйткені кейбір проксилер «динамикалық» жолдары бар файлдарды кэштеуден бас тартады.

<сілтеме rel="стильдер парағы" href="style.css?v=1.2.3">

 

Негіздерді ұмытпаңыз

CSS оңтайландыруы оңтайландыру әрекетінің бір бөлігі ғана. Егер сіздің серверіңіз HTTP/2 және gzip қысуын қолданбаса, деректерді тасымалдау кезінде көп уақыт жоғалады. Бақытымызға орай, бұл екі мәселені шешу өте қарапайым. Менің мысалда .htaccess файлы арқылы кеңінен қолданылатын Apache серверінің бірнеше параметрлері көрсетілген. Егер сіз басқа жүйеде болсаңыз, сервер құжаттамасын қараңыз.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE мәтіні/html AddOutputFilterByType DEFLATE мәтіні/css

Бұл мақала сіз үшін пайдалы болса, мен өте қуаныштымын. Ал, мен осы тақырып бойынша жаңа өзекті материалдарды қосуды жалғастырамын.

Никола Топты оқығаныңыз үшін рахмет

Пост қаншалықты пайдалы?

Бағалау үшін смайликті басыңыз!

орташа рейтинг 4.9 / 5. Бағалар саны: 8

Әзірге рейтингтер жоқ. Алдымен бағалаңыз.

Сізге де ұнауы мүмкін...

1 Жауап

  1. Илья айтты:

    Мен сіздің жобаңызды көптен бері бақылап жүрмін. Мен қалпына келтіруге қараймын, жақсы жаққа өзгерістерді көру өте жақсы. Маған сіздің дизайныңыз бен макетіңіз ұнайды. Сапа бойынша жұмыс жасап жатқаныңызды байқауға болады.Еңбектеріңізге рахмет.

Пікір үстеу

Э-пошта мекенжайыңыз жарияланбайды. Міндетті өрістер * таңбаланған

бес − үш =