JavaScript icra müddətinin azaldılması, ilkin səhifə yüklənməsi zamanı brauzerin əsas axınını bloklayan uzunmüddətli skriptlərin müəyyən edilməsini və optimallaşdırılmasını əhatə edir. Əsas axın ağır JavaScript tapşırıqları ilə məşğul olduqda, o, istifadəçi qarşılıqlı əlaqələrini emal edə bilmir və bu da ləng bir təcrübəyə səbəb olur. Tərtibatçılar skript təsirini yoxlamaq, böyük tapşırıqları parçalamaq və qeyri-vacib kodu təxirə salmaqla bunu idarə edə bilərlər. Skript çatdırılmasına yanaşmanızı təkmilləşdirərək, istifadəçiyə kritik məzmunu göstərərkən brauzerin cavabdeh qalmasını təmin edirsiniz.
JavaScript dar boğazlarını necə müəyyən edirsiniz?
Optimallaşdırmaya doğru ilk addım saytınızda əslində nəyin işlədiyinə dair aydın görünürlük əldə etməkdir. Google Chrome DevTools, əsas axını bloklayan uzunmüddətli skriptləri müəyyən etmək üçün Performans paneli təqdim edir. Səhifə yüklənməsini qeyd etməklə, hər bir funksiya çağırışının dəqiq müddətini göstərən alov diaqramını vizuallaşdıra bilərsiniz. Bu alət ilkin render üçün lazım olan skriptlərlə sonradan təhlükəsiz şəkildə yüklənə bilənləri ayırd etmək üçün vacibdir. Alov diaqramında uzun çubuqlar axtarmalısınız, çünki bunlar əhəmiyyətli emal gücü sərf edən skriptləri göstərir. Diqqətinizi kritik yolda icra olunan skriptlərə yönəldin, çünki bunlar yavaş qarşılıqlı əlaqə hazırlığının əsas günahkarlarıdır. Tipik bir hesabda, üçüncü tərəf izləmə piksellərinin və ya ağır kitabxanaların sinxron şəkildə yükləndiyini görə bilərsiniz ki, bu da brauzeri həmin tapşırıqlar tamamlanana qədər digər bütün irəliləyişləri dayandırmağa məcbur edir. Bu ağır skriptləri müəyyən etdikdən sonra onları saytın interaktivliyinə təsirinə görə kateqoriyalara ayıra bilərsiniz.
Bir çox tərtibatçı bütün funksionallıqlarını səhifə həyat dövrünün lap əvvəlində yükləməyə çalışarkən problemlərlə qarşılaşır. Bu strategiya çox vaxt bütün xüsusiyyətlərin hazır olması arzusu ilə idarə olunur, lakin istifadəçinin aparatının fiziki məhdudiyyətlərini nəzərə almır. Xüsusilə mobil cihazlar, prosessorları masaüstü prosessorlar qədər güclü olmadığı üçün böyük JavaScript icra blokları ilə mübarizə aparır. Performans izini qeyd edərkən ‘Uzun Tapşırıqlar’ axtarın—bunlar əsas axını 50 millisaniyədən çox məşğul edən tapşırıqlar kimi müəyyən edilir. Bu tapşırıqları daha kiçik, asinxron vahidlərə bölməklə, siz brauzerə klikləri və ya sürüşdürməni idarə etmək kimi digər vacib işləri yerinə yetirmək üçün imkanlar verirsiniz. Bu sadə dəyişiklik, icra olunan kodun ümumi miqdarı eyni qalsa belə, saytı əhəmiyyətli dərəcədə daha sürətli hiss etdirə bilər. Həmişə səhifənin görünən hissəsi üçün tələb olunan koda üstünlük verin.
Böyük JavaScript niyə istifadəçi təcrübəsinə təsir edir?
Böyük JavaScript paketləri saytın interaktiv olması üçün lazım olan vaxtı birbaşa artırır. Saytınız istifadəçinin düyməni klikləməsi və ya mətn daxil etməsi üçün böyük bir kitabxananın işə salınmasını tələb edirsə, istifadəçi səhifənin görünən, lakin cavabsız olduğu bir məyusluq dövrü yaşayacaq. İlk Məzmunlu Boya (First Contentful Paint) ilə İnteraktivliyə qədər olan vaxt (Time to Interactive) arasındakı bu boşluq çox vaxt ziyarətçilərin saytı tərk etmək qərarına gəldiyi yerdir. Axtarış motorları və brauzerlər bu göstəriciləri yaxından izləyir və zəif performans balı saytın qəbul edilən keyfiyyətinə mənfi təsir göstərə bilər. Texniki göstəricilərdən kənarda, bu gecikmə psixoloji maneə yaradır. İstifadəçilər ani məmnuniyyət gözləyirlər; sayt onların girişinə reaksiya vermədikdə, onun xarab olduğunu və ya pis saxlanıldığını düşünürlər. Buna görə də, icra müddətini optimallaşdırmaq yalnız sürət testlərindən keçmək deyil, həm də ardıcıl, etibarlı qarşılıqlı əlaqə vasitəsilə auditoriyanızla etibar yaratmaqdır.
Kodun bölünməsi saytın performansını necə yaxşılaşdıra bilər?
Kodun bölünməsi (Code splitting), JavaScript paketinizi daha kiçik, idarə oluna bilən hissələrə bölməyə imkan verən güclü bir texnikadır. Bütün veb sayt üçün hər bir funksiyanı ehtiva edən tək, monolit bir fayla xidmət etmək əvəzinə, yalnız cari səhifə üçün lazım olan kodu göndərirsiniz. İstifadəçi ana səhifədədirsə, istifadəçi paneli və ya ödəniş axını üçün lazım olan mürəkkəb məntiqə ehtiyacı yoxdur. Dinamik idxaldan istifadə edərək, bu əlavə faylları yalnız istifadəçi xüsusi elementlərlə qarşılıqlı əlaqədə olduqda yükləyə bilərsiniz. Bu yanaşma ilkin icra müddətini kəskin şəkildə azaldır, çünki brauzerin ilkin sorğu zamanı təhlil etmək və icra etmək üçün daha az kodu olur. Məsələn, ev əşyaları satan bir Shopify mağazası, şəkil qalereyası skriptlərini yalnız istifadəçi aşağı sürüşdürdükdən və ya ‘daha çox bax’ düyməsini kliklədikdən sonra yükləyə bilər. Bu arxitekturanın tətbiqi diqqətli planlaşdırma tələb edir, lakin şəbəkə bağlantısından və ya cihaz gücündən asılı olmayaraq bütün istifadəçilərə fayda verən daha yüngül ilkin yük ilə nəticələnir.
Skript optimallaşdırılması üçün praktiki strategiyalar
Kodun bölünməsindən əlavə, icra yükünü azaltmaq üçün mövcud kod bazanızda edə biləcəyiniz bir neçə taktiki düzəliş var. Üçüncü tərəf asılılıqlarınızı nəzərdən keçirməklə başlayın, çünki bunlar çox vaxt heç vaxt istifadə etməyəcəyiniz lazımsız xüsusiyyətlərlə doludur. Böyük bir kitabxanadan yalnız kiçik bir yardımçı funksiyaya ehtiyacınız varsa, xüsusi bir həll yazmağı və ya daha yüngül bir alternativdən istifadə etməyi düşünün. Bundan əlavə, qurma prosesinizin son funksionallığa töhfə verməyən ölü kodu çıxarmaq üçün minifikasiya və ağac silkələməni (tree-shaking) əhatə etdiyinə əmin olun. Bu avtomatlaşdırılmış proseslər brauzerin fayllarınızla qarşılaşdıqda görməli olduğu iş miqdarını əhəmiyyətli dərəcədə azalda bilər. Skript teqlərinizin yükləmə atributlarını yoxlamaq da müdrikdir. ‘async’ və ya ‘defer’ istifadə etmək, brauzerin skriptlərinizi gətirərkən və icra edərkən HTML təhlilçisini bloklamamasını təmin edir və səhifənin daha hamar render olunmasına imkan verir.
- Üçüncü tərəf skriptlərini yoxlayın və istifadəçi üçün az dəyər verənləri silin.
- Cari görünüş üçün yalnız lazımi məntiqi çatdırmaq üçün kodun bölünməsini tətbiq edin.
- Renderi bloklamamaq üçün bütün kritik olmayan skript teqlərində ‘defer’ və ya ‘async’ atributlarından istifadə edin.
- Qurma prosesi zamanı lazımsız boşluqları və şərhləri silmək üçün JavaScript paketlərinizi minifikasiya edin.
- Layihə asılılıqlarınızdan istifadə olunmamış ixracları aradan qaldırmaq üçün ağac silkələməni (tree-shaking) tətbiq edin.
- Əsas axını azad saxlamaq üçün uzunmüddətli tapşırıqları daha kiçik, dişlək ölçülü icralara bölün.
- Səhifənizi hansı funksiyaların yavaşlatdığını dəqiq müəyyən etmək üçün Chrome DevTools-da Performans panelindən istifadə edin.
Üçüncü tərəf kitabxanalarının təsirini necə minimuma endirmək olar?
Üçüncü tərəf skriptləri çox vaxt JavaScript icra müddətinin əhəmiyyətli mənbəyidir, çünki onlar tez-tez xarici domenlərdən yüklənir və sizin xüsusi saytınız üçün optimallaşdırılmaya bilər. Bunları idarə etmək üçün mümkün olduqda onları yerli olaraq yerləşdirməyi və ya effektiv şəkildə keşləmək üçün xidmət işçisindən (service worker) istifadə etməyi düşünün. Əgər onları CDN-dən yükləməlisinizsə, əlaqəni erkən həll etmək və gecikmə təsirini azaltmaq üçün ‘preconnect’ və ya ‘dns-prefetch’ resurs göstərişlərindən istifadə edin. Bununla belə, ən effektiv strategiya güvəndiyiniz xarici xidmətlərin sayını məhdudlaşdırmaqdır. Hər bir izləmə pikseli, marketinq aləti və çat vidceti əsas axına ağırlıq əlavə edir. Yeni bir xüsusiyyət əlavə etməzdən əvvəl, onun performans xərclərindən üstün bir dəyər verib-vermədiyini soruşun. Ümumi bir nümunə, bu ağır alətləri tənbəl yükləməkdir (lazy-load), onların yalnız istifadəçi qarşılıqlı əlaqəyə başladıqdan sonra işə düşməsini təmin etməkdir. Bu, ilkin yükü yüngül saxlayarkən, ehtiyacı olanlar üçün xüsusiyyətləri əlçatan edir.
Saytınızın performans auditi üçün yoxlama siyahısı
- Mobil məhdudiyyətli bağlantıda Chrome DevTools Performans panelini işə salın.
- 50ms-dən çox icra müddəti olan tapşırıqlar üçün alov diaqramını təhlil edin.
- Paket konfiqurasiyanızdakı dublikat və ya artıq kitabxana idxallarını müəyyən edin və silin.
- JavaScript fayllarınızın ölçüsünü kiçiltmək üçün serverinizdə Gzip və ya Brotli sıxılmasını aktivləşdirin.
- Kritik olmayan skriptlərin ilkin brauzer renderini bloklamadığını yoxlayın.
- Yükləmə zamanı kodunuzun nə qədərinin istifadə olunmadığını görmək üçün saytınızın JavaScript əhatə dairəsini nəzərdən keçirin.
- İcra müddətinin istifadəçi təcrübəsinə necə təsir etdiyini müşahidə etmək üçün saytınızı müxtəlif şəbəkə sürətlərində sınaqdan keçirin.
Bu həftə haradan başlamaq lazımdır
Veb saytınızı Chrome-da açmaqla və DevTools Performans panelindən istifadə edərək performans izini qeyd etməklə başlayın. Tapşırıqlar bölməsindəki uzun qırmızı çubuqları xüsusilə axtarın, çünki bunlar təkmilləşdirmə üçün ən dərhal imkanları təmsil edir. İcrası çox vaxt aparan tək, yüksək təsirli bir skript seçin və onu təxirə salınmış yükləmə modelinə keçirməyə və ya onun məntiqini daha kiçik hissələrə bölməyə çalışın. Hər dəfə bir optimallaşdırmaya diqqət yetirməklə, iş axınınızı yükləmədən saytınızın cavabdehliyindəki yaxşılaşmanı kəmiyyətcə qiymətləndirə bilərsiniz. Alien Road, bu kiçik dəyişikliklərin zaman keçdikcə ümumi sayt sürətinizə necə təsir etdiyini izləmək üçün bir jurnal saxlamağı təklif edir. Performansı idarə edərkən ardıcıllıq əsasdır; müntəzəm auditlər texniki borcun yığılmasının qarşısını alacaq. Bu icra dar boğazlarını bu gün həll etməklə, saytınıza gələn hər bir ziyarətçi üçün daha sürətli, daha etibarlı təcrübə üçün zəmin yaradırsınız.
Oxumağa davam edin: Veb Dizayn və İnkişaf · Veb Dizayn