რა არის რესურსის მინიშნებები, როგორიცაა preload, prefetch და preconnect?

Question

Accepted Answer

**რესურსის მინიშნებები** არის `` ტეგები, რომლებიც ბრაუზერს ეუბნება რესურსების ადრეულად ჩამოცემა ან დაკავშირება, რითაც ოპტიმიზირებს ჩატვირთვის წარმადობას. თითოეული ემსახურება სხვადსხვა დროის/უდიდესობის საჭიროებას. ```html ``` ## რას აკეთებს თითოეული - **`preload`** — "მე ეს **მიმდინარე გვერდის** აქვს, აკრიფე ახლა მაღალი უდიდესობით." კრიტიკული რესურსებისთვის, რომელსაც პარსერი გვიან აღმოაჩენს: შრიფტები, hero სურათები, CSS-ით ნიშნული აქტივები. საჭიროებს `as`-ს, რათა ბრაუზერმა დააყენოს სწორი უდიდესობა/თავსართები. - **`preconnect`** — "მე დაკავშირდებ ამ **წყაროსთან** მალე; DNS ძებნა + TCP + TLS ხელშეკრულება ახლა გააკეთე." დაზოგავს ხელს-ხელთან მეორე მხარის პირველი მოთხოვნამდე (API, შრიფტის ჰოსტი, CDN). გამოიყენე რამდენიმე კრიტიკული წყაროსთვის. - **`dns-prefetch`** — preconnect-ის მსუბუქი ვერსია: მხოლოდ DNS გარჩევა. კარგი სარეზერვო / ბევრი წყაროსთვის. - **`prefetch`** — "მე ეს **ალბათ** დამჭირდება **შემდეგი** ნავიგაციისთვის; აკრიფე დაბალი უდიდესობით, როდესაც ჩალატია." სავარაუდო ახალი გვერდებისთვის/აქტივებისთვის. დაცავებულია მომავლისთვის, არა მიმდინარე გვერდისთვის. ## საერთო რეალური მაგალითი: შრიფტები ```html ``` შრიფტები გვიან აღმოაჩენთ (ბრაუზერმა ჯერ CSS უნდა გაანალიზოს), ამიტომ მათი წინასწარი ჩატვირთვა თავიდან აცილებს უხილავი ტექსტის ყოვლად გაკიდებულობას. ## ამაში: ზეშედეგი მინიშნებებით ყველაფრის preload აქცევს დანიშვულებას უსარგებლოდ — იმძევს კრიტიკული რესურსებთან სიგანე-სიმძლავრეზე. გამოიყენე მინიშნება მხოლოდ რამდენიმე ყველაზე მნიშვნელოვანი რესურსისთვის. ## რატომ არის ეს მნიშვნელოვანი რესურსის მინიშნებები კრიტიკული ბილიკიდან ლატენტობას წაშლის: `preconnect` აშორებს მესამე მხარის ხელშეკრულების დაგვიანებას, `preload` აღმოაჩენილ კრიტიკულ აქტივებს აადგილებს (შრიფტები, LCP სურათი), და `prefetch` აკეთებს *შემდეგ* ნავიგაციას მყისიერად. ზომიერი გამოყენებით, მნიშვნელოვნად უმჯობესებს Core Web Vitals-ს.