გამოწერაგამოწერა
როგორც წესი ვებგვერდების წონის 80%-ზე მეტს სურათები იკავებენ, მაგალითისთვის თუ ჩვენი საიტის უშუალოდ კოდის ნაწილი ზომაში პირობითად 1 მეგაბაიტია სურათები სულ ცოტა 5-ჯერ მეტი იქნება ზომაში.
როდესაც ვებგვერდი იტვირთება, ჩვენი ბრაუზერი ასევე ავტომატურად ცდილობს ჩამოტვირთოს ყველა ის ფოტო, რომელიც უშუალოდ კონკრეტულ გვერდზეა გამოსახული, მიუხედავად იმისა, არის ის თუ არა ჩვენს viewport*-ში.
წარმოვიდგინოთ მარტივი მაგალითი, ჩავთვალოთ, რომ შევედით ფავორიტი საიტის მთავარ გვერდზე, რომელიც აუცილებლად სავსე იქნება სხვადასხვა ფოტოებით, ამ დროს დიდი შანსია საიტზე არსებული ყველა ფოტო არც კი მოხვდეს ჩვენს viewport-ში.
თუ საიტზე ჯამში გვქონდა 10 ფოტო, რომელთაგანაც მხოლოდ 3 მოხვდა ჩვენს viewport-ში გამოდის, რომ დანარჩენი 7 ფოტო ტყუილად ჩაიტვირთება, რაც გამოიწვევს ჩატვირთვის სიჩქარის შემცირებას, ასევე მოხდება სერვერთან დამატებითი 7 მოთხოვნის გაგზავნა, რომელსაც არც კი გამოვიყენებთ
რამდენიმე წლის უკან მსგავს პრობელმას ჯავასკრიპტით ვუმკლავდებოდით შესაბამისი ბიბლიოთეკების დახმარებით, კონკრეტულად კი, როდესაც მომხმარებელი საიტს ჩატვირთავდა მხოლოდ viewport-ში არსებული ფოტო უჩანდა მომხმარებელს, ხოლო როდესაც სქროლვას იწყებდა, ფოტოებისკენ, რომლებიც viewport-ში არ იყვნენ შემდეგ ვაგზავნიდით მოთხოვნას სერვერთან მათ ჩამოსატვირთად.
საბედნიეროდ თანამედროვე ბრაუზერებმა უკვე დაამატეს მოცემული ფუნცქია loading ატრიბუტის დახმარებით HTML-ში, შესაბამისად არანაირი ჯავასკიპტ ბიბლიოთეკის გამოყენება აღარაა საჭირო.
მაგალითი:
<img src="img.1" loading="lazy">
<img src="img.2" loading="lazy">
<img src="img.3" loading="lazy">
<img src="img.4" loading="lazy">
<img src="img.5" loading="lazy">
<img src="img.6" loading="lazy">loading ატრიბუტი ავტომატურად ხვდება არის თუ არა ჩვენი ფოტო viewport-ში, ან მასთან ახლოს და ამის მიხედვით იგზავნება სერვერზე მოთხოვნა ფოტოს ჩამოტვირთვასთან დაკავშირებით.
იმისთვის რომ loading="lazy" ატრიბუტმა ისე იმუშაოს, როგორც ზემოთ ავღნიშნეთ ასევე CSS-ით ჩარევაცაა საჭირო ჩვენს კოდში. კონკრეტულად კი img თეგს, რომელსაც loading="lazy" ატრიბუტი აქვს აუცილებელია ქონდეს წინასწარ განსაზღვრული სიმაღლე ან height თვისებით, ან aspect-ratio-თი
img {
height: 300px;
/* ან */
aspect-ratio: 16 / 9;
}მოცემულ ატრიბუტს აქვს ორი მნიშნველობა ესენია:
eager-ის შემთხვევაში, საიტზე ყველა ფოტო აუცილებლად ერთდროულად იწყებს ჩამოტვირთვას. ეს img თეგის ე.წ. "default" მნიშვნელობაა
მოცემულ თემასთან დაკავშირებით ასევე მაქვს გადაღებული ვიდეო გაკევეთილი, რომლის დახმარებითაც მეტად შეძლებთ აღნიშნული ბლოგის გააზრებას, ვიდეო შეგიძლიათ იხილოთ ამ ბმულზე
*viewport - საიტის ხილული ნაწილი ბრაუზერის ფანჯარაში
