როგორ ავაჩქაროთ საიტი, loading ატრიბუტის დახმარებით

ვებგვერდების წონის დიდი ნაწილი, დაახლოებით 80%-ზე მეტი, სურათებზე მოდის. მაგალითად, თუ საიტის კოდი 1 მეგაბაიტია, სურათების ზომა შეიძლება მინიმუმ 5-ჯერ მეტი იყოს.

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

საჭიროება

მარტივი მაგალითი: დავუშვათ, შევედით საყვარელი საიტის მთავარ გვერდზე, სადაც უამრავი სურათია განთავსებული. დიდი შანსია, რომ ამ სურათებიდან მხოლოდ ნაწილი მოხვდეს ჩვენს ეკრანზე (viewport-ში).

თუ საიტზე 10 სურათია, მაგრამ ჩვენი ეკრანიდან ჩანს მხოლოდ 3, დანარჩენი 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
• lazy

eager-ის შემთხვევაში, საიტზე ყველა ფოტო აუცილებლად ერთდროულად იწყებს ჩამოტვირთვას. ეს img თეგის ე.წ. "default" მნიშვნელობაა

დამატებითი რესურსები

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

*viewport - საიტის ხილული ნაწილი ბრაუზერის ფანჯარაში