✔️ SEO HELPER | NICOLA.TOP

✔️ SEO HELPER | NICOLA.TOP

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

Көрулер саны

2618
басып шығару · Время на чтение: 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 арқылы табуға болады.

Міне, мысал:

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

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

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

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

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

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

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

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

Inline Critical CSS

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

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

Міне, мысал:

<html> 
<head> 
<style> .blue{color:blue;} </style>
</head> 
<body> 
<div class="blue"> Сәлем Әлем! </div>

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

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

Мысалы:

@import url("a.css"); @import url("b.css"); @import url("c.css");

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

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

Мысалы:

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

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

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

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

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

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

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

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

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

б { . . . шрифт өлшемі: 1.33em

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

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

.жүктеу {ені:80px; биіктігі: 31px; background-position: -160px -160px; } .жүктеу: hover {ені: 80px; биіктігі: 32px; фондық позиция: -80px -160px; }

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

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

h2 {толтыру:0px; маржа:0px;} h2 {толтырғыш:0; маржа: 0}

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

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

border-radius box-shadow түрлендіру сүзгісі:nth-child позициясы: бекітілген; т.б.

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

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

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

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

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

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'); compressor.compress('/path/to/ файлы немесе JS жолы', { //Компрессор опциялары: charset: 'utf8', түрі: 'js',

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

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

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

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

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

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



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


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


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


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


Осы мақаланы оқу:



Оқығаныңыз үшін рахмет: SEO HELPER | NICOLA.TOP


      
          
        Бұл пост қаншалықты пайдалы болды?      
              
        Бағалау үшін жұлдызшаны басыңыз!      
        
      
                      
  •                       
    •                   
  •                       
    •                   
  •                       
    •                   
  •                       
    •                   
  •                       
    •               
    
    
        
      Орташа рейтинг 5 / 5. Дауыс саны: 329    
    
      Әзірге дауыс жоқ! Осы жазбаға бірінші болып баға беріңіз.    
    
  
          
          
        


        
        

      


    

  






Тегтер: 


	




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









	
		
1 Жауап


		

				


			
    
						
  1. 
				
    
				
    
						Илья айтты:		
    
		
		
    
			22.05.2022 күні 20:36 уақытында		
    

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

		
    Жауап беру
    
				
    
				
    2. 
			


			
		

		
		
	
		

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



 


бір × үш =