Articol de blog

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

Autor:

Thecon

Data:

15 iunie 2017

În ultima perioadă am lucrat la setări suplimentare pentru a mări viteza website-urilor pe […]

Î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?

optimizarea vitezei de încărcare

Î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ști 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).

optimizarea vitezei de încărcare

Dacă totuși, termenii tehnici sunt mult prea extenuanți 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!

Tags

Distribuie

Blogul Thecon

Articole recomandate

18 aprilie 2019

Top 9 TENDINTE IN INFLUENCER MARKETING

Potrivit unui studiu realizat de Linqia, 39% dintre comercianți intenționează să-și mărească bugetul pentru […]

Citește articolul

30 iulie 2020

Implementează o strategie de promovare pe Facebook corect, creativ dar și cu pasiune

Fie că derulezi deja reclame, fie că ești încă în momentul construirii unei strategii […]

Citește articolul

27 septembrie 2021

Ce este Headless E-commerce și care sunt funcționalitățile acestuia

Situația pandemică a creat contextul perfect pentru o dezvoltare mai rapidă a tehnologiilor. Acest […]

Citește articolul

Vezi și alte articole din blogul Thecon.

Thecon Newsletter

Abonează-te pentru noutăți!

Intră în posesia celor mai proaspete știri și articole, direct în casuța poștală, prin abonarea la newsletter-ul nostru.