Hər bir proqramçının tanış olduğu bir an var: "Deploy" etmisən, saytı açırsan və gözləyirsən. Bir saniyə, iki saniyə, dörd saniyə keçir — ekran hələ də ağ. Bu dəfə bir Next.js tətbiqində baş verib. Ofisin sürətli Wi-Fi şəbəkəsində hər şey qüsursuz işləsə də, mobil internetdə saytın açılması təxminən 8 saniyə çəkirmiş. Üstəlik, əsas JavaScript paketi 1,8 meqabayt həcmində idi.
Bəs nə etdilər? Araşdırma göstərdi ki, üç səhv var idi. Birincisi: istifadəçi ev səhifəsinə girən kimi ağır qrafiklər, mürəkkəb admin cədvəlləri və pop-up modallar yüklənirdi — halbuki o sadəcə bir sətir mətn oxumağa gəlmişdi. İkincisi: böyük ölçülü şəkillər kiçik mobil ekranlara tam formatda göndərilirdi. Üçüncüsü: komponentlərdə bir state dəyişikliyi onlarla görünməz alt komponentin yenidən render olunmasına səbəb olurdu.
Həll yolu: Yükü azaltmaq üçün üç addım
Komanda tətbiqi kiçik kod hissələrinə bölərək "lazy loading" tətbiq edib. İndi istifadəçi yalnız hazırda gördüyü ekran üçün lazım olanı yükləyir. Ağır funksiyalar istifadəçi onlarla qarşılıqlı əlaqəyə girənə qədər serverdə qalır. İkinci tədbir: şəkillərin formatı optimallaşdırılıb, kiçik ekranlara uyğunlaşdırılıb. Üçüncü tədbir: lazımsız render dövrləri aradan qaldırılıb.
Nəticələr: Rəqəmlər danışır
İlkin JavaScript paketinin həcmi 1,85 meqabaytdan 980 kilobayta düşüb — 47% azalma. İlk mənalı render vaxtı 4,2 saniyədən 2,1 saniyəyə enib. Sayt hər klikdə "ani" hissi yaradır. Komanda üç dərs çıxarıb: layihənin ilk günlərindən yavaş əlaqədə test edin, kod yalnız lazım olduqda yüklənsin, şəkillər isə demək olar ki, həmişənin ən ağır yüküdür. Onları optimallaşdırmaq ən sürətli qələbə yoludur.
Xülasə: Sürətli veb saytlar sehrlə deyil, şəbəkə üzərindən nə göndərmədiyinizi bilməklə qurulur.
Mənbə: Dev.to (https://dev.to/frontend_craft/the-day-our-web-app-took-8-seconds-to-load-and-how-we-cut-it-in-half-504c)
