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

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

http://i.imgur.com/n50C0YF.jpg

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

http://i.imgur.com/m9GzipM.jpg

Leverage browser caching

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

Cod:

---

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

http://i.imgur.com/AEB4HHB.jpg

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

http://i.imgur.com/TzmDRF2.jpg

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”

http://i.imgur.com/IUm5Sbn.jpg

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

Sper să vă ajute!

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

Citat:

---

Postat în original de LogOn

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!

Citat:

---

Postat în original de Popa Mihai

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ă

Citat:

---

Postat în original de Popa Mihai

Unde mai exact? Multumesc

---

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

Citat:

---

Postat în original de LogOn

Î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 /* :)

Ataşament 3645

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

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

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...

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

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? :)

Citat:

---

Postat în original de Popa Mihai

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.

Citat:

---

Postat în original de O. Cosmin

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.

---

Eu am momentan 73 pe mobil si 84 pe desktop, dar vreau sa trec de 90 pe ambele. Cred ca unele chestii de mai sus nu au efect pentru ca probabil erau deja facute la tema, desi daca ar fi fost facute nu mai apareau in insights.

Alte modificari decat cele prezentate de LogOn mai sus?

Alte modificari e una singura: W3 Total Cache + Cloudflare.
Minify (tot inclusiv HTML) in seama lui Cloudflare si toate celelalte in seama lui W3. (posibil sa nu mearga impreuna cu pluginul recomandat in primul post, autoptimize. nu am testat)
w3 Include dealtfel si gzip compresion, set expires, object cache, modifica .htaccess corespunzator si fireste, face cache.

Atentie, cand folosit Cloudflare si W3, sunt 2 module Cloudflare care trebuie instalate: unul in WP, care va arata ip-ul real al vizitatorilor/comentatorilor, altul in w3 (la extensions).

Un exemplu care functioneaza in cazul meu - AICI (nu am pus poza pe forum ca e prea lunga).
La "cache method" folositi ce aveti mai bun (sau ce e disponibil, in functie de hosting)

Am reusit sa-mi stric niste chestii la site, care si dupa backup nu vor sa mai revina la loc, este posibil? Sau e de la catch? Multumesc

Citat:

---

Postat în original de Popa Mihai

Am reusit sa-mi stric niste chestii la site, care si dupa backup nu vor sa mai revina la loc, este posibil? Sau e de la catch? Multumesc

---

Catch and go! Mai degraba de la cache! Atentie, mie mi-a facut W3 Total Cache tema praf si am renuntat la el! Am schimbat cu WP Super Cache si nu am mai avut probleme!

Citat:

---

Postat în original de Popa Mihai

Am reusit sa-mi stric niste chestii la site, care si dupa backup nu vor sa mai revina la loc, este posibil? Sau e de la catch? Multumesc

---

Sigur ca este posibil.
In functie de ce plugin ai instalat, sunt niste fisiere de "catch" din ala ramase pe acolo. Care nu se sterg singure, ori le sterge pluginul, ori le stergi tu de mana.

Citat:

---

Postat în original de Dan

Sigur ca este posibil.
In functie de ce plugin ai instalat, sunt niste fisiere de "catch" din ala ramase pe acolo. Care nu se sterg singure, ori le sterge pluginul, ori le stergi tu de mana.

---

Au dat cei de la provider un backup de ieri, sper sa-si revina, ca mai sunt doar la cateva pagini probleme, daca nu-si revine tot gasesc ei care e problema, intodeauna au rezolvat orice prostie am reusit eu sa fac :D

Citat:

---

Postat în original de Pami

Atentie, mie mi-a facut W3 Total Cache tema praf si am renuntat la el!

---

Nu se pricepe la minify, de aia am si zis ca tot ce tine de minify sa lasati pe mana altcuiva.
In rest, e inofensiv, nu strica nimic. Sunt cateva fisiere pe care trebuie sa le stergi daca te decizi sa scapi de el. Dar nu's secrete, o simpla cautare pe google iti spune exact ce sa stergi si de unde. Si e valabil pentru orice plugin de cache.

Citat:

---

Postat în original de Dan

Nu se pricepe la minify, de aia am si zis ca tot ce tine de minify sa lasati pe mana altcuiva.
In rest, e inofensiv, nu strica nimic. Sunt cateva fisiere pe care trebuie sa le stergi daca te decizi sa scapi de el. Dar nu's secrete, o simpla cautare pe google iti spune exact ce sa stergi si de unde. Si e valabil pentru orice plugin de cache.

---

Nu mai fac teste pe el clar, am pierdut aproximatvi 50 de comentarii, sper sa nu-mi sara toti participantii la concurs in cap, dar am trimis inca un mesaj la provider, poate le putem recupera. O sa apelez la un specialist pentru optimizare, nu ma mai bag de capul meu. Un sfat si pentru alti "aventurieri".

Citat:

---

Postat în original de Dan

Nu se pricepe la minify, de aia am si zis ca tot ce tine de minify sa lasati pe mana altcuiva.
In rest, e inofensiv, nu strica nimic. Sunt cateva fisiere pe care trebuie sa le stergi daca te decizi sa scapi de el. Dar nu's secrete, o simpla cautare pe google iti spune exact ce sa stergi si de unde. Si e valabil pentru orice plugin de cache.

---

Pai nici mie nu mi-a facut probleme o buna bucata de timp, pana l-a apucat damblaua si nu am mai avut ce sa-i mai fac! Si asta fara sa-l deranjez cu nimic (setari)! Daca retin bine s-a intamplat dupa ce a cerut sa-si fac un update! Ca se pricepe sau nu la minify, treaba lui, pe mine m-a pierdut de musteriu! :)

Citat:

---

Postat în original de Popa Mihai

Nu mai fac teste pe el clar, am pierdut aproximatvi 50 de comentarii

---

Daca ai ultima versiune, se poate "recupera". Ca practic nu e nimic pierdut.

Citat:

---

Postat în original de Dan

Daca ai ultima versiune, se poate "recupera". Ca practic nu e nimic pierdut.

---

Da o am, dar si ei imi recomanda un programator sa repuna tabelele sus, eu nu am facut niciodata si sincer nu as vrea sa incerc.... ca mi-a ajuns pentru astazi :(

In final totul a revenit la normal datorita lui Dan. Multumesc!

Salut, în primul rând îţi mulţumesc pentru timpul pierdut pentru a face acest tutorial.

Am făcut toţi paşi pe care i-ai arătat tu în tutorial, dar performanţa în Google PageSpeed, nu mi se schimbă, nici pentru mobil, nici pentru Desktop. Rezultatul la mine la Desktop a fost mereu 58, am o temă cumpărată de pe ThemeForest, le-am trimis tipilor de la thema mesaj să facă un update cu optimizarea pentru PageSpeed Insights dar se fac că plouă.

Sunt interesat de ceva să îmi meargă, aş vrea să vorbesc cu cineva care se pricepe, vreau să îmi dea cine vrea să mă ajute, dacă face treabă bună îmi poate da şi un preţ. Vă mulţumesc.

N-au astia de la ThemeForest ce update sa-ti faca pentru a optimiza PageSpeedul special pentru tine. Si nici nu se sinchisesc pentru o raportare de la un singur user. Esti sigur ca ai facut pasii ca la carte?

Citat:

---

Postat în original de MarianC

Salut, în primul rând îţi mulţumesc pentru timpul pierdut pentru a face acest tutorial.

Am făcut toţi paşi pe care i-ai arătat tu în tutorial, dar performanţa în Google PageSpeed, nu mi se schimbă, nici pentru mobil, nici pentru Desktop. Rezultatul la mine la Desktop a fost mereu 58, am o temă cumpărată de pe ThemeForest, le-am trimis tipilor de la thema mesaj să facă un update cu optimizarea pentru PageSpeed Insights dar se fac că plouă.

Sunt interesat de ceva să îmi meargă, aş vrea să vorbesc cu cineva care se pricepe, vreau să îmi dea cine vrea să mă ajute, dacă face treabă bună îmi poate da şi un preţ. Vă mulţumesc.

---

Cred ca n-ai inteles faptul ca Themeforest doar intermediaza vanzarea acelor produse. Daca vrei modificari de acest gen... apeleaza la autorul temei sau la un developer independent. Cum multi dintre autorii de teme nu ofera modificari (nici macar contra cost), cel mai rapid rezolvi cu un developer.

Citat:

---

Postat în original de Dobre Petronel

N-au astia de la ThemeForest ce update sa-ti faca pentru a optimiza PageSpeedul special pentru tine. Si nici nu se sinchisesc pentru o raportare de la un singur user. Esti sigur ca ai facut pasii ca la carte?

---

Da, am facut exact ca in tutorial.

Un screenshot cu lucrurile care ti le arata ca trebuie imbunatatite ar fi util, in felul asta ne putem da seama de unde vine problema :)

Citat:

---

Postat în original de LogOn

Un screenshot cu lucrurile care ti le arata ca trebuie imbunatatite ar fi util, in felul asta ne putem da seama de unde vine problema :)

---

Ataşament 3710

Citat:

---

Postat în original de MarianC

Ataşament 3710

---

După cum arată acele sfaturi, nu cred că ai respectat toate sfaturile de la începutul topicului. Încearcă din nou să le pui în aplicare :)

Citat:

---

Postat în original de Sergiu B.

După cum arată acele sfaturi, nu cred că ai respectat toate sfaturile de la începutul topicului. Încearcă din nou să le pui în aplicare :)

---

Într-adevăr, acum am refăcut acei paşi din tutorial şi acum am 58% la desktop, comprimarea css, a mers bine. Problema vine acum de la optimizarea imaginilor.

mai bine incerci sa schimbi thema, e mult de munca daca vrei un scor bun si sunt deja theme mai bine facute care iti dau scor peste 80 fara nici o modificare de cod (see pic)

Citat:

---

Postat în original de RedJohn

mai bine incerci sa schimbi thema, e mult de munca daca vrei un scor bun si sunt deja theme mai bine facute care iti dau scor peste 80 fara nici o modificare de cod (see pic)

---

Mie îmi place această thema + am şi plătit, nu este ceva luat de pe net.

Daca apesi pe show how to fix iti va arata si care sunt imaginile care trebuie optimizate si inclusiv detalii despre cati Kb vei reduce la fiecare. In mod normal, dupa optimizarea imaginilor ar trebui sa ajungi undeva la 80 % cu aceasta tema

Citat:

---

Postat în original de LogOn

Daca apesi pe show how to fix iti va arata si care sunt imaginile care trebuie optimizate si inclusiv detalii despre cati Kb vei reduce la fiecare. In mod normal, dupa optimizarea imaginilor ar trebui sa ajungi undeva la 80 % cu aceasta tema

---

Ok deci cand am apasat pe afiseaza detalii imi apar urmatoarele.

Comprimarea și redimensionarea resursei url site /…ntent/uploads/2014/07/host-500x500_c.png ar putea economisi 147,4 KB (o reducere de 93 %).
Comprimarea și redimensionarea resursei url site /…s/2015/08/g29-racing-wheel-500x300_c.png ar putea economisi 103 KB (o reducere de 72 %).
Comprimarea și redimensionarea resursei url site /…014/12/despicable-paradise-500x500_c.jpg ar putea economisi 60,9 KB (o reducere de 96 %).
Comprimarea și redimensionarea resursei url site /…-alphabet-graphic-custom-1-500x300_c.png ar putea economisi 59,2 KB (o reducere de 75 %).
Comprimarea și redimensionarea resursei url site /…wi-fi-urilor-din-jur_size1-500x500_c.jpg ar putea economisi 45,6 KB (o reducere de 96 %).
Comprimarea și redimensionarea resursei url site /…/uploads/2015/08/download1-500x300_c.jpg ar putea economisi 42 KB (o reducere de 83 %).
Comprimarea și redimensionarea resursei url site /…21_f32r_1920-1434399725099-500x300_c.jpg ar putea economisi 39,3 KB (o reducere de 84 %).
Comprimarea și redimensionarea resursei url site /…tent/uploads/2015/08/steam-500x300_c.jpg ar putea economisi 27,2 KB (o reducere de 86 %).
Comprimarea și redimensionarea resursei url site /…28f4c5b28eb6f58582e8f12fb0-500x300_c.jpg ar putea economisi 25,5 KB (o reducere de 84 %).
Comprimarea și redimensionarea resursei url site /…t/uploads/2015/08/download-500x300_c.jpg ar putea economisi 20,9 KB (o reducere de 84 %).
Comprimarea și redimensionarea resursei url site /…4/11/iPhone-7-Release-Date-500x300_c.jpg ar putea economisi 16,6 KB (o reducere de 81 %).
Comprimarea și redimensionarea resursei url site /…07/microsoft-edge-1170x644-500x300_c.jpg ar putea economisi 16 KB (o reducere de 78 %).
Comprimarea fără pierderi a resursei ....url google.... ar putea economisi 15 KB (o reducere de 32 %).
Comprimarea și redimensionarea resursei url site/…oads/2014/07/YouTube_FINAL-500x300_c.jpg ar putea economisi 10,4 KB (o reducere de 79 %).
Comprimarea fără pierderi a resursei url site /…t/uploads/2015/06/fifa-16-1170x579_c.jpg ar putea economisi 3,2 KB (o reducere de 3 %).
Comprimarea fără pierderi a resursei url site /…/2015/07/smart-tv-android-1170x579_c.jpg ar putea economisi 2,6 KB (o reducere de 3 %).
Comprimarea fără pierderi a resursei url site /…care-le-puteti-cumpara.-2-1170x579_c.jpg ar putea economisi 1,4 KB (o reducere de 2 %).
Comprimarea fără pierderi a resursei url site /wp-content/uploads/2015/07/mi4i2.png ar putea economisi 765 B (o reducere de 3 %).

Ce as putea sa fac, vrei sa iti trimit adresa site-ului prin pm?

Citat:

---

Postat în original de MarianC

Mie îmi place această thema + am şi plătit, nu este ceva luat de pe net.

---

Inseamna ca n-ai fost foarte inspirat cand ai cumparat thema :)
Oricum, nu e nici o tragedie acel scor. Poti sa-l imbunatatesti pe parcurs. Am vazut si site-uri mai "daramate" de atat ce rankeaza destul de bine. Si chiar daca reusesti sa faci un scor mai bun s-ar putea rezultatele in SERP sa nu fie considerabile.
Eu personal as prioritiza alte taskuri pentru pozitii mai bune in SERP: content, links, optimizari pt mobil, social media etc.

Citat:

---

Postat în original de MarianC

Ok deci cand am apasat pe afiseaza detalii imi apar urmatoarele.

Comprimarea și redimensionarea resursei url site /…ntent/uploads/2014/07/host-500x500_c.png ar putea economisi 147,4 KB (o reducere de 93 %).
Comprimarea și redimensionarea resursei url site /…s/2015/08/g29-racing-wheel-500x300_c.png ar putea economisi 103 KB (o reducere de 72 %).
Comprimarea și redimensionarea resursei url site /…014/12/despicable-paradise-500x500_c.jpg ar putea economisi 60,9 KB (o reducere de 96 %).
Comprimarea și redimensionarea resursei url site /…-alphabet-graphic-custom-1-500x300_c.png ar putea economisi 59,2 KB (o reducere de 75 %).
Comprimarea și redimensionarea resursei url site /…wi-fi-urilor-din-jur_size1-500x500_c.jpg ar putea economisi 45,6 KB (o reducere de 96 %).
Comprimarea și redimensionarea resursei url site /…/uploads/2015/08/download1-500x300_c.jpg ar putea economisi 42 KB (o reducere de 83 %).
Comprimarea și redimensionarea resursei url site /…21_f32r_1920-1434399725099-500x300_c.jpg ar putea economisi 39,3 KB (o reducere de 84 %).
Comprimarea și redimensionarea resursei url site /…tent/uploads/2015/08/steam-500x300_c.jpg ar putea economisi 27,2 KB (o reducere de 86 %).
Comprimarea și redimensionarea resursei url site /…28f4c5b28eb6f58582e8f12fb0-500x300_c.jpg ar putea economisi 25,5 KB (o reducere de 84 %).
Comprimarea și redimensionarea resursei url site /…t/uploads/2015/08/download-500x300_c.jpg ar putea economisi 20,9 KB (o reducere de 84 %).
Comprimarea și redimensionarea resursei url site /…4/11/iPhone-7-Release-Date-500x300_c.jpg ar putea economisi 16,6 KB (o reducere de 81 %).
Comprimarea și redimensionarea resursei url site /…07/microsoft-edge-1170x644-500x300_c.jpg ar putea economisi 16 KB (o reducere de 78 %).
Comprimarea fără pierderi a resursei ....url google.... ar putea economisi 15 KB (o reducere de 32 %).
Comprimarea și redimensionarea resursei url site/…oads/2014/07/YouTube_FINAL-500x300_c.jpg ar putea economisi 10,4 KB (o reducere de 79 %).
Comprimarea fără pierderi a resursei url site /…t/uploads/2015/06/fifa-16-1170x579_c.jpg ar putea economisi 3,2 KB (o reducere de 3 %).
Comprimarea fără pierderi a resursei url site /…/2015/07/smart-tv-android-1170x579_c.jpg ar putea economisi 2,6 KB (o reducere de 3 %).
Comprimarea fără pierderi a resursei url site /…care-le-puteti-cumpara.-2-1170x579_c.jpg ar putea economisi 1,4 KB (o reducere de 2 %).
Comprimarea fără pierderi a resursei url site /wp-content/uploads/2015/07/mi4i2.png ar putea economisi 765 B (o reducere de 3 %).

Ce as putea sa fac, vrei sa iti trimit adresa site-ului prin pm?

---

Arhivezi acele foldere cu imaginile din Wordpress și le descarci pe calculator. Le dezarhivezi și, folosindu-te de un program specializat, comprimi acele imagini. Eu recomand Caesium.
Mare atenție la păstarea denumirii imaginilor și a structurii folderelor. Dacă nu ești sigur pe tine ar fi bine să faci un backup complet înainte.

Salut. Multumesc mult pentru tutorial, m-a ajutat enorm. Am adus rapid site-ul de la 43 pe mobil la 89 si de la 70 (sau pe acolo, nu mai retin) la 95 pe desktop. Asa am aflat si eu ca nu e deloc o idee buna sa pui ca header un jpeg de 947 kb cand ai putea sa pui un png de 9 kb. :)

Mersi pentru tutorial, nu stiam de optiunea din cpanel cu Optimize Website :rolleyes:

Pentru eroarea Eliminate render-blocking JavaScript and CSS in above-the-fold content puteti folosi si W3 Total Cache, eu am reusit sa urc inca vreo 10 puncte prin acest plugin.

Un tutorial usor de inteles gasiti AICI