Ghid ÎNCEPĂTORI pentru optimizarea site-ului (Google Page Speed Insights)

[LogOn]

Google ia în calcul conceptul de User Experience și vine în ajutorul nostru cu PageSpeed Insights, un soft care ne arată și ce probleme au site-urile noastre. Mai multe detalii și un topic de discuții găsiți AICI

Site-urile noastre întâmpină în general aceleași probleme. În acest ghid se găsesc cele mai importante dintre acestea și modul în care se pot rezolva.
Acest ghid este făcut pentru platforma wordpress și pentru server apache. Menționez că ghidul este făcut pentru începători, nu ai nevoie să știi programare și durează 5 minute să aduci coeficienții PageSpeed Insights de la sub 40/100 la peste 70/100

Prima dată trebuie să scanați website-ul vostru AICI, pentru a identifica recomandările Google, iar apoi să urmați pașii de mai jos

Enable compression

Cea mai simplă metodă de a rezolva această problemă este din cpannel:

1. Accesați cpannel / Software and Services / Optimize Website



2. Bifați ”Compress All Content” / apăsați Update Settings. Și voila, deja aveți un site mai rapid!



Leverage browser caching

Cea mai simplă metodă este să introduceți codul de mai jos în fișierul .htacces:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

Notă: Puteți scoate ce vreți, dar trebuie neapărat să lăsați linia ExpiresActive on

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Cea mai simplă metodă să rezolvați această problemă este:

1. Instalați modulul Autoptimize pe care-l găsiți AICI

2. Intrați în setări și bifați:
Optimize JavaScript Code?
Optimize CSS Code?



3. Apăsați ”Save Changes and Empty Cache”



Optimize images

Imaginile se pot comprima prin mai multe metode, printre care Photoshop sau alte programe pe care le găsiți și pe internet. Una dintre metodele folosite de începători este comprimarea prin tool-uri ca JPEG Optimizer - Compress and Resize Your Digital Photos

Minify CSS

1. Intrați în admin-ul wordpress / editor teme / style.css

2. Copiați tot conținutul din style.css într-un fișier txt, în caz că faceți veți face ceva greșit

2. Copiați tot conținutul din style.css (în afară de partea cu descrierea și detaliile despre temă de sus - de fapt, copiați tot ce este sub primul semn */ din conținut)

3. Mergeți pe CSS Minifier și introduceți textul copiat la ”Input CSS”, iar apoi apăsați ”Minify”

4. Inlocuiți textul copiat din style.css (nu uitați, în afară de partea cu descrierea și detaliile despre temă de sus) cu textul din ”Minified Output”



În final, scanați din nou website-ul, ca să vedeți diferența

Sper să vă ajute!

[Popa Mihai]

Unde se introduce exact codul pentru Leverage browser caching in .htacces?

Copiați tot conținutul din style.css (în afară de partea cu descrierea și detaliile despre temă de sus - de fapt, copiați tot ce este sub primul semn */ din conținut)

Unde mai exact?

Pluginul Autoptimize, a automoatizat tot la tine? La mine au mai ramas cam trei lucruri neoptimizate

Cu ce am reusit sa fac eu din ce ai scris mai sus am crescut de la 69 la 73, sunt curios daca trec de 90 dupa ce reusesc sa fac tot ce ai scris tu mai sus.

Multumesc, chiar util!

[LogOn]

Unde se introduce exact codul pentru Leverage browser caching in .htacces?

Poți să-l introduci la sfârșit sau la început, nu contează

Unde mai exact? Multumesc

În clipboard, adică îi dai ctrl+c. De fapt, vrei să-l copiezi în Input CSS, pe http://cssminifier.com/

[Popa Mihai]

În clipboard, adică îi dai ctrl+c. De fapt, vrei să-l copiezi în Input CSS, pe CSS Minifier

Nu m-am exprimat corect, ma refer la "*/ din conținut", eu am vreo 42 de /*

Untitled.png

[LogOn]

Tot continutul de sub primul semn de genul ala. De fapt, copiezi tot in afara de partea cu descrierea temei, etc

P.S.: peste 90/100 scoti numai daca te bagi in cod

[LogOn]

L.E.: da, de acolo, tot ce este SUB acel semn

[alarma]

Va sfatuiesc sa faceti o copie a celui original, caci daca ulterior doriti sa faceti ceva modificari la template din CSS e foarte greu de lucrat in ele...

[LogOn]

Da, da, neaparat cu back-up al fisierului, am precizat si eu in ghid

[Popa Mihai]

Deci dupa modificarea Minify CSS prin fisierul style.css am ramas tot la 73, ma gandesc sa-i dau restore.

Codul pentru .htacces nu cred ca functioneaza, inca imi apare in Google Page Speed Insights - Leverage browser caching, chiar daca am introdus codul

A ajutat optiunea de optimizare website din cpanel si pluginul Autoptimize, tu ai testat sau ai facut doar ghidul? Sunt doar curios, pentru ca daca la tine a avut efect, la mine de ce nu au?

[O. Cosmin]

Deci dupa modificarea Minify CSS prin fisierul style.css am ramas tot la 73, ma gandesc sa-i dau restore.

Cred ca anumite teme nu iti permit mai mult. Nu ma pricem la asta si nu afirm ca ar fi ca mine insa eu nu am facut nimic in mod deosebit, doar chestiile minimale si am pe un site 75 pe mobil si 79 pe PC. Cred ca mai conteaza si ce plugin-uri ai instalate, dar repet, e doar o opinie a unui necunoscator. Nu contest ca daca aplic metoda asta nu pot ajunge la 100.