რა სირთულეები შეიძლება წარმოიშვას CSS-ის შესრულების ოპტიმიზაციის დროს?

• მეტად კომპლექსური სელექტორების გამოყენება: სელექტორები, როგორიცაა > * ან :nth-child, შეიძლება იყოს ბრაუზერისთვის ნელი ძიებისთვის ელემენტების.
• @import-ის გამოყენება: @import იწვევს დამატებით HTTP მოთხოვნებს და ბლოკავს სტილების პარალელურ ჩატვირთვას, რაც აჩერებს გვერდის გამოსახვას.
• მოკლებული თვისებების გამოყენებისგან თავის შეკავება: რამდენიმე თვისების განსაზღვრა (მაგალითად, margin-top, margin-bottom და ა.შ.) ნაცვლად მოკლებული margin-ის, შეიძლება გაზარდოს ფაილის ზომა და ანალიზის დრო.
• დიდი რაოდენობის !important წესები: !important-ის გამოყენება არღვევს კასკადურობას და გამარტივებს სტილების დათვალიერებას და შენარჩუნებას.
• საჭირო არამიზნობრივი CSS-ის გამოყენება: სტილები, რომლებიც არ ვრცელდება არც ერთ ელემენტზე გვერდზე, ზრდის ფაილის ზომას.
• CSS-ის არაეფექტიანი ოპტიმიზაცია: CSS-ში გამოყენებული სურათები (მაგალითად, ფონზე) უნდა იყოს შეკუმშული და სწორ ფორმატში.
• მინიფიკაციის და შეკუმშვის არქონა: CSS ფაილები უნდა იყოს მინიფიცირებული და შეკუმშული (მაგალითად, Gzip) ზომის შემცირების და ჩატვირთვის სიჩქარის გასაზრდელად.
• დიდი რაოდენობის CSS ფაილები: მცირე ზომის CSS ფაილების მრავლად გამოყენება ზრდის HTTP მოთხოვნების რაოდენობას.
• რენდერინგის ბლოკირება: CSS ჩვეულებრივ რესურსია, რომელიც ბლოკავს რენდერინგს. არასწორი ორგანიზაცია (მაგალითად, კრიტიკული სტილები ფაილის დასაწყისში) შეიძლება გამოიწვიოს გამოსახულების დაგვიანება.
• სტანდარტული არარეგულარული ფონტების გამოყენება ოპტიმიზაციის გარეშე: დიდი რაოდენობით ფონტების ან ფონტების გამოყენება, რომლებიც არ არის ოპტიმიზებული (მაგალითად, არ არის ნიმუშები), შეიძლება დააჩქაროს გვერდის ჩატვირთვა.
• დიდი DOM ხეები: რთული და ღრმა DOM ხეები შეიძლება დააჩქაროს სტილების გამოყენებას და გადახატვას.
• CSS-ის გამოყენებით ანიმაციები, რომლებიც იწვევს ხშირი სტილებისა და განლაგების გადათვლას: left/top-ის ნაცვლად transform-ის გამოყენება უფრო ეფექტურია.
• მედიასაშუალების მოთხოვნების არასწორი გამოყენება: ძალიან ბევრი ან არაეფექტიანი მედია მოთხოვნა შეიძლება გაზარდოს სტილების დამუშავების დრო.
• პროდუქტიულობის ანალიზის არქონა: Chrome DevTools Performance tab-ის მსგავს ინსტრუმენტების გამოყენების გარეშე, სირთულეების გამოვლენა რთულია.

/* არასასურველი სელექტორის მაგალითი */
body > * {
    margin: 0;
}

/* უფრო ეფექტური სელექტორი */
.container {
    margin: 0;
}

/* გამოიყენეთ @import-ის ნაცვლად */
@import url('other.css');

/* HTML-ში გამოიყენეთ <link> */

/* ამის ნაცვლად */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

/* გამოიყენეთ მოკლებული თვისება */
margin: 10px 20px;