Google deja se bazeaza pe UX-ul paginii in algoritmul de ranking, iar acum ne arata si ce probleme considera ca au site-urile noastre.
Vedeti aici stirea si aici puteti testa site-ul.
Versiune printabilă
Salut, iar addon-ul de Chrome iti ofera si rezolvarea problemelor :)
Este foarte tare avand in vedere ca este o initiativa a Google. Dar este in BETA si greseste in multe cazuri. De exemplu, mie mi-a spus la un site ca un buton este prea mic, cand eu deja testasem cum se vede site-ul pe cateva din telefoanele cele mai folosite.
Cu aceasta modificare a toolului de speed, Google forteaza mana webmasterilor pentru a-i face sa imbunatateasca usability-ul siteurilor. Vrem nu vrem, va trebui ca siteurile sa le facem responsive, pentru ca UX-ul sa creasca.
Cu ocazia asta m-am apucat sa imi fac si siteurile responsive. :))
Oricum, e un tool misto.
Imi creeaza si mie probleme, nu am tema responsive si imi apare cand testez viteza urmatorul mesaj:
Remedieri obligatorii:
Utilizați dimensiuni de font lizibile
Următorul text din pagina dvs. este afișat într-un mod care ar putea fi dificil de citit pentru unii dintre vizitatori. Utilizați dimensiuni de font lizibile pentru a îmbunătăți experiența utilizatorului.
Următoarele fragmente de text au o dimensiune mică a fontului. Măriți dimensiunea fontului pentru a le face mai lizibile.
TERMENI SI CONDITII și alte 2 astfel de fragmente de text au o înălțime a fontului de numai 4 pixeli (13 pixeli în CSS) vedeți captura de ecran.
Articole și alte 2 astfel de fragmente de text au o înălțime a fontului de numai 4 pixeli (15 pixeli în CSS) vedeți captura de ecran.
Retete culinare noi are o înălțime a fontului de numai 7 pixeli (22 pixeli în CSS) vedeți captura de ecran.
Imi puteti spune ce anume trebuie sa fac, ce sa adaug?
Unde ai neclaritati?Citat:
Postat în original de florescualin
Adaugă asta la fișierul CSS, și redefinește clasele pentru elementele care nu se încadrează în ecran:Citat:
Postat în original de florescualin
@media only screen and (min-width: 280px) and (max-width: 767px) {
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
}
@media only screen and (min-width: 768px) and (max-width: 949px) {
}
@media only screen and (min-width: 950px) and (max-width: 1149px) {
}
@media only screen and (min-width: 1150px) {
}
Dacă nu te descurci, ai aici suficiente detalii
Si sa inteleg ca daca fac din tema actuala una responsive design nu mai am acele probleme. Acum tema mea are un width de 998px si un sidebar right. Nu prea inteleg exact cu queries cum sa fac, dar o sa ma documentez. Multumesc.
Testat; concluzia: probabil, dar e un factor minor, minuscul.Citat:
Postat în original de Alex Dumitru
Înainte:
- 49% viteza, 51% UX
- poziția 10-12 după un anumit kw atât pe desktop cât și pe mobil
După:
- 100% viteza, 100% UX
- poziția 10-12 pe desktop, 10-12 pe mobil
Site-uri cu 25% și scroll pe orizontală n-au nici o problemă. Dacă ar fi fost un factor important, cred că ar fi trebuit să-l plaseze măcar pe 10 pe mobil.
Depinde ce face si concurenta. Daca sunt toate la fel, atunci nu are ce compara :DCitat:
Postat în original de Gratian Alinei
Punctul meu de vedere este ca ar trebui sa indeplinim cerintele Google. Cei care spun "nu conteaza", daca site-ul este responsive sau nu, eu cred ca gresesc.
Problema aceasta cu viteza de incarcare a siteului nu am reusit sa o rezolv niciodata, la niciun site de al meu. Am facut un test astazi la un site si am 30% pe mobil si 37% desktop. Foarte putin.
Printre problemle care nu stiu sa le remediez si as vrea se numara urmatoarele:
Remedieri obligatorii:
1. Optimizaţi imaginile
Formatarea adecvată și comprimarea imaginilor pot economisi mulți bytes de date.
Optimizați imaginile următoare pentru a reduce dimensiunea acestora cu 944,3 KB (o reducere de 83 %).
2. Eliminați resursele JavaScript și CSS care blochează redarea conținutului din partea superioară a paginii
Pagina are 4 (de) resurse script și 12 (de) resurse CSS de blocare, fapt care produce o întârziere la redarea paginii.
Nicio parte a conținutului afișat în partea superioară a paginii nu a putut fi redată fără a se aștepta încărcarea următoarelor resurse. Încercați să amânați ori să încărcați asincron resursele de blocare sau să încărcați inline părțile esențiale ale respectivelor resurse direct în HTML.
3. Activaţi comprimarea
Comprimarea resurselor utilizând gzip sau deflate poate reduce numărul de bytes trimiși prin rețea.
Activați compresia pentru următoarele resurse pentru a reduce dimensiunea de transfer a acestora cu 381,2 KB (o reducere de 75 %).
4. Profitaţi de memoria cache a browserului
Stabilirea unei date de expirare sau a unei vârste maxime în antetele HTTP ale resurselor statice dă browserului instrucțiuni pentru a încărca resursele descărcate anterior de pe discul local și nu prin rețea.
Utilizați memoria cache a browserului pentru următoarele resurse ce pot fi stocate în memoria cache:
Poate se gandeste cineva binevoitor, in limita timpului disponibil, sa faca aici pe forum un articol despre fiecare problema intampinata in incarcarea unui site, care apare atunci cand este testat cu GOOGLE PAGE SPEED INSIGHTS, sau macar pe primele care le au majoritatea siteurilor.
PS. Mentionez ca am un site culinar. De exemplu la punctul 4 am inteles ca exista un plugin, W3 Total Cache. L-am instalat acum cateva luni, iar atunci cand postam ceva pe site vizitatorii nu mai vedeau postarile facute dupa instalarea pluginului.
Probeaza, ai rabdare, iar rezultatul va veni: https://wordpress.org/plugins/speed-booster-pack/Citat:
Postat în original de florescualin
Intr-adevar, foarte putin!Citat:
Postat în original de florescualin
Poti sa folosesti mama lui de plugin de cache, daca ai o tema prost optimizata sau folosesti module proaste, nu faci mare lucru.
Ce pot sa spun din start:
1. Ai o problema cu imaginile. Daca 944,3 KB reprezinta 83% inseamna ca ai imagini in pagina testata ce insumeaza 1,14 MB. Pentru comparatie: Optimize the following images to reduce their size by 15KiB (4% reduction) - la o pagina home supraincarcata cu 40 de imagini afisate.
2. 12 fisiere CSS. Cam multe. Folosesti multe module pentru afisarea de continut? Ai activate module pe care nu le folosesti? Ajuta W3 Total Cache (Minify).
3. si 4. le rezolva fara probleme W3 Total Cache si cred ca si Zen Cache care e mai simplu.
Nu tu ai promis un tutorial pentru respectivul plugin?Citat:
Postat în original de Bogdan Calin
Ba :whistle:. Azi (ca deja-i azi) sau poimaine vin cu el :D.Citat:
Postat în original de Mishu
@Mishu - Cu ce program as putea optimiza imaginile pana la dimensiunea ceruta? Am instalat semrush plugin dar tot exista problema optimizarii imaginilor.
In ceea ce priveste modulele nu folosesc multe, tema are mai multe fisiere css.
@Bogdan Calin - Nu prea inteleg la ce ma poate ajuta pluginul dat de tine. L-am instalat, l-am setat dar nu vad nicio diferenta.
Vezi că ai o grămadă de site-uri care optimizează imagini, nu cred că ai nevoie de soft. Ex: imageptimizer . netCitat:
Postat în original de florescualin
Trebuie să intri in setări și să bifezi acțiunile pe care vrei să le întreprindă (Ex: Move scripts to the footer)Citat:
Postat în original de florescualin
@LogOn - Multumesc, am rezolvat problema optimizarii imaginilor. Problema era de la un widget, popular post. Practic aveam functie care imi facea imaginea 80x75px, dar url la imagine era al celei mai mari. Desi imagine erau optimizate imi spunea ca nu sunt. Acum totul este in regula.
Mai am de rezolvat punctul 3 si 4 de la primul post al meu. Am pus pluginul W3 Total Cache, dar nu ii dau de cap. Am gasit si niste tutoriale dar tot nu reusesc.
Asta e cel mai bun: WP Super Cache Plugin « HostGator.com Support PortalCitat:
Postat în original de florescualin
Nu reușesc nicium să scot mai mult de 84 pe mobil (viteză, că UX e 100) din cauza "JavaScript și CSS care blochează redarea conținutului din partea superioară a paginii".
Am comprimat codurile, folosesc și Minify respectiv un plugin pentru a încarca codurile asincron, tot nimic.
O soluție pt CSS? Nu mă lasă să trec de 79%.
http://i.gyazo.com/1d260d94e73259e0b6fe00c19c457366.png
Nu stiu cat de utila este scanarea, nici G+ nu trece de 74%:
Ataşament 3596
Aia nu e nimic, developerii stau si mai bine! :)
http://i.imgur.com/Ps0kxe5.jpg
Pentru CSS:
Cel mai simplu e sa-l introduci inline, fara fisier extern, oriunde ar fi - chiar daca arata urat. Problemele dispar.
Se mai poate sparge fisierul, o parte inline si alta in fisier extern incarcat undeva inainte de "</body>" cu javascript
Pentru JavaScript:Cod:$().ready(function(){
$('head').append('<link rel="stylesheet" href="mycss.css" type="text/css" />');
});
Aici e mai greu, mai ales daca se incarca si librarii. Regula e ca tot js-ul sa fie introdus la sfarsit, asyncron sau si una si alta; atentie la erori!
Pentru o pagina simpla, doar cu un fisier js:
daca mai incarci si jQuery, trebuie sa urmaresti daca libraria este incarcata atunci cand o folosestiCod:<script>
var s = document.createElement("script");
s.src = "myjs.js";
s.type = "text/javascript";
s.async = true;
document.body.appendChild(s);
</script>
E de munca. Daca n-ai facut site-uri decat in WP, renunta; desi si acolo se poate (dar nu cu plugin-uri).Cod:<script async src="jquery.js"></script>
<script>
checkAsync();
function checkAsync(){
if(typeof window.jQuery==="undefined" || !window.jQuery){
window.setTimeout("checkAsync();", 100);
}else{
var s = document.createElement("script");
s.src = "myjs.js";
s.type = "text/javascript";
s.async = true;
document.body.appendChild(s);
}
}
</script>
Am reușit să obțin un scor destul de bun, însă îmi cere în continuare să încarc CSS-ul inline. Cum determin ce parte din CSS aș putea să îl încarc direct în fișier și ce parte extern?
Nu reusesc sa rezolv problema asta:
Enable compression
Compressing resources with gzip or deflate can reduce the number of bytes sent over the network.
Enable compression for the following resources to reduce their transfer size by 296.5KiB (77% reduction).
Din ce am observat serverul pe care am siteul este nginx, deci compresia se poate face doar gzip, dar nu stiu unde si ce anume trebuie sa adauga pentru compresia fisierelor js si css, ca doar astea imi apar.
74 / 100 Viteza
Remedieri obligatorii:
Eliminați resursele JavaScript și CSS care blochează redarea conținutului din partea superioară a paginii
Vedeți cum puteți remedia
Remedieri recomandate:
Reduceți durata de răspuns a serverului
Vedeți cum puteți remedia
Profitaţi de memoria cache a browserului
Vedeți cum puteți remedia
Reduceţi mărimea fişierului HTML
Vedeți cum puteți remedia
Optimizaţi imaginile
Vedeți cum puteți remedia
Pe mobil -
100 / 100Experiența utilizatorului
Felicitări! Nu au fost găsite probleme.
Am scos 89/100 Mobil și 95/100 Desktop pe Wordpress cu comprimarea CSS și Javascript în prealabil, flush în header și plugin-urile WP Super Cache (activat cu setările stock), WP Minify Fix (configurat în funcție de temă; strică unele meniuri/galerii dacă nu sunt excluse), Async JS and CSS (cu Load Javascript asynchronously, Load CSS asynchronously și Inserting all CSS styles inline into the document FOOTER; și aici am exclus câteva fișiere).
Folosesc și WP Smush respectiv WP-Optimize.
Succes!
Dupa implementarea modificarilor cerute a observat cineva vreo schimbare in bine la trafic sau vorbim de inca o platitudine marca Google ca multe altele?
@bogdananghelina - Eu am pus acel cod de comprimare js si css cu deflate in htaccess, dar atunci cand scanez cu google tot imi spune ca nu sunt comprimate js-urile si css-urile. Mai trebuie pus ceva?
Ce solutie folosesc eu si nu are importanta ce platforma folosesti sau daca site-ul este creat in HTML, PHP:
1. Combinarea fisierelor CSS si comprimare
2. Fisierul CSS, se poate incarca in <head> cu:
3. Combinare fisiere JS si comprimareCitat:
<style media="screen" type="text/css"> Continut CSS </style>
4. Incarcarea fisierului JS, din footer cu urmatorul cod:
In cazul in care este necesara incarcarea unui fisier JS, care nu se poate combina, tot in footer folosim:Citat:
<script type="text/javascript">
window.onload=function(){
var mycode;
mycode=document.createElement("script");
mycode.type="text/javascript";
mycode.src="cale-catre.js";
document.getElementsByTagName("head")[0].appendChild(mycode);
}
</script>
.................................................. .................................................. ..........................................Citat:
<script src="cale-catre.js"></script>
Rezultat: Mobil 95% si Desktop 96%
Ataşament 3631
Ataşament 3632