fbpx

Cum ți se încarcă site-ul? 8 pași rapizi pentru optimizarea vitezei de încărcare.

hourglass-1875812_1280

În ultima perioadă am lucrat la setări suplimentare pentru a mări viteza website-urilor pe care le construim și venim cu vești bune: da, se poate și mai bine și da, se poate încărca un site în mai puțin de o secundă la first byte.

Știți și voi cât de mult contează să nu aștepți zeci de secunde ca o pagină web să se deschidă și sunteți conștienți că cititorii de obicei nu au răbdare și abandonează căutarea dacă nu s-a încărcat în timpul dorit. E situația cea mai des întâlnită prin care poți pierde un eventual client.

Dăm vina de multe ori pe viteza de internet, pe hostingul pe care îl avem sau platforma pe care e construit site-ul însă ce spuneți dacă rezolvarea e mai simplă de atât?

În continuare va lăsăm câteva sfaturi și va încurajăm să testați și voi pentru a vedea cât de repede vi se poate încarcă site-ul urmând câțiva pași simpli:

Pasul 1Adaugă site-ul în cele 2 tool-uri de verificare viteză dar și de primire sugestii pentru ce se poate îmbunătăți:  

https://developers.google.com/speed/pagespeed/insights/

https://www.webpagetest.org/  

P.s. Notează-ți recomandările lor și ține cont de ele!

Pasul 2.  Activarea sistemului de cache e obligatorie.

Dacă vorbim despre Prestashop sau Magento, verifică setările de cache care pot fi găsite în setările din panoul de administrare. Pentru WordPress îți recomandăm să foloseșți modulul WP Fastest Cache. Dacă ai WordPress sau Prestashop și ai făcut acest pas, nu va mai trebui să faci pașii 5 și 6 de mai jos.

Pasul 3. Scade viteza de încărcare a fișierelor CSS și JS folosind tehnicile de minificare și combinare.
Pasul 4. Optimizează-ți imaginile!

Știm că vrei imagini calitative pe site și că vrei totodată și să se încarce rapid fiecare secțiune care conține imagini dar nu uită că trebuie să le redimensionezi, să le comprimi și să optimizezi denumirea pentru fiecare în parte.

Pare greu, însă nu e. Noi ne-am ajutat de modulul Lazy Load pe care l-am modificat pentru a-l putea aplica pe toate imaginile din site.

Pentru comprimare te ajută mult și tinypng.com sau modulul oferit tot de ei în caz că ai platforma WordPress. Recomandăm și ImageOptim pentru o comprimare și mai rapidă.

Pasul 5. Activăm compresia gzip în fișierul .htacces, adăugând următoarele directive:

<IfModule mod_deflate.c>
 # Compress HTML, CSS, JavaScript, Text, XML and fonts
 AddOutputFilterByType DEFLATE application/javascript
 AddOutputFilterByType DEFLATE application/rss+xml
 AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
 AddOutputFilterByType DEFLATE application/x-font
 AddOutputFilterByType DEFLATE application/x-font-opentype
 AddOutputFilterByType DEFLATE application/x-font-otf
 AddOutputFilterByType DEFLATE application/x-font-truetype
 AddOutputFilterByType DEFLATE application/x-font-ttf
 AddOutputFilterByType DEFLATE application/x-javascript
 AddOutputFilterByType DEFLATE application/xhtml+xml
 AddOutputFilterByType DEFLATE application/xml
 AddOutputFilterByType DEFLATE font/opentype
 AddOutputFilterByType DEFLATE font/otf
 AddOutputFilterByType DEFLATE font/ttf
 AddOutputFilterByType DEFLATE image/svg+xml
 AddOutputFilterByType DEFLATE image/x-icon
 AddOutputFilterByType DEFLATE text/css
 AddOutputFilterByType DEFLATE text/html
 AddOutputFilterByType DEFLATE text/javascript
 AddOutputFilterByType DEFLATE text/plain
 AddOutputFilterByType DEFLATE text/xml

 # Remove browser bugs (only needed for really old browsers)
 BrowserMatch ^Mozilla/4 gzip-only-text/html
 BrowserMatch ^Mozilla/4\.0[678] no-gzip
 BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 Header append Vary User-Agent
</IfModule>

Pasul 6. Implementăm browser cache, adăugând următoarele directive în fișierul .htacces din public_html:

<IfModule mod_expires.c>
 ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
 ExpiresDefault “access plus 1 month”
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
 ExpiresByType text/cache-manifest “access plus 0 seconds”
# Your document html
 ExpiresByType text/html “access plus 0 seconds”
# Data
 ExpiresByType text/xml “access plus 0 seconds”
 ExpiresByType application/xml “access plus 0 seconds”
 ExpiresByType application/json “access plus 0 seconds”
# Feed
 ExpiresByType application/rss+xml “access plus 1 hour”
 ExpiresByType application/atom+xml “access plus 1 hour”
# Favicon (cannot be renamed)
 ExpiresByType image/x-icon “access plus 1 week”
# Media: images, video, audio
 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 video/ogg “access plus 1 month”
 ExpiresByType audio/ogg “access plus 1 month”
 ExpiresByType video/mp4 “access plus 1 month”
 ExpiresByType video/webm “access plus 1 month”
# HTC files (css3pie)
 ExpiresByType text/x-component “access plus 1 month”
# Webfonts
 ExpiresByType application/x-font-ttf “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”
 <IfModule mod_headers.c>
   Header append Cache-Control “public”
 </IfModule>
 </IfModule>

Pasul 7. Asigurați-vă că aveți keep_alive activat în php.

Verificați aici: Dacă nu este activat, contactați firma de hosting și adresați-le această cerere.

Pasul 8. Pasul final în care ne asigurăm că extensia opcache din php este activată și folosim și modulul de opcache (atât pentru WordPress cât și pentru Prestashop).

Dacă totuși, termenii tehnici sunt mult prea extenuanti pentru tine sau preferi să acorzi tot timpul tău, creației, tot noi suntem aici și pentru asta. Îți oferim un audit gratuit pentru a-ți satisface fiecare curiozitate legată de viteza de încărcare a site-ului tău. 

Nu e chiar atât de greu, nu? Încearcă și spune-ne ce rezultate ai. Dacă nu reușești, contactează-ne și te ajutăm noi.

Succes!

Lasă un comentariu