Έλεγχος πόρων που μπλοκάρουν την απόδοση

Σύντομη απάντηση

Εντοπίστε scripts και stylesheets που μπλοκάρουν την απόδοση, καθώς και συνήθειες στα scripts που καθυστερούν τις σελίδες: έλλειψη async/defer, inline event handlers και document.write.

Τι Κάνει

Ελέγχει το HTML μιας σελίδας σε δύο μέρη. Πόροι που μπλοκάρουν την απόδοση: scripts στο `<head>` χωρίς `async` ή `defer`, stylesheets που μπλοκάρουν την απόδοση και κανόνες CSS `@import`. Υγιεινή scripts: πόσα εξωτερικά και inline scripts φορτώνει η σελίδα, αν τα εξωτερικά scripts χρησιμοποιούν `async` ή `defer`, inline event handlers όπως `onclick`, κλήσεις `document.write` και αν χρησιμοποιούνται ES modules.

Γιατί Έχει Σημασία

Ένα πρόγραμμα περιήγησης πρέπει να κατεβάσει και να εκτελέσει κάθε script και stylesheet που μπλοκάρει στο `<head>` πριν μπορέσει να αποδώσει οτιδήποτε, κάτι που καθυστερεί το First Contentful Paint και συχνά το Largest Contentful Paint. Το `document.write` το κάνει χειρότερο — το Chrome μπορεί να αρνηθεί να εκτελέσει scripts που εισάγει σε αργές συνδέσεις — και οι inline handlers εμποδίζουν μια αυστηρή Content-Security-Policy.

Πώς Λειτουργεί

Εισάγετε ένα URL σελίδας ή επικολλήστε το HTML της
Αναλύουμε το `<head>` και κάθε `<script>` στη σελίδα
Επισημαίνουμε scripts και stylesheets που μπλοκάρουν την απόδοση, έπειτα ελέγχουμε τα scripts για async/defer, inline handlers και document.write
Επιστρέφουμε ένα αποτέλεσμα για κάθε μέρος, με τους πόρους που επισημάναμε

Δείγμα εισόδου + εξόδου

ΕΙΣΟΔΟΣ

url: https://rankproof.eu/tools

ΕΞΟΔΟΣ

Render-blocking resources: 2
  <script src="analytics.js">              blocking
  <link rel="stylesheet" href="theme.css"> blocking
  χωρίς @import σε CSS                     OK

Script hygiene
  scripts: 7 (5 εξωτερικά, 2 inline)
  τα εξωτερικά scripts χρησιμοποιούν async ή defer warn
  χωρίς inline χειριστές συμβάντων         OK
  χωρίς document.write                     OK
  uses ES modules                          OK

0 από 2 τομείς είναι εντάξει

Ποιοι το Χρησιμοποιούν

Μηχανικός Απόδοσης

Πριν από μια περίοδο αιχμής, μετακινήστε κάθε script που μπλοκάρει σε async ή defer και ελέγξτε ξανά ότι δεν προστέθηκε κάτι νέο στο `<head>`.
Frontend Developer

Εντοπίστε το snippet analytics ή widget που ακόμη φορτώνει σύγχρονα και αλλάξτε το σε αναβαλλόμενη φόρτωση.
Ειδικός SEO

Ελέγξτε τα templates πίσω από τις πιο αργές σελίδες σας και παραδώστε τους επισημασμένους πόρους στην ομάδα ανάπτυξης.

Συχνές Ερωτήσεις

Πώς μπορώ να ξεμπλοκάρω ένα stylesheet;

Για μη κρίσιμο CSS, προσθέστε `media="print"` και `onload="this.media='all'"`. Για κρίσιμο CSS, ενσωματώστε το inline σε ετικέτες `<style>`.

Μπορώ απλώς να κάνω defer σε όλα τα scripts μου;

Όχι πάντα — scripts που πρέπει να τρέξουν πριν από την πρώτη απόδοση, polyfills απαραίτητα για το layout και inline scripts δεν μπορούν πάντα να περιμένουν. Ελέγξτε τα ανάλογα με την επίδρασή τους.

Τι πρόβλημα έχει το document.write;

Αναγκάζει το πρόγραμμα περιήγησης να διακόψει την ανάλυση, και το Chrome μπορεί να μπλοκάρει τα scripts που εισάγει σε αργές συνδέσεις. Εισαγάγετε στοιχεία με μεθόδους DOM αντ' αυτού.

Γιατί επισημαίνονται οι inline event handlers;

Handlers όπως `onclick="…"` αναμειγνύουν συμπεριφορά με το markup και απαιτούν `unsafe-inline` σε μια Content-Security-Policy. Προσθέστε listeners από αρχείο script αντ' αυτού.

Τι γίνεται με τα widgets τρίτων;

Φορτώστε τα με `<script async>` ή μέσω ενός tag manager με αναβαλλόμενη φόρτωση. Ακόμη καλύτερα, φορτώστε widgets κάτω από την πρώτη οθόνη μόνο κατά το scroll ή την αλληλεπίδραση.

Σχετικά Εργαλεία στη Ανάλυση SEO

Δείτε όλα τα εργαλεία Ανάλυση SEO