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

[hariskar]

Η βαθμολογία είναι 95% για Desktop και 91% για κινητά. Έχω μόνο αυτή την υπόδειξη:

 

Consider Fixing:

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

Your page has 1 blocking CSS resources. This causes a delay in rendering your page.

 

Δεν κατάλαβα τι πρέπει να κάνω, "above-the-fold content" είναι το 90% της σελίδας, ελάχιστο τμήμα χρειάζεται scroll.

 

Η σελίδα είναι η www.mikroviologos.gr

Σας ευχαριστώ για τη βοήθεια!

[XPHSTOS_]

Εννοεί ότι εκτελείται javascript above the fold η οποία θα μπορούσε να εκτελεστεί μετά από αυτό.
Φαντάζομαι ότι αναφέρεται σε αυτό το κομμάτι:

 

function myFunction() {
var x = document.getElementById("nav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}}

Το οποίο το φορτώνεις πριν το Body.

Δοκίμασε να το βάλεις μετά ή να βγάλεις όλα σου τα js σε ένα .js file.

[hariskar]

Σε ευχαριστώ για την απάντηση!

Βάζοντας το παραπάνω script ακριβώς μετά το body η βαθμολογία είναι ίδια.

Αν το βάλω σε εξωτερικό .js πέφτει στο 93% και 85%.

Από ότι λέει το μήνυμα το εξωτερικό css είναι το πρόβλημα, γιατί όμως;

Your page has 1 blocking CSS resources.

Το μόνο που μπορώ να σκεφτώ είναι να χρησιμοποιήσω inlline css, όμως αυτό είναι πρακτικά πολύ δύσκολο.

 

Επίσης είδα ότι έχει και 2η παρατήρηση:

 

Prioritize visible content

 

Edit: Αν βάλω όλο το περιεχόμενο του εξωτερικού css στο head η βαθμολογία γίνεται 97% και 100%. Μένει μόνο η παρατήρηση Prioritize visible content στο Desktop. Όμως δε νομίζω ότι αυτό είναι καλή λύση αφού αν κάνω αλλαγή στο css πρέπει να το κάνω σε κάθε σελίδα χωριστά και επιπλέον το css φορτώνει κάθε φορά για κάθε σελίδα ενώ τώρα μόνο μία φορά και μετά φορτώνει από την cache.

Οπότε τι κάνω;

[Predatorkill]

Το αφηνεις οπως εχει. Το 97 με το 100 δεν λεει τπτ, ουτε στην αναζητηση ουτε στην αισθηση της ταχυτητας.

[hariskar]

Και εγώ εκεί έχω καταλήξει, αλλά είπα να ρωτήσω μήπως κάτι μου διαφεύγει.

Δεν μπορώ να καταλάβω όμως τη λογική της google, μου κόβει βαθμούς από το μοναδικό εξωτερικό css που έχω, που δεν είναι τόσο μικρό για να πάει στο head ή inline και από τη 1 φωτογραφία που έχω above the fold...

[XPHSTOS_]

Τώρα νομίζω ότι κατάλαβα...

Θέλει inline τα απαραίτητα CSS για το above the fold και τα υπόλοιπα σε external file.
Δηλαδή, τι θεωρείται critical για το above the fold? 
Slider και menu? Αυτά αυτά τα 2 στο head και τα υπόλοιπα στο main.css.

Στην εταιρεία που δουλεύω έχουμε φέρει κατοστάρια κατα το release και βλέπω τώρα ότι όντως φορτώνουμε αν όχι όλο, ένα μεγάλο κομμάτι των css στο head!

www.seve.gr

Τώρα με τον καιρό έπεσε στο 96/100 αλλά πάλι είναι εξαιρετικό νούμερο.

Γενικά 90 - 100 δεν έχει κάποια διαφορά ούτε στον χρήστη αλλά κυρίως ούτε στην μηχανή της google.

[hariskar]

Όμως σε εμένα είναι σχεδόν όλη η σελίδα above the fold. Ουσιαστικά μόνο το footer δεν είναι. Οπότε θα πρέπει να βάλω όλο το css εκτός το σχετικό με το footer στο head (σε κάθε σελίδα). Και δε θα καθυστερούν οι σελίδες στο φόρτωμα αφού τα requests δε θα ελαττωθούν, όμως το css δε θα φορτώνεται πλέον από την cache, αλλά για κάθε σελίδα το inline θα ξαναφορτώνεται;

Σίγουρα πρακτικά δεν υπάρχει διαφορά από το 95% στο 100%.

 

Η σελίδα που αναφέρεις έχει πολύ καλή βαθμολογία και εύκολα μπορεί να αυξηθεί και άλλο αφού τα 

Optimize images, Minify JavaScript, Leverage browser caching γίνονται εύκολα.

[Predatorkill]

Μια χαρα ειναι το site μην ασχοληθεις αλλο με τη ταχυτητα.

 

https://tools.pingdom.com/?testurl=https%3A%2F%2Ftools.pingdom.com#!/dtAYOR/www.mikroviologos.gr

[dominotrix]

Προτεινω αυτο το εργαλειο:

 

https://gtmetrix.com/reports/mikroviologos.gr/qRNUimrh

 

Σε βγαζει 100% αν και εχεις δυο ρυθμισεις στο 99%

[hariskar]

Το pagespeed πλέον δίνει 100% και στις 2 μετρήσεις. Έκανα όμως κάποιες αλλαγές:

Έβαλα όλο το εξωτερικό css στο head, μετέτρεψα τις 3 εικόνες σε base64 και τις έβαλα μέσα στο html, οπότε όλη η σελίδα φορτώνεται με 1 request. Επίσης έβαλα τις διαστάσεις της κεντρικής φωτογραφίας, που πριν είχα max-width:100%;height:auto.

Στις μετρήσεις οι σελίδα ανοίγει πολύ πιο γρήγορα, στην πράξη δεν μπορώ να καταλάβω.

Το μεγάλο μειονέκτημα είναι ότι πρέπει να βάλω το css σε όλες τις σελίδες και αν θέλω να αλλάξω κάτι θα πρέπει να το κάνω σε κάθε σελίδα χωριστά που δεν είναι πολύ δύσκολο, αφού οι σελίδες είναι περίπου 30, όμως σίγουρα είναι πιο χρονοβόρο από ότι με εξωτερικό css.

 

Ποια είναι η γνώμη σας;

Ευχαριστώ!

 

PS. 

dominotrix από Καβάλα και εσύ;