Τι είναι το render blocking;
Render σημαίνει φόρτωση, οπότε αν ένα JavaScript είναι render blocking, τότε σημαίνει ότι αυτό το JavaScript δεν αφήνει τη σελίδα να φορτώσει.
Η Google προτείνει να μην υπάρχουν JavaScripts τουλάχιστον στο πεδίο «above the fold», δηλαδή στο πεδίο που βλέπουμε πρώτα στην οθόνη σου όταν φορτώνει η αρχική σελίδα.
Η πρακτική αυτή έχει χρησιμοποιηθεί εδώ και καιρό από αυτούς που ασχολούνται με pagespeed, αλλά αποτελεί μία νέα πρακτική για τους περισσότερους webmasters και web designers. Κάτι που το καθιστά ακόμα δύσκολο να επιτευχθεί από τους περισσότερους.
Είναι όμως εφικτό να το πετύχουμε αν μας ενδιαφέρει το υψηλό ranking στη Google. Αν η ταχύτητα του πεδίου «above the fold» δεν βελτιστοποιηθεί τότε το ranking «κινδυνεύει» από συσκευές όπως smartphones και tablets που δεν θα μπορούν να φορτώσουν εύκολα την ιστοσελίδα.
Πιο συγκεκριμένα, το λεγόμενο «above the fold» είναι αυτό που βλέπει στην οθόνη του
ο χρήστης με το που εισέλθει σε μια ιστοσελίδα. Είτε είναι από smartphone, tablet ή pc.
Πως αναγνωρίζουμε τα render-blocking JavaScripts;
Θα πρέπει να γνωρίζετε τι φορτώνει η σελίδα σας. Υπάρχουν διάφοροι τρόποι για να το ελέγξετε. Ένας τρόπος είναι να χρησιμοποιήσετε το εργαλείο της Google pagespeed. Αυτό το εργαλείο θα σου δώσει τα ακριβή αρχεία που εμποδίζουν την γρήγορη φόρτωση μίας σελίδας.
Σε περίπτωση που το αρχείο JavaScript καλείται να φορτώσει στην ιστοσελίδα πριν από οτιδήποτε άλλο όπως στο παρακάτω παράδειγμα, αυτό είναι πολύ αρνητικό για τη ταχύτητα της σελίδας.
Παράδειγμα:
<head>
<meta name=description content=”description here.”/>
<title>title here</title>
<style>
styles here
</style>
<script src=”jquery.js”>
</script>
</head>