CSS-ის ოპტიმიზაცია საიტის სიჩქარისთვის - 9 გზა

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

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

ვებსაიტის css ოპტიმიზაცია.

ნელი საიტი ყოველთვის ცუდია! მგონი ფრაზა CSS კოდის ოპტიმიზაცია საიტის დასაჩქარებლად, ხშირად გვხვდება ძებნაშიც 301 გადამისამართება ან robots.txt. ან იქნებ თქვენ ხართ დეველოპერი, რომელიც აგზავნის ვებსაიტებს ოპტიმალურ შესრულებაზე ზრუნვის გარეშე?

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

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

როგორ მოვახდინოთ CSS კოდის ოპტიმიზაცია საიტის უფრო სწრაფი დატვირთვისთვის.

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

  1. ვებსაიტის ვიზიტორებს არ უყვართ დიდი ხნის ლოდინი გვერდის სრულად ჩატვირთვამდე;
  2. თქვენი კლიენტები აუცილებლად დაბრუნდებიან საიტზე, თუ ის სწრაფად იმუშავებს; უფრო სწრაფი საიტები ყოველთვის უფრო მაღალ ადგილს იკავებს საძიებო სისტემებში;
  3. ასევე საიტის სიჩქარე მატებს თქვენს SEO სტრატეგიას;
ეს რესურსები უბრალოდ გასაოცარია და დიდ შთაბეჭდილებას ახდენს. ახლა რას გააკეთებდით, რომ თქვენი საიტი უფრო სწრაფი გახადოთ? რა თქმა უნდა, ამ სიტუაციის გაუმჯობესება შეიძლება მოითხოვდეს თქვენგან ბევრ ქმედებას.

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

გამოიყენეთ Image Sprites

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

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

CSS ოპტიმიზაცია

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

რა თქმა უნდა, თქვენ არ გჭირდებათ ამის გაკეთება ხელით, რადგან ინტერნეტში არის ავტომატური კომპრესორები. მხოლოდ ასეთი მარტივი ონლაინ ინსტრუმენტების წყალობით არის შესაძლებელი შეკუმშვის განხორციელება რამდენიმე წუთში. აქ არის ერთი ასეთი მინიფიკატორი: http://www.cssminifier.com

შეამცირეთ არასაჭირო კოდი

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

ჩადეთ CSS ცხრილები თავში და JS სკრიპტები ქვედა ძირში

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

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

არ ჩართოთ დიდი მონაცემთა URI-ები

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

არ ჩართოთ CSS ატრიბუტები

CSS ატრიბუტების ჩასმა HTML ელემენტებში (როგორიცაა ) თავიდან უნდა იქნას აცილებული შეძლებისდაგვარად, რადგან ეს ხშირად იწვევს კოდის არასაჭირო დუბლირებას. ასევე, HTML ელემენტებში inline CSS დაბლოკილია კონტენტის უსაფრთხოების პოლიტიკის (CSP) მიერ ნაგულისხმევად.

CSS ფაილების გამოყოფა

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

შეამცირეთ სივრცეების რაოდენობა თქვენს კოდში

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

დააფიქსირეთ თქვენი კოდი

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

მოაწყეთ თქვენი კოდი

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

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

KISS ტექნიკა (Seep it Simple Stupid)

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

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

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

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

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

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

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

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

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

ცხრა + 12 =