გამოიწერე YouTube-ის არხიyoutube logoგამოწერა
როგორ ავაჩქაროთ საიტი, loading ატრიბუტის დახმარებით

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

როგორც წესი ვებგვერდების წონის 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 - საიტის ხილული ნაწილი ბრაუზერის ფანჯარაში

კურსები პროგრამირების შესახებ

HTML, CSS-ის სა...

HTML, CSS-ის საწყისი კურსი, დამწყებთათვის (deprecated - მოძველებული)

ჯავასკრიპტის (J...

ჯავასკრიპტის (Javascript) უფასო კურსი დამწყებთათვის

JavaScript-ის D...

JavaScript-ის DOM-ის კურსი დამწყებთათვის

TypeScript-ის კ...

TypeScript-ის კურსი დამწყებთათვის

Angular-ის კურს...

Angular-ის კურსი დამწყებთათვის

ეთიკური ჰაკინგი...

ეთიკური ჰაკინგის კურსი

HTML, CSS-ის კუ...

HTML, CSS-ის კურსი დამწყებთათვის

Reactjs-ის კურს...

Reactjs-ის კურსი დამწყებთათვის

ალგორითმები...

ალგორითმები

Node.js-ის უფას...

Node.js-ის უფასო კურსი დამწყებთათვის

Dart-ის კურსი დ...

Dart-ის კურსი დამწყებთათვის

უახლესი ბლოგები პროგრამირებაზე

Nginx-ის ინსტალ...

Nginx-ის ინსტალაცია Macintosh-ზე

ინგლისური ენის ...

ინგლისური ენის მნიშვნელობა პროგრამირების სამყაროში

როგორ ავაჩქაროთ...

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

nginx-ის კონფიგ...

nginx-ის კონფიგურაცია (ჩემი ჩანაწერები)