PageSpeed Insights alətinin “İstifadə olunmayan CSS-i azaldın” xəbərdarlığı, veb saytınızın lazımsız CSS yüklədiyini göstərir ki, bu da səhifənin sürətini azaldır. Brauzerin yükləməli olduğu, parçaladığı və icra etdiyi daha çox məlumat tələb edərək, istifadə olunmayan CSS performansa mənfi təsir göstərə bilər. Budur, lazımsız CSS-i necə azaltmaq və səhifənizin yüklənmə vaxtını necə yaxşılaşdırmaq olar.
İstifadə Olunmayan CSS Nədir?
İstifadə olunmayan CSS, stil vərəqində olan, lakin cari səhifədə heç bir elementə tətbiq olunmayan CSS qaydalarıdır. Səhifənin vizual görünüşünü və ya funksionallığını yaxşılaşdırmadan bu qaydalar fayllarda yer tutur və yükləmə vaxtını artırır.
İstifadə Olunmayan CSS-i Necə Aşkar Etmək olar
Saytınızın səmərəliliyini artırmaq lazımsız CSS-i müəyyən etməkdən asılıdır. Aşağıda istifadəsiz CSS növləri və onları necə aşkar etmək olar:
- Chrome DevTools – Coverage Sekmesi: Chrome DevTools-un Coverage sekmesi səhifə yüklənərkən həm CSS istifadənizi, həm də istifadə olunmayan qaydaları göstərir. Hansı CSS qaydalarının silinməli olduğunu və hansılarının vacib olduğunu yoxlaya bilərsiniz
- Üçüncü Tərəf Alətləri: Purge CSS, UnCSS və CSS Purge kimi alətlər, veb saytınızın HTML və JavaScript kodlarını analiz edərək lazımsız CSS qaydalarını avtomatik olaraq silir.
- Lighthouse ilə Audit: Google-un Lighthouse aləti, performans auditləri zamanı istifadə olunmayan CSS-i vurğulayır və təkmilləşdirmə üçün aydın istiqamət verir.
İstifadə Olunmayan CSS Növləri
- Qlobal İstifadə Olunmayan CSS: Saytın digər səhifələrində istifadə olunan, lakin müəyyən səhifədə istifadə olunmayan stillər.
- Səhifəyə Xas İstifadə Olunmayan CSS: Bir səhifədə yüklənən, lakin həmin səhifədə heç bir elementə tətbiq olunmayan stillər.
- Framework və ya Kitabxana CSS-i: Çox vaxt Bootstrap kimi xarici mənbələrdən gələn CSS-in istifadə olunmayan, işinizdə heç vaxt istifadə edilməyən qaydaları.
Bu növ istifadəsiz CSS-i aşkar edib silməklə yükləmə vaxtlarını və ümumi sayt performansını yaxşılaşdıra bilərsiniz.
İstifadə Olunmayan CSS Performansı Necə Yavaşladır
İstifadə olunmayan CSS bir neçə şəkildə veb saytınızın performansını əhəmiyyətli dərəcədə azalda bilər:
- Fayl Ölçüsünün Artması: İstifadə olunmayan CSS ilə dolu böyük stil vərəqlərinin yüklənməsi brauzerin yükləməli olduğu məlumatın miqdarını artırır və bununla da yükləmə vaxtlarını uzadır.
- Renderin Yavaşlaması: Brauzer bütün CSS faylını, o cümlədən mənasız qaydaları emal etməli olur ki, bu da vizual məzmunun göstərilməsini gecikdirir.
- Resursların İsrafı: Xüsusilə mobil cihazlarda brauzer istifadə edilməyən CSS qaydalarını işləmək üçün vaxt və yaddaş sərf edir və bu, performansa mənfi təsir göstərir.
İstifadə olunmayan CSS-i azaltmaqla, bu problemləri minimuma endirə bilər, səhifənin yüklənmə vaxtlarını sürətləndirə və daha hamar bir istifadəçi təcrübəsi təmin edə bilərsiniz.
İstifadə Olunmayan CSS-i Necə Azaltmaq olar:
- Chrome DevTools ilə İstifadə Olunmayan CSS-i Aşkar Edin: Chrome DevTools-da Coverage sekmesi, müəyyən bir səhifədə CSS-in faktiki istifadəsini göstərir. Bu, stil vərəqinizdə hansı elementlərin silinə biləcəyini və ya təkmilləşdirilə biləcəyini müəyyən etməyə kömək edir.
- Lazımsız CSS-i Silin: Lazımsız CSS qaydalarını aşkar etdikdən sonra onları stil vərəqindən çıxarın. Qlobal olaraq lazımsız kodu və ya cari səhifədə heç bir yerdə tətbiq olunmayan qaydaları silməyə diqqət yetirin.
- Kritik CSS-i Tətbiq Edin: Görünən məzmun üçün lazım olan CSS, yəni “Critical CSS” birbaşa HTML-ə daxil edilməlidir. Qeyri-vacib CSS isə təxirə salına və ya asinxron şəkildə yüklənə bilər ki, bu da yükləmə sürətini yaxşılaşdırır və səhifənin daha tez render olunmasına imkan verir.
- CSS Kiçiltmə Alətlərindən İstifadə Edin: PurifyCSS, UnCSS və ya PostCSS kimi CSS kiçiltmə alətləri lazımsız CSS qaydalarını avtomatik olaraq tapıb silə bilər. Bu alətlər saytınızı araşdıraraq, məzmununuz tərəfindən izlənilməyən qaydaları CSS fayllarından çıxarır.
- Modular CSS Tətbiq Edin: CSS-i daha kiçik, modulyar fayllara bölməyi düşünün ki, müəyyən səhifələr və ya komponentlər üçün yalnız lazım olan stillər yüklənsin. Bu yanaşma hər səhifə üçün yüklənən CSS-i azaltmaqla səhifə performansını artırır.
Saytınızı sürət və performans üçün optimallaşdırmaq lazımsız CSS-i azaltmaqdan asılıdır. Lazımsız stilləri aşkar edib çıxarmaq və bu prosesi avtomatlaşdırmaq üçün alətlərdən istifadə etmək yükləmə vaxtlarını azaldacaq, istifadəçi təcrübəsini artıracaq və SEO nəticələrinizi yaxşılaşdıracaq. Saytınızın CSS-nin optimal vəziyyətdə olduğunu təmin etmək üçün Lighthouse və ya GTmetrix ilə mütəmadi olaraq auditlər aparın.
Ətraflı məlumat üçün Chrome Developer Guide-a baxın.
