Google Page Speed Insights acum analizeaza UX-ul

[Bogdan Anghelina]

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.

[Adiiii]

O soluție pt CSS? Nu mă lasă să trec de 79%.
http://i.gyazo.com/1d260d94e73259e0b6fe00c19c457366.png

[LogOn]

Nu stiu cat de utila este scanarea, nici G+ nu trece de 74%:
Capture.JPG

[Pami]

Aia nu e nimic, developerii stau si mai bine!

[Floki]

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

$().ready(function(){
    $('head').append('<link rel="stylesheet" href="mycss.css" type="text/css" />');
});

Pentru JavaScript:

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:

<script>
    var s = document.createElement("script");
    s.src = "myjs.js";
    s.type = "text/javascript";
    s.async = true;
    document.body.appendChild(s);
</script>

daca mai incarci si jQuery, trebuie sa urmaresti daca libraria este incarcata atunci cand o folosesti

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

E de munca. Daca n-ai facut site-uri decat in WP, renunta; desi si acolo se poate (dar nu cu plugin-uri).

[Bogdan Anghelina]

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?

[florescualin]

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.

[zaho]

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.

[Bogdan Anghelina]

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!

[florescualin]

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