Sıfırdan Saytın Sürətləndirilməsi Bələdçisi: Google PageSpeed Insights Skorunu 100-ə Çatdırın

Müasir rəqəmsal dünyada istifadəçilərin səbri hər saniyə daha da azalır. Google-un araşdırmalarına görə, mobil cihazlarda yüklənmə müddəti 1 saniyədən 3 saniyəyə qalxdıqda, istifadəçinin saytı tərk etmə ehtimalı (bounce rate) 32% artır. Əgər bu müddət 5 saniyəyə çatarsa, imtina dərəcəsi 90%-ə qədər yüksəlir. Veb saytınızın sürəti təkcə istifadəçi təcrübəsinə (UX) deyil, həm də Google axtarış nəticələrindəki mövqeyinizə (SEO) birbaşa təsir edir.

Bu bələdçidə heç bir ödənişli alət istifadə etmədən, saytınızın kod və infrastruktur səviyyəsində necə optimallaşdırılacağını və Google PageSpeed Insights platformasında yaşıl zonaya (90-100 xal) necə keçəcəyinizi addım-addım öyrənəcəksiniz.

"Sürət sadəcə bir xüsusiyyət deyil, məhsulun özüdür. Sürətli sayt istifadəçiyə hörmətin ilk göstəricisidir."

---

Core Web Vitals Nədir və Niyə Vacibdir?#

Google 2021-ci ildən etibarən sayt sürətini ölçmək üçün "Core Web Vitals" (Əsas Veb Göstəriciləri) adlı metrikalar sistemini tətbiq edir. PageSpeed Insights skorunuzu 100-ə çatdırmaq üçün ilk növbədə bu üç əsas metrikanı anlamalı və optimallaşdırmalısınız:

1. LCP (Largest Contentful Paint - Ən Böyük Məzmunlu Boyama): Səhifənin əsas vizual elementinin (məsələn, böyük bir banner şəkli və ya başlıq mətni) ekranda görünmə sürətidir. İdeal müddət 2.5 saniyədən az olmalıdır.
2. INP (Interaction to Next Paint - Növbəti Boyama ilə Qarşılıqlı Əlaqə): İstifadəçinin saytda hər hansı bir düyməyə kliklədikdən sonra brauzerin vizual cavab vermə müddətidir. İdeal müddət 200 millisaniyədən az olmalıdır.
3. CLS (Cumulative Layout Shift - Kumulyativ Maket Sürüşməsi): Səhifə yüklənərkən elementlərin gözlənilmədən yerini dəyişməsidir (məsələn, şəkil gec yükləndiyi üçün mətnin aşağı sürüşməsi). İdeal göstərici 0.1-dən aşağı olmalıdır.

---

Şəkillərin Peşəkar Səviyyədə Optimizasiyası#

Saytların gec yüklənməsinin 80% səbəbi optimallaşdırılmamış, böyük həcmli şəkillərdir. Şəkilləri düzgün idarə etmək üçün aşağıdakı qaydalara əməl edin:

1. Müasir Şəkil Formatlarına Keçid (WebP və AVIF)

PNG və JPEG formatları artıq köhnəlmiş hesab olunur. WebP formatı PNG ilə müqayisədə 26% daha kiçik ölçüyə malikdir. AVIF isə daha yüksək sıxılma təmin edir.

2. Ölçülərin Təyin Edilməsi (Width və Height)

Şəkillərə mütləq en (width) və hündürlük (height) atributları verilməlidir. Əks halda brauzer şəklin ölçüsünü əvvəlcədən hesablaya bilmir və bu CLS xətasına yol açır.

<!-- Yanlış istifadə -->
<img src="banner.jpg" alt="Məhsul">

<!-- Doğru istifadə -->
<img src="banner.webp" width="800" height="450" alt="Məhsul" loading="lazy">

3. Lazy Loading (Tənbəl Yükləmə)

Ekranın görünməyən hissəsində (below the fold) qalan şəkillərin yalnız istifadəçi aşağı düşdükdə yüklənməsini təmin edin. Lakin ekranın ilk görünən hissəsindəki (above the fold) əsas şəkillərə loading="lazy" tətbiq etməyin, çünki bu LCP göstəricisini pisləşdirir.

---

Kod Strukturunun Optimizasiyası: CSS və JavaScript#

Brauzer HTML kodunu oxuyarkən xarici CSS və JS faylları ilə qarşılaşdıqda yüklənməni dayandırır və həmin faylları yükləməyə başlayır. Buna "Render-blocking" (Renderi bloklayan resurslar) deyilir.

CSS Optimizasiyası

• Kritik CSS (Critical CSS): Səhifənin ilk görünən hissəsi üçün lazım olan CSS kodlarını birbaşa HTML daxilində <style> teqi içində yazın. Qalan böyük CSS faylını isə asinxron yükləyin.
• İstifadə olunmayan CSS-lərin təmizlənməsi: Bootstrap və ya Tailwind kimi çərçivələrdən istifadə edirsinizsə, saytda işlənməyən kodları təmizləmək üçün PurgeCSS alətindən istifadə edin.

JavaScript Optimizasiyası

JavaScript fayllarını yükləyərkən mütləq defer və ya async atributlarından istifadə edin:

---

Server Səviyyəsində Sürətləndirmə Strategiyaları#

Kodlarınızı nə qədər optimallaşdırsanız da, əgər serveriniz zəifdirsə, yüksək sürət əldə etmək qeyri-mümkündür. Server tərəfində mütləq bu 3 addımı atın:

1. Gzip və ya Brotli Sıxılmasını Aktiv Edin

Brotli, Google tərəfindən hazırlanmış və Gzip-ə nisbətən 20% daha yaxşı sıxılma təmin edən bir texnologiyadır. Serverinizdə Brotli sıxılmasını aktiv etməklə HTML, CSS və JS fayllarınızın ölçüsünü kəskin azalda bilərsiniz.

2. Brauzer Keşlənməsi (Browser Caching)

Statik resursların (şəkillər, şriftlər, CSS) istifadəçinin brauzerində yadda saxlanmasını təmin edin. Bunun üçün .htaccess və ya Nginx konfiqurasiya faylında uyğun başlıqları (headers) təyin edin.

3. CDN (Content Delivery Network) İstifadəsi

Saytınızın fayllarını qlobal server şəbəkələrində (məsələn, Cloudflare) saxlayaraq, istifadəçiyə ən yaxın coğrafi nöqtədən çatdırılmasını təmin edin.

---

Praktiki Tətbiq Planı: Nginx Serveri üçün Sürətləndirmə Skripti#

Əgər öz serverinizi (VPS) idarə edirsinizsə, aşağıdakı Nginx konfiqurasiya blokunu serverinizə əlavə edərək keşləmə və sıxılmanı dərhal aktiv edə bilərsiniz:

# Gzip sıxılmasını aktiv et
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml application/json application/javascript application/xml+rss application/atom+xml image/svg+xml;

# Statik fayllar üçün uzunmüddətli brauzer keşlənməsi
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|webp|woff|woff2|ttf|otf)$ {
    expires 1y;
    add_header Cache-Control "public, no-transform";
    access_log off;
}

---

Nəticə və Növbəti Addımlar#

Saytın sürətləndirilməsi birdəfəlik bir iş deyil, davamlı bir prosesdir. Hər yeni məzmun və ya funksionallıq əlavə edildikdə sürət göstəriciləri dəyişə bilər. Uğurlu nəticə üçün bu addımları izləyin:

• Saytınızı hər həftə pulsuz Google PageSpeed Insights və GTmetrix alətləri ilə test edin.
• Şəkilləri sayta yükləməzdən əvvəl mütləq sıxın və ölçülərini optimallaşdırın.
• Lazımsız WordPress plaginlərini və ya üçüncü tərəf skriptlərini saytdan uzaqlaşdırın.

Bu texniki addımları tətbiq etdikdən sonra saytınızın yüklənmə sürətinin kəskin artdığını, istifadəçilərin saytda qalma müddətinin uzandığını və axtarış motorlarında mövqeyinizin yüksəldiyini müşahidə edəcəksiniz.