CSS ოპტიმიზაცია - 21 გზა თქვენი ვებსაიტის გასაუმჯობესებლად

ბეჭდვა · დრო на чтение: 8მინ · მიერ · გამოქვეყნდა · განახლებულია

გამრავლებამოუსმინეთ სტატიას

როგორ გავაუმჯობესოთ CSS შესრულებისთვის.

css უნდა გაიაროს შედარებით რთული მილსადენი, ისევე როგორც HTML და JavaScript. ბრაუზერმა უნდა ფაილების ჩამოტვირთვა სერვერიდანდა შემდეგ გააგრძელეთ მათი გარჩევა და DOM-ში გამოყენება. ოპტიმიზაციის უკიდურესი დონის გამო, ეს პროცესი ჩვეულებრივ საკმაოდ სწრაფია - მცირე ვებ პროექტებისთვის, რომლებიც არ არის დაფუძნებული ჩარჩოებზე, CSS ჩვეულებრივ შეადგენს რესურსის მთლიანი მოხმარების მხოლოდ მცირე ნაწილს.

ჩარჩოები არღვევს ამ ბალანსს. ჩართეთ JavaScript GUI დასტა, როგორიცაა jQuery UI და უყურეთ თქვენი CSS, JS და HTML ექსპონენციალურად ზრდას. ხშირად, დეველოპერები თავს ცუდად არ გრძნობენ - როდესაც ისინი სხედან მძლავრ რვა ბირთვიან სამუშაო სადგურზე T3 ინტერნეტით, არავის აინტერესებს სიჩქარე. ეს იცვლება, როდესაც შეფერხების ან CPU-ს შეზღუდვის მქონე მოწყობილობები ამოქმედდება.

CSS ოპტიმიზაცია მოითხოვს მრავალგანზომილებიან მიდგომას. მიუხედავად იმისა, რომ ხელნაწერი კოდი შეიძლება შემცირდეს სხვადასხვა მეთოდების გამოყენებით, ჩარჩო კოდის ხელით გამეორება არაეფექტურია. ამ შემთხვევაში, ავტომატური მინიმალიზატორის გამოყენება უკეთეს შედეგს იძლევა.
შემდეგი ნაბიჯები დაგეხმარებათ CSS-ის ოპტიმიზაციაში. ყველა მათგანი შეიძლება პირდაპირ არ იყოს გამოყენებული თქვენს პროექტზე, გაითვალისწინეთ ეს.
სტატიის შინაარსი:

გამოიყენეთ მალსახმობი CSS წინადადებები

CSS ოპტიმიზაცია გვერდის სწრაფი ჩატვირთვისთვის.

ყველაზე სწრაფი CSS წინადადება არის ის, რომელიც არასოდეს არ არის გაანალიზებული. სტენოგრაფიული წინადადებების გამოყენება, როგორიცაა ქვემოთ ნაჩვენები ველის დეკლარაცია, მკვეთრად შეამცირებს თქვენი CSS ფაილების ზომას. უამრავი დამატებითი სტენოგრამის პოვნა შეგიძლიათ გუგლში "CSS Shorthand".

აი მაგალითი:

გვ { ზღვარი-ზედა: 1px;
    ზღვარი-მარჯვნივ: 2 პიქსელი;
    ზღვარი-ქვედა:  3 პიქსელი;
    ზღვარი-მარცხნივ: 4 პიქსელი; }

გვ { ზღვარი: 1px 2px 3px 4px; }

წაშალეთ გამოუყენებელი CSS კოდი

თქვენი მარკირების არასაჭირო ნაწილების აღმოფხვრა აშკარად იწვევს სიჩქარის უზარმაზარ ზრდას. Google Chrome ბრაუზერს აქვს ეს ფუნქცია გარედან.

უბრალოდ გადადით View > Developer > Developer Tools, გახსენით წყაროების ჩანართი უახლეს ვერსიაში და გახსენით ბრძანების მენიუ. ამის შემდეგ, აირჩიეთ „დაფარვის ჩვენება“ და აღფრთოვანდით დაფარვის ანალიზის ფანჯრით, რომელიც ხაზს უსვამს გამოუყენებელ კოდს მიმდინარე ვებ გვერდზე.

CSS-თან მუშაობა უფრო მოსახერხებელი გზით

ნავიგაცია სტრიქონი-სტრიქონ ანალიზის საშუალებით სულაც არ არის მოსახერხებელი. Chrome Web Performance Audit აბრუნებს მსგავს ინფორმაციას - უბრალოდ გახსენით ის ხელსაწყოთა ზოლიდან, აირჩიეთ View > Developer > Developer Tools > Audit და გაუშვით. როდესაც ეს გაკეთდება, გამოჩნდება პრობლემური ელემენტების სია.

ყოველთვის გაითვალისწინეთ თქვენს სტილთან დაკავშირებული საკითხები

გაითვალისწინეთ, რომ ავტომატური CSS ანალიზი ყოველთვის შეიძლება გამოიწვიოს შეცდომები. ჩაატარეთ მთელი ვებსაიტის საფუძვლიანი ტესტირება CSS ფაილების მინიფიცირებული ფაილებით ჩანაცვლების შემდეგ - თქვენ არასოდეს იცით რა შეცდომები დაუშვა ოპტიმიზატორმა. და მომავალში, ღირსეული ვებ მასპინძელი დაგეხმარებათ გაასწოროთ ნაოჭები თქვენს საიტზე.

Inline Critical CSS

გარე სტილის ფურცლების ჩატვირთვას დრო სჭირდება შეყოვნების გამო - ახსოვს ვინმეს "არასტიილი კონტენტის ფლეში"? ამ გზით, ყველაზე მნიშვნელოვანი კოდი შეიძლება განთავსდეს სათაურის ტეგში.

თუმცა, შეეცადეთ არ გადააჭარბოთ მას. გაითვალისწინეთ, რომ კოდი ასევე უნდა წაიკითხონ იმ ადამიანებმა, რომლებიც ასრულებენ ტექნიკურ დავალებებს.

აი მაგალითი:

<html>
  <ხელმძღვანელი>
    <სტილი>
      .ლურჯი{ფერი:ლურჯი;}
    </სტილი>
    </ხელმძღვანელი>
  <სხეული>
    <დივ კლასი="ლურჯი">
      Გამარჯობა მსოფლიო!
    </დივ>

 

ანტიპარალელური ანალიზი

@იმპორტი ამატებს სტრუქტურას თქვენს CSS კოდს. სამწუხაროდ, სარგებელი უფასო არ არის: ვინაიდან იმპორტი შეიძლება ბუდირებული იყოს, მათი პარალელურად გაანალიზება შეუძლებელია. უფრო პარალელური გზა იყენებს ტეგების სერიას, რომლებიც ბრაუზერს შეუძლია ერთდროულად მიიღოს.

მაგალითი:

@იმპორტი url("a.css");
@იმპორტი url("b.css");
@იმპორტი url(c.css);
ვ <link rel="სტილის ფურცელი" href="a.css"> <link rel="სტილის ფურცელი" href="b.css"> <link rel="სტილის ფურცელი" href=c.css>

 

შეცვალეთ თქვენი სურათები CSS-ით

რამდენიმე წლის წინ, გამჭვირვალე PNG ფაილების ნაკრები ვებსაიტებზე გამჭვირვალე ეფექტების შესაქმნელად ჩვეულებრივი იყო. ამჟამად, CSS ფილტრები რესურსების დაზოგვის ალტერნატივაა. მაგალითად, ამ ნაბიჯის თანმხლები ფრაგმენტი უზრუნველყოფს მოცემული სურათის ჩვენებას, როგორც მისი ნაცრისფერი ფერის ვერსია.

მაგალითი:

img { -webkit-filter: grayscale(100%); /* ძველი safari */ filter: grayscale (100%); }

 

გამოიყენეთ ფერების კომბინაციები

საღი აზრი გვკარნახობს, რომ ექვსნიშნა ფერის აღწერები ფერების გამოხატვის ყველაზე ეფექტური საშუალებაა. ეს ასე არ არის - ზოგიერთ შემთხვევაში, შემოკლებული აღწერილობები ან ფერების სახელები შეიძლება უფრო მოკლე იყოს.

სამიზნე { ფონის ფერი: #ffffff; }
სამიზნე { ფონი: #fff; }

 

ამოიღეთ არასაჭირო ნულები და ერთეულები

CSS მხარს უჭერს ერთეულებისა და რიცხვების ფორმატების ფართო სპექტრს. ისინი მისასალმებელი სამიზნეა ოპტიმიზაციისთვის - როგორც უკანა, ისე უკანა ნულები შეიძლება წაიშალოს, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ ნაწყვეტში. ასევე, გახსოვდეთ, რომ ნული ყოველთვის ნულია და რომ განზომილების დამატება არ ზრდის შემავალი ინფორმაციის მნიშვნელობას.

padding: 0.2 მმ;
ზღვარი: 20.0 სთ;
ღირებულება: 0px;
padding: .2მ;
ზღვარი: 20 სთ;
ღირებულება: 0;

 

ამოიღეთ დამატებითი მძიმით

ეს ოპტიმიზაცია გარკვეულწილად კრიტიკულია, რადგან ის გავლენას ახდენს კოდის ცვლილებებზე. CSS სპეციფიკაცია საშუალებას გაძლევთ გამოტოვოთ ბოლო მძიმით თვისების ჯგუფში. ვინაიდან ამ ოპტიმიზაციის მეთოდით მიღწეული დანაზოგი მინიმალურია, ჩვენ აღვნიშნავთ მას ძირითადად მათთვის, ვინც მუშაობს ავტომატურ ოპტიმიზატორთან.

გვ {
. . .
შრიფტის ზომა: 1.33 სთ
}

 

გამოიყენეთ ტექსტურის სპრაიტები

მრავალი მცირე სპრაიტის ჩატვირთვა არაეფექტურია პროტოკოლის ზედნადების გამო. CSS sprites აერთიანებს მცირე სურათების სერიას ერთ დიდ PNG ფაილში, რომელიც შემდეგ იშლება CSS წესების გამოყენებით. პროგრამები, როგორიცაა ტექსტურპაკერი , მნიშვნელოვნად ამარტივებს შექმნის პროცესს.

.ჩამოტვირთეთ {
  სიგანე:80 პიქსელი; 
  სიმაღლე:31 პიქსელი; 
  ფონის პოზიცია: -160px -160px
}
.ჩამოტვირთვა: hover {
  სიგანე:80 პიქსელი; 
  სიმაღლე:32 პიქსელი; 
  ფონის პოზიცია: -80px -160px
}

 

წაშალეთ არასასურველი პიქსელი

შესრულების გაუმჯობესების ერთი კარგი გზა არის CSS სტანდარტის მახასიათებელი. ერთეული რიცხვითი მნიშვნელობები მიჩნეულია პიქსელებად - პიქსელების ამოღება დაზოგავს ორ ბაიტს თითოეული რიცხვისთვის.

h2 {padding:0px; ზღვარი:0px;}
h2 {padding:0; ზღვარი:0}

 

მოერიდეთ მოთხოვნად პროპორციებს

ანალიზმა აჩვენა, რომ ზოგიერთი ტეგი უფრო ძვირია, ვიდრე სხვები. სია, რომელიც ახლავს ამ საფეხურს, ითვლება განსაკუთრებით მომთხოვნი შესრულებაზე - მოერიდეთ მას, როცა ამის შესაძლებლობა გეძლევათ.

საზღვარი-რადიუსის ყუთი-ჩრდილოვანი ტრანსფორმაცია
    ფილტრი
    :მე-n-შვილი
    პოზიცია: დაფიქსირდა;
    და ა.შ.

 

ამოიღეთ არასაჭირო ადგილები

სივრცეები - აზროვნების ჩანართები, აბრუნება და ინტერვალი - აადვილებს კოდს წაკითხვას, მაგრამ ბევრს ნუ გააკეთებთ პარსერის თვალსაზრისით. გააუქმეთ ისინი გაგზავნამდე. კიდევ უკეთესი, გადაანაწილეთ ეს ნამუშევარი shell სკრიპტზე ან მსგავს მოწყობილობაზე.

წაშალეთ არასასურველი კომენტარები

კომენტარები ასევე უსარგებლოა შემდგენელისთვის. შექმენით თქვენი საკუთარი პარსერი, რომ ამოიღოთ ისინი მიწოდებამდე. ეს არა მხოლოდ დაზოგავს სიჩქარეს, არამედ ართულებს თავდამსხმელებსა და კლონერებს იმის გარკვევას, თუ რა დგას კოდის უკან.

გამოიყენეთ ავტომატური შეკუმშვა

Yahoo-ს UI-ის გუნდმა შექმნა აპლიკაცია, რომელიც ბევრ შეკუმშვას ასრულებს. ის მოდის JAR ფაილის სახით და მისი გაშვება შესაძლებელია თქვენი არჩევანის JVM-ით.

java -jar yuicompressor-xyzjar
გამოყენება: java -jar yuicompressor-xyzjar [ოფციები] [შეყვანის ფაილი] გლობალური ოფციები -h, --help აჩვენებს ამ ინფორმაციას --type განსაზღვრავს შეყვანის ფაილის ტიპს

 

გაუშვით NPM-დან

თუ გსურთ პროდუქტის ინტეგრირება Node.JS-ში, გთხოვთ ეწვიოთ npmjs.com/package/yuicompressor . ცუდად შენახული საცავი შეიცავს wrapper ფაილების კომპლექტს და JavaScript API-ს.

var კომპრესორი = მოითხოვს("იუიკომპრესორი");
 კომპრესორი.შეკუმშოს('/path/to/ ფაილი ან JS-ის სტრიქონი', {
    //კომპრესორის პარამეტრები:
    სიმბოლოების ნაკრები: 'utf8',
    ტიპი: 'js',

 

შეინახეთ Sass და სხვები კონტროლის ქვეშ

მიუხედავად იმისა, რომ CSS სელექტორის შესრულება არ არის ისეთი კრიტიკული, როგორც ეს იყო რამდენიმე წლის წინ (იხილეთ რესურსი), ისეთი ჩარჩოები, როგორიცაა Sass, ზოგჯერ აწარმოებს უკიდურესად რთულ კოდს. დროდადრო გადახედეთ გამომავალ ფაილებს და იფიქრეთ იმაზე, თუ როგორ გააუმჯობესოთ შედეგები. გაქვთ შედეგები გუნდთან გასაზიარებლად? შეინახეთ ფაილები საჯარო ღრუბლოვან საცავში.

ქეშირების დაყენება

ძველი გამონათქვამი ამბობს, რომ ყველაზე სწრაფი ფაილი არის ის, რომელიც არასოდეს გადადის მავთულზე. ბრაუზერის ქეშის მოთხოვნით ამას ეფექტურად მიაღწევს. სამწუხაროდ, ქეშირების სათაურების დაყენება უნდა მოხდეს სერვერზე. კარგად გამოიყენეთ ორი ინსტრუმენტი, რომელიც ნაჩვენებია ეკრანის სურათებში, ისინი უზრუნველყოფენ თქვენი ცვლილებების შედეგების გაანალიზების სწრაფ გზას.

ქეშის გაწმენდა

დიზაინერებს ხშირად არ მოსწონთ ქეშირება მომავალი ცვლილებების პრობლემების შიშით. ამ პრობლემის გადასაჭრელად კარგი გზა მოიცავს ტეგების ჩართვას ფაილის სახელით. სამწუხაროდ, კოდში აღწერილი სქემა, რომელიც თან ახლავს ამ ნაბიჯს, ყველგან არ მუშაობს, რადგან ზოგიერთი პროქსი უარს ამბობს ფაილების ქეშირებაზე „დინამიური“ ბილიკებით.

<ბმული rel="სტილის ფურცელი" href="style.css?v=1.2.3">

 

ნუ დაივიწყებთ საფუძვლებს

CSS ოპტიმიზაცია ოპტიმიზაციის მცდელობის მხოლოდ ნაწილია. თუ თქვენი სერვერი არ იყენებს HTTP/2 და gzip შეკუმშვას, ბევრი დრო იკარგება მონაცემთა გადაცემისას. საბედნიეროდ, ამ ორი პრობლემის გადაჭრა საკმაოდ მარტივია. ჩემი მაგალითი გვიჩვენებს რამდენიმე პარამეტრს ფართოდ გამოყენებული Apache სერვერისთვის .htaccess ფაილის გამოყენებით. თუ აღმოჩნდებით სხვა სისტემაში, უბრალოდ მიმართეთ სერვერის დოკუმენტაციას.

pico /etc/httpd/conf/httpd.conf AddOutputFilterByType DEFLATE ტექსტი/html AddOutputFilterByType DEFLATE ტექსტი/css

მოხარული ვიქნები, თუ ეს სტატია თქვენთვის სასარგებლო იქნება. ჰოდა, გავაგრძელებ ამ თემაზე ახალი შესაბამისი მასალების დამატებას.

გმადლობთ, რომ კითხულობთ ნიკოლა ტოპს

რამდენად სასარგებლოა პოსტი?

დააწკაპუნეთ სმაილზე შეფასებისთვის!

საშუალო რეიტინგი 4.9 / 5. შეფასებების რაოდენობა: 8

ჯერ არ არის რეიტინგები. ჯერ შეაფასეთ.

ასევე შეიძლება მოგეწონოთ...

1 პასუხი

  1. Илья ამბობს:

    დიდი ხანია ვადევნებ თვალს თქვენს პროექტს. გამოჯანმრთელებას ვუყურებ, ძალიან სასიამოვნოა ცვლილებების უკეთესობისკენ ხილვა. მომწონს შენი დიზაინი და განლაგება. ჩანს ხარისხზე მუშაობ.მადლობა შრომისთვის.

კომენტარის დატოვება

თქვენი ელფოსტის მისამართი გამოქვეყნებული არ იყო. აუცილებელი ველები მონიშნულია *

ჩვიდმეტი + 7 =