Web sayt yüklənmə sürətinin ciddi artırılması üsulları

Bir çoxlarımız veb sayt hazırlayarkən standart mexanizmlərdən, qaydalardan istifadə edib saytı ərsəyə gətiririk. Amma performans haqda müşahidələrimə görə az adam düşünür. Əslində sadə metodları demək olar çox developer bilir və istifadə edir (şəkillərin həcminin çox olmamasına nəzarət, flash-dan az istifadə, bir səhifədə ağır sql sorğuların çox olmaması və.s.) Amma bəzi metodlar da var ki, onlar server səviyyəsində aparılır və effekti daha çoxdur. İndi onların əsas vacib olanları ilə tanış olaq.

Öncə bir faydalı alət haqda yazım, Google-un Make Web Faster şüarı altında təqdim etdiyi çox faydalı xidməti var. Hansı ki, saytın sürət performansını ölçərək 100 ballıq dərəcə üzrə qiymətləndirir. Mən bu yaxında bir saytda sürət performansını artırmalı idim. Yazacağım sadə addımlarla saytın sürətini 55-dən 95 bala yüksəltdim. 

1. İlk öncə hədəf veb saytı qiymətləndirək. Buradan saytın url-ni daxil edərək nəticəni alaq: https://developers.google.com/speed/pagespeed/insights
2. Fayl tiplərinə görə faylları serverdən sıxılmış formada ötürülməsini təmin etmək. Bu metod əsas 3 önəmli metoddan birincisidir. Bunun üçün saytda root folderdə .htaccess faylına daxil olun, yoxdursa yaradın, və aşağıdakıları əlavə edin:

   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/xml
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE application/xml
   AddOutputFilterByType DEFLATE application/xhtml+xml
   AddOutputFilterByType DEFLATE application/rss+xml
   AddOutputFilterByType DEFLATE application/javascript
   AddOutputFilterByType DEFLATE application/x-javascript
   

3. Brauzerin sizin saytınızın statik fayllarını daha yaxşı və uzun müddət saxlaması üçün bütün fayl tiplərinə expire date təyin edin. Yenə də server-apache səviyyədə. Yenə də .htaccess-i açın, bunları yazın:

   <IfModule mod_expires.c>
   ExpiresActive on
   ExpiresByType image/gif "access plus 1 month"
   ExpiresByType image/png "access plus 1 month"
   ExpiresByType image/jpg "access plus 1 month"
   ExpiresByType image/jpeg "access plus 1 month"
   ExpiresByType text/x-component "access plus 1 month"
   # Webfonts
   ExpiresByType font/truetype "access plus 1 month"
   ExpiresByType font/opentype "access plus 1 month"
   ExpiresByType application/x-font-woff "access plus 1 month"
   ExpiresByType image/svg+xml "access plus 1 month"
   ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
   # CSS and JavaScript
   ExpiresByType text/css "access plus 1 year"
   ExpiresByType application/javascript "access plus 1 year"
   ExpiresByType text/javascript "access plus 1 year"
   <IfModule mod_headers.c>
   Header append Cache-Control "public"
   </IfModule>
   </IfModule>
   

   Bu metod heç də bütün serverlərdə işləməyə bilər. Əgər hosting shared-dirsə o halda bu hostinq provider-dən asılıdır. Əgər server virtual dedicated və ya real serverdirsə o halda bu metodun işləməsini Apache modulları bölməsində EXPİRES adlı modulu aktiv etməklə təmin edə bilərsiniz. (Bəlkə də artıq aktivdir, amma yoxlamaqda fayda var)

4. Nəhayət 3-cü metod. Bu metod server yox, browser tərədə olan CSS-ə tətbiq edilir. CSS sprite texnologiyası vasitəsilə saytınızdakı əksər statik şəkilləri(arxa fon, düymə, kiçik ikonlar və.s.) bir şəkildə birləşdirib sprite ilə onu əvvəlki görünüşdə olmaqla daha yüksək sürətlə yüklənməsini təmin etmək. Çoxsaylı kiçik kiçik şəkillərin yüklənməsi ilə onların hamısının birləşib bir şəkil kimi yüklənməsi arasında önəmli sürət fərqi var. Bu metod üçün çox yaxşı bir xidmət var. http://spriteme.org/ bu sayta daxil olub İnstallation bölməsindəki linki sürüşdürürsünüz brauzerinizin Bookmark bölməsinə. Daha sonra saytınıza daxil olub bu bookmarka klik edirsiniz. Və 1-2 saniyəyə hazır olan nəticə demək olar ki, sizə bir koderin saatlarla əziyyət çəkib edə biləcəyi bir nəticəni verir. Şəkilləri avtomatik yığır birləşdirir, sizə şəkli yükləmək imkanı verir. Daha sonra hətta css fayllarınızıda nəyi nə ilə əvəz etmənizi bir-bir dəqiq şəkildə deyir.

Əsas önəmli metodları təqdim etmiş oldum. Digər az önəmli, sürətə az da olsa təsir edəcək metodlar haqda 1-ci bənddə təqdim etdiyim Google xidmətindən məlumat ala bilərsiniz. Orada xeyli sayda çox və az önəmli məsləhətlər verilir, hər birinin Learn More bölməsi var.

P.S. Bunları etməkdə çətinlik çəkənlər üçün əlavə bir məsləhət. Ən azından CSS və JS fayllarınızın hamısını minify edin, yəni compressor xidmətləri ilə sıxın. Bu da sürətə çox önəmli təsir göstərir. Bu xidmət vasitəsilə CSS və ya JS mətni ora paste edirsiniz, icra düyməsi ilə alınan nəticəni CSS və ya JS faylınızda köhnə mətnlə əvəz edirsiniz.