ProHoster > Blog > διαχείριση > Προφόρτωση, προφόρτωση και άλλες ετικέτες

Προφόρτωση, προφόρτωση και άλλες ετικέτες

Υπάρχει πολλούς τρόπους για τη βελτίωση της απόδοσης ιστού. Ένα από αυτά είναι η προφόρτωση περιεχομένου που θα χρειαστεί αργότερα. Προεπεξεργασία CSS, προαπόδοση πλήρους σελίδας ή ανάλυση ονόματος τομέα. Κάνουμε τα πάντα εκ των προτέρων και, στη συνέχεια, εμφανίζουμε αμέσως το αποτέλεσμα! Ακούγεται καλό.

Αυτό που είναι ακόμα πιο ωραίο είναι ότι εφαρμόζεται πολύ απλά. Πέντε ετικέτες δώστε στο πρόγραμμα περιήγησης μια εντολή να εκτελέσει προκαταρκτικές ενέργειες:

<link rel="prefetch" href="/el/style.css" as="style" />
<link rel="preload" href="/el/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />


Ας εξηγήσουμε εν συντομία τι κάνουν και πότε να τα χρησιμοποιούν.

Πηδάω σε: προφόρτιση · προσκόμισης · προσύνδεση · dns-prefetch · προαπόδοση

προφόρτιση

<link rel= "preload"> λέει στο πρόγραμμα περιήγησης να φορτώσει και να αποθηκεύσει προσωρινά έναν πόρο (όπως ένα σενάριο ή ένα φύλλο στυλ) το συντομότερο δυνατό. Αυτό είναι χρήσιμο όταν απαιτείται ένας πόρος λίγα δευτερόλεπτα μετά τη φόρτωση της σελίδας - και θέλετε να επιταχύνετε τη διαδικασία.

Το πρόγραμμα περιήγησης δεν κάνει τίποτα με τον πόρο μετά τη φόρτωση. Τα σενάρια δεν εκτελούνται, τα φύλλα στυλ δεν εφαρμόζονται. Ο πόρος απλώς αποθηκεύεται στην κρυφή μνήμη και διατίθεται αμέσως κατόπιν αιτήματος.

σύνταξη

<link rel="preload" href="/el/style.css" as="style" />

href δείχνει τον πόρο που θέλετε να κατεβάσετε.

as μπορεί να είναι οτιδήποτε μπορεί να ληφθεί στο πρόγραμμα περιήγησης:

  • style για φύλλα στυλ,
  • script για σενάρια,
  • font για γραμματοσειρές,
  • fetch για πόρους που φορτώνονται χρησιμοποιώντας fetch() ή XMLHttpRequest,
  • δείτε την πλήρη λίστα στο MDN.

Είναι σημαντικό να προσδιορίσετε το χαρακτηριστικό as – αυτό βοηθά το πρόγραμμα περιήγησης να ιεραρχεί σωστά και να προγραμματίζει τις λήψεις.

Πότε να χρησιμοποιήσετε

Χρησιμοποιήστε την προφόρτωση όταν ο πόρος είναι απαραίτητος στο πολύ εγγύς μέλλον. Για παράδειγμα:

  • Μη τυπικές γραμματοσειρές από εξωτερικό αρχείο: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    Από προεπιλογή comic-sans.woff2 θα ξεκινήσει η φόρτωση μόνο μετά τη λήψη και την ανάλυση index.css. Για να αποφύγετε την τόσο μεγάλη αναμονή, μπορείτε να κάνετε λήψη της γραμματοσειράς νωρίτερα χρησιμοποιώντας <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Εάν διαχωρίζετε τα στυλ σας σύμφωνα με την προσέγγιση Κρίσιμο CSS σε δύο μέρη, κρίσιμο (για άμεση απόδοση) και μη κρίσιμο: 
    <style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

    Με αυτήν την προσέγγιση, τα μη κρίσιμα στυλ θα ξεκινήσουν να φορτώνονται μόνο όταν εκτελείται η JavaScript, κάτι που μπορεί να συμβεί λίγα δευτερόλεπτα μετά την απόδοση. Αντί να περιμένετε, χρησιμοποιήστε το JS <link rel= "preload">για να ξεκινήσετε τη λήψη νωρίτερα:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/el/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

Μην κάνετε υπερβολική χρήση της προφόρτωσης. Εάν φορτώσετε τα πάντα στη σειρά, ο ιστότοπος δεν θα επιταχύνει ως δια μαγείας, αντίθετα, θα εμποδίσει το πρόγραμμα περιήγησης να προγραμματίσει σωστά τη δουλειά του.

Δεν πρέπει να συγχέεται με την προαναφορά. Μη χρησιμοποιεις <link rel= "preload">, εάν δεν χρειάζεστε τον πόρο αμέσως μετά τη φόρτωση της σελίδας. Εάν το χρειάζεστε αργότερα, για παράδειγμα για την επόμενη σελίδα, χρησιμοποιήστε το <link rel= "prefetch">.

Λεπτομέρειες

Αυτή είναι μια υποχρεωτική ετικέτα να εκτελεστεί από το πρόγραμμα περιήγησης (αν το υποστηρίζει), σε αντίθεση με όλες τις άλλες ετικέτες που σχετίζονται με την προφόρτωση. Το πρόγραμμα περιήγησης πρέπει να πραγματοποιήσει λήψη του πόρου που καθορίζεται στο <link rel="preload">. Σε άλλες περιπτώσεις μπορεί να αγνοήσει την προφόρτωση, για παράδειγμα εάν εκτελείται σε αργή σύνδεση.

Προτεραιότητες. Τα προγράμματα περιήγησης συνήθως εκχωρούν διαφορετικές προτεραιότητες σε διαφορετικούς πόρους (στυλ, σενάρια, γραμματοσειρές κ.λπ.) προκειμένου να φορτωθούν πρώτα οι πιο σημαντικοί πόροι. Σε αυτήν την περίπτωση, το πρόγραμμα περιήγησης καθορίζει την προτεραιότητα ανά χαρακτηριστικό as. Για το πρόγραμμα περιήγησης Chrome μπορείτε να δείτε πίνακας πλήρους προτεραιότητας.

Προφόρτωση, προφόρτωση και άλλες ετικέτες

προσκόμισης

<link rel= "prefetch"> ζητά από το πρόγραμμα περιήγησης να πραγματοποιήσει λήψη και προσωρινή αποθήκευση ενός πόρου (όπως ένα σενάριο ή ένα φύλλο στυλ) στο παρασκήνιο. Η φόρτωση πραγματοποιείται με χαμηλή προτεραιότητα, επομένως δεν παρεμβαίνει σε πιο σημαντικούς πόρους. Αυτό είναι χρήσιμο εάν ο πόρος είναι απαραίτητος στην επόμενη σελίδα και θέλετε να τον αποθηκεύσετε στην προσωρινή μνήμη εκ των προτέρων.

Και εδώ, το πρόγραμμα περιήγησης δεν κάνει τίποτα με τον πόρο μετά τη φόρτωση. Τα σενάρια δεν εκτελούνται, τα φύλλα στυλ δεν εφαρμόζονται. Ο πόρος απλώς αποθηκεύεται στην κρυφή μνήμη και διατίθεται αμέσως κατόπιν αιτήματος.

σύνταξη

<link rel="prefetch" href="/el/style.css" as="style" />

href δείχνει τον πόρο που θέλετε να κατεβάσετε.

as μπορεί να είναι οτιδήποτε μπορεί να ληφθεί στο πρόγραμμα περιήγησης:

  • style για φύλλα στυλ,
  • script για σενάρια,
  • font για γραμματοσειρές,
  • fetch για πόρους που φορτώνονται χρησιμοποιώντας fetch() ή XMLHttpRequest,
  • δείτε την πλήρη λίστα στο MDN.

Είναι σημαντικό να προσδιορίσετε το χαρακτηριστικό as - αυτό βοηθά το πρόγραμμα περιήγησης να ιεραρχεί σωστά και να προγραμματίζει τις λήψεις.

Πότε να χρησιμοποιήσετε

Για να φορτώσετε πόρους από άλλες σελίδες, εάν χρειάζεστε έναν πόρο από άλλη σελίδα και θέλετε να τον προφορτώσετε για να επιταχύνετε την απόδοση αυτής της σελίδας. Για παράδειγμα:

  • Έχετε ένα ηλεκτρονικό κατάστημα και το 40% των χρηστών εγκαταλείπουν την αρχική σελίδα για τη σελίδα προϊόντος. Χρήση <link rel= "prefetch">, φόρτωση αρχείων CSS και JS για απόδοση σελίδων προϊόντων.
  • Έχετε μια εφαρμογή μιας σελίδας και διαφορετικές σελίδες φορτώνουν διαφορετικά πακέτα. Όταν ένας χρήστης επισκέπτεται μια σελίδα, μπορούν να προφορτωθούν πακέτα για όλες τις σελίδες στις οποίες συνδέεται.

Είναι πιθανό ότι αυτή η ετικέτα μπορεί να χρησιμοποιηθεί με ασφάλεια σε οποιοδήποτε βαθμό.. Τα προγράμματα περιήγησης συνήθως προγραμματίζουν την προφόρτωση με τη χαμηλότερη προτεραιότητα, επομένως δεν ενοχλεί κανέναν. Απλώς έχετε κατά νου ότι καταναλώνει την επισκεψιμότητα των χρηστών, η οποία μπορεί να κοστίσει χρήματα.

Όχι για επείγοντα αιτήματα. Μη χρησιμοποιεις <link rel= "prefetch">, όταν ο πόρος χρειάζεται σε λίγα δευτερόλεπτα. Σε αυτή την περίπτωση, χρησιμοποιήστε <link rel= "preload">.

Λεπτομέρειες

Προαιρετική ετικέτα. Το πρόγραμμα περιήγησης δεν απαιτείται να ακολουθήσει αυτήν την οδηγία· μπορεί να την αγνοήσει, για παράδειγμα, σε αργή σύνδεση.

Προτεραιότητα στο Chrome. Στο Chrome <link rel= "prefetch"> συνήθως εκτελείται με ελάχιστη προτεραιότητα (βλ πίνακας πλήρους προτεραιότητας), δηλαδή αφού φορτώσει όλα τα άλλα.

προσύνδεση

<link rel= "preconnect"> ζητά από το πρόγραμμα περιήγησης να συνδεθεί στον τομέα εκ των προτέρων όταν θέλετε να επιταχύνετε τη ρύθμιση της σύνδεσης στο μέλλον.

Το πρόγραμμα περιήγησης πρέπει να δημιουργήσει μια σύνδεση εάν ανακτά πόρους από έναν νέο τομέα τρίτου μέρους. Για παράδειγμα, εάν φορτώνει γραμματοσειρές Google, γραμματοσειρές React από CDN ή ζητά απάντηση JSON από διακομιστή API.

Η δημιουργία μιας νέας σύνδεσης συνήθως διαρκεί μερικές εκατοντάδες χιλιοστά του δευτερολέπτου. Γίνεται μία φορά, αλλά θέλει ακόμα χρόνο. Εάν έχετε δημιουργήσει μια σύνδεση εκ των προτέρων, θα εξοικονομήσετε χρόνο και θα πραγματοποιήσετε λήψη πόρων από αυτόν τον τομέα πιο γρήγορα.

σύνταξη

<link rel= "preconnect" href="https://api.my-app.com" />

href υποδεικνύει το όνομα τομέα για το οποίο θέλετε να προσδιορίσετε τη διεύθυνση IP. Μπορεί να καθοριστεί με ένα πρόθεμα (https://domain.com) ή χωρίς αυτό (//domain.com).

Πότε να χρησιμοποιήσετε

Χρήση για τομείς που θα χρειαστούν σύντομα για να κατεβάσετε ένα σημαντικό στυλ, σενάριο ή εικόνα από εκεί, αλλά δεν γνωρίζετε ακόμη τη διεύθυνση URL του πόρου. Για παράδειγμα:

  • Η αίτησή σας φιλοξενείται στο my-app.com και κάνει αιτήσεις AJAX σε api.my-app.com: Δεν γνωρίζετε εκ των προτέρων τα συγκεκριμένα ερωτήματα γιατί γίνονται δυναμικά από JS. Εδώ είναι πολύ σωστό να χρησιμοποιήσετε μια ετικέτα για προ-σύνδεση στον τομέα.
  • Η αίτησή σας φιλοξενείται στο my-app.com και χρησιμοποιεί γραμματοσειρές Google. Η λήψη τους γίνεται σε δύο βήματα: πρώτον, γίνεται λήψη του αρχείου CSS από τον τομέα fonts.googleapis.com, τότε αυτό το αρχείο ζητά γραμματοσειρές με fonts.gstatic.com. Δεν μπορείτε να ξέρετε από ποια συγκεκριμένα αρχεία γραμματοσειρών προέρχονται fonts.gstatic.com θα χρειαστείτε μέχρι να φορτώσετε το αρχείο CSS, οπότε μπορούμε να κάνουμε μόνο μια προκαταρκτική σύνδεση εκ των προτέρων.

Χρησιμοποιήστε αυτήν την ετικέτα για να επιταχύνετε λίγο κάποιο σενάριο τρίτου μέρους ή στυλ λόγω προκαθορισμένης σύνδεσης.

Μην κάνετε υπερβολική χρήση. Η δημιουργία και η διατήρηση μιας σύνδεσης είναι μια δαπανηρή λειτουργία τόσο για τον πελάτη όσο και για τον διακομιστή. Χρησιμοποιήστε αυτήν την ετικέτα για το πολύ 4-6 τομείς.

Λεπτομέρειες

Προαιρετική ετικέτα. Το πρόγραμμα περιήγησης δεν απαιτείται να ακολουθήσει αυτήν την οδηγία και μπορεί να την αγνοήσει, για παράδειγμα, εάν έχουν ήδη πραγματοποιηθεί πολλές συνδέσεις ή σε κάποια άλλη περίπτωση.

Τι περιλαμβάνει η διαδικασία σύνδεσης;. Για να συνδεθείτε σε κάθε ιστότοπο, το πρόγραμμα περιήγησης πρέπει να κάνει τα εξής:

  • Ανάλυση DNS. Εύρεση διεύθυνσης IP διακομιστή (216.58.215.78) για το καθορισμένο όνομα τομέα (google.com).
  • TCP χειραψία. Ανταλλάξτε πακέτα (πελάτης → διακομιστής → πελάτης) για να ξεκινήσετε μια σύνδεση TCP με τον διακομιστή.
  • Χειραψία TLS (μόνο ιστότοποι HTTPS). Δύο γύροι ανταλλαγής πακέτων (πελάτης → διακομιστής → πελάτης → διακομιστής → πελάτης) για την έναρξη μιας ασφαλούς περιόδου λειτουργίας TLS.

Σημείωση: Το HTTP/3 θα βελτιώσει και θα επιταχύνει τον μηχανισμό χειραψίας, αλλά είναι ακόμη πολύ μακριά.

dns-prefetch

<link rel= "dns-prefetch"> ζητά από το πρόγραμμα περιήγησης να εκτελέσει εκ των προτέρων ανάλυση DNS για τον τομέα, εάν θα συνδεθείτε σύντομα σε αυτόν και θέλετε να επιταχύνετε την αρχική σύνδεση.

Το πρόγραμμα περιήγησης πρέπει να καθορίσει τη διεύθυνση IP του τομέα εάν θα ανακτήσει πόρους από έναν νέο τομέα τρίτου μέρους. Για παράδειγμα, φόρτωση γραμματοσειρών Google, γραμματοσειρών React από CDN ή αίτημα απάντησης JSON από διακομιστή API.

Για κάθε νέο τομέα, η ανάλυση εγγραφής DNS διαρκεί συνήθως περίπου 20-120 ms. Αυτό επηρεάζει μόνο τη φόρτωση του πρώτου πόρου από έναν δεδομένο τομέα, αλλά εξακολουθεί να εισάγει μια καθυστέρηση. Εάν εκτελέσουμε ανάλυση DNS εκ των προτέρων, θα εξοικονομήσουμε χρόνο και θα φορτώσουμε τον πόρο πιο γρήγορα.

σύνταξη

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href υποδεικνύει το όνομα τομέα για το οποίο θέλετε να ορίσετε τη διεύθυνση IP. Μπορεί να καθοριστεί με ένα πρόθεμα (https://domain.com) ή χωρίς αυτό (//domain.com).

Πότε να χρησιμοποιήσετε

Χρήση για τομείς που θα χρειαστούν σύντομα να κατεβάσετε πόρους από εκεί για τους οποίους το πρόγραμμα περιήγησης δεν γνωρίζει εκ των προτέρων. Για παράδειγμα:

  • Η αίτησή σας φιλοξενείται στο my-app.com και κάνει αιτήσεις AJAX σε api.my-app.com: Δεν γνωρίζετε εκ των προτέρων τα συγκεκριμένα ερωτήματα γιατί γίνονται δυναμικά από JS. Εδώ είναι πολύ σωστό να χρησιμοποιήσετε μια ετικέτα για προ-σύνδεση στον τομέα.
  • Η αίτησή σας φιλοξενείται στο my-app.com, και χρησιμοποιεί τις γραμματοσειρές Google. Η λήψη τους γίνεται σε δύο βήματα: πρώτον, γίνεται λήψη του αρχείου CSS από τον τομέα fonts.googleapis.com, τότε αυτό το αρχείο ζητά γραμματοσειρές με fonts.gstatic.com. Δεν μπορείτε να ξέρετε από ποια συγκεκριμένα αρχεία γραμματοσειρών προέρχονται fonts.gstatic.com θα το χρειαστείτε μέχρι να φορτώσετε το αρχείο CSS, οπότε μπορούμε να κάνουμε μόνο μια προκαταρκτική σύνδεση εκ των προτέρων.

Χρησιμοποιήστε αυτήν την ετικέτα για να επιταχύνετε λίγο κάποιο σενάριο τρίτου μέρους ή στυλ λόγω προκαθορισμένης σύνδεσης.

Παρακαλούμε σημειώστε παρόμοια χαρακτηριστικά με <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Συνήθως δεν έχει νόημα να τα χρησιμοποιείτε μαζί για έναν τομέα: <link rel= "preconnect"> περιλαμβάνει ήδη <link rel= "dns-prefetch"/> και πολλα ΑΚΟΜΑ. Αυτό μπορεί να δικαιολογηθεί σε δύο περιπτώσεις:

  • Θέλετε να υποστηρίξετε παλαιότερα προγράμματα περιήγησης;. <link rel= "dns-prefetch" /> υποστηριζόμενο από από το IE10 και το Safari 5. <link rel= "preconnect"> υποστηρίχτηκε για λίγο σε Chrome και Firefox, αλλά προστέθηκε μόνο στο Safari στην έκδοση 11.1 και εξακολουθεί να μην υποστηρίζεται σε IE/Edge. Εάν χρειάζεται να υποστηρίξετε αυτά τα προγράμματα περιήγησης, χρησιμοποιήστε το <link rel= "dns-prefetch" /> ως εφεδρική επιλογή για <link rel= "preconnect">.
  • Θέλετε να επιταχύνετε τις συνδέσεις σε περισσότερους από 4-6 τομείς. Ετικέτα <link rel= "preconnect"> Δεν συνιστάται η χρήση με περισσότερους από 4-6 τομείς, καθώς η δημιουργία και η διατήρηση μιας σύνδεσης είναι μια δαπανηρή λειτουργία. <link rel= "dns-prefetch" /> καταναλώνει λιγότερους πόρους, επομένως χρησιμοποιήστε το εάν είναι απαραίτητο.

Λεπτομέρειες

Προαιρετική ετικέτα. Το πρόγραμμα περιήγησης δεν απαιτείται να ακολουθήσει αυτήν την οδηγία, επομένως ενδέχεται να μην εκτελέσει ανάλυση DNS, για παράδειγμα, εάν υπάρχουν πολλές τέτοιες ετικέτες στη σελίδα ή σε κάποια άλλη περίπτωση.

Τι είναι το DNS. Κάθε διακομιστής στο Διαδίκτυο έχει μια μοναδική διεύθυνση IP, η οποία μοιάζει 216.58.215.78. Το όνομα του ιστότοπου συνήθως εισάγεται στη γραμμή διευθύνσεων του προγράμματος περιήγησης (για παράδειγμα, google.com), και οι διακομιστές DNS (System Name Domain) το αντιστοιχούν με τη διεύθυνση IP του διακομιστή (216.58.215.78).

Για να προσδιορίσει μια διεύθυνση IP, το πρόγραμμα περιήγησης πρέπει να ρωτήσει τον διακομιστή DNS. Χρειάζονται 20−120 ms κατά τη σύνδεση σε έναν νέο τομέα τρίτου μέρους.

Το DNS αποθηκεύεται προσωρινά, αν και όχι πολύ αξιόπιστο. Ορισμένα λειτουργικά συστήματα και προγράμματα περιήγησης αποθηκεύουν προσωρινά ερωτήματα DNS: αυτό θα εξοικονομήσει χρόνο σε επαναλαμβανόμενα ερωτήματα, αλλά δεν μπορείτε να βασιστείτε στην προσωρινή αποθήκευση. Στο Linux συνήθως δεν λειτουργεί καθόλου. Το Chrome διαθέτει προσωρινή μνήμη DNS, αλλά διαρκεί μόνο ένα λεπτό. Τα Windows αποθηκεύουν προσωρινά τις απαντήσεις DNS για πέντε ημέρες.

προαπόδοση

<link rel= "prerender"> ζητά από το πρόγραμμα περιήγησης να πραγματοποιήσει λήψη της διεύθυνσης URL και να την εμφανίσει σε μια αόρατη καρτέλα. Όταν ο χρήστης κάνει κλικ στον σύνδεσμο, η σελίδα θα πρέπει να εμφανίζεται αμέσως. Αυτό είναι χρήσιμο εάν είστε βέβαιοι ότι ο χρήστης θα επισκεφθεί μια συγκεκριμένη σελίδα και θέλει να επιταχύνει την εμφάνισή της.

Παρά (ή λόγω) της εξαιρετικής αποτελεσματικότητας αυτής της ετικέτας, το 2019 <link rel= "prerender"> υποστηρίζεται ελάχιστα σε μεγάλα προγράμματα περιήγησης. Δείτε περισσότερες λεπτομέρειες. παρακάτω.

σύνταξη

<link rel="prerender" href="https://my-app.com/pricing" />

href δείχνει στη διεύθυνση URL που θέλετε να ξεκινήσει η απόδοση στο παρασκήνιο.

Πότε να χρησιμοποιήσετε

Όταν είστε πραγματικά σίγουροι ότι ο χρήστης θα μεταβεί σε μια συγκεκριμένη σελίδα. Εάν έχετε ένα «τούνελ» μέσω του οποίου το 70% των επισκεπτών της σελίδας Α πηγαίνει στη σελίδα Β, τότε <link rel= "prerender"> στη σελίδα Α θα βοηθήσει να εμφανιστεί η σελίδα Β πολύ γρήγορα.

Μην κάνετε υπερβολική χρήση. Η προ-απόδοση είναι εξαιρετικά ακριβή όσον αφορά το εύρος ζώνης και τη μνήμη. Μη χρησιμοποιεις <link rel= "prerender"> για περισσότερες από μία σελίδες.

Λεπτομέρειες

Προαιρετική ετικέτα. Το πρόγραμμα περιήγησης δεν απαιτείται να ακολουθήσει αυτήν την οδηγία και μπορεί να την αγνοήσει, για παράδειγμα, σε αργή σύνδεση ή όταν δεν υπάρχει επαρκής ελεύθερη μνήμη.

Για εξοικονόμηση μνήμης Το Chrome δεν κάνει πλήρη απόδοσηΚαι μόνο προφόρτωση NoState. Αυτό σημαίνει ότι το Chrome φορτώνει τη σελίδα και όλους τους πόρους της, αλλά δεν αποδίδει ή εκτελεί JavaScript.

Ο Firefox και το Safari δεν υποστηρίζουν καθόλου αυτήν την ετικέτα. Αυτό δεν παραβιάζει την προδιαγραφή, καθώς τα προγράμματα περιήγησης δεν απαιτείται να ακολουθήσουν αυτήν την οδηγία. αλλά ακόμα λυπημένος. Σφάλμα υλοποίησης Ο Firefox είναι ανοιχτός εδώ και επτά χρόνια. Υπάρχουν αναφορές ότι το Safari δεν υποστηρίζει ούτε αυτή την ετικέτα.

Περίληψη

Χρήση:

  • <link rel= "preload"> - όταν χρειάζεστε έναν πόρο σε λίγα δευτερόλεπτα
  • <link rel= "prefetch"> - όταν χρειάζεστε τον πόρο στην επόμενη σελίδα
  • <link rel= "preconnect"> - όταν γνωρίζετε ότι θα χρειαστείτε έναν πόρο σύντομα, αλλά δεν γνωρίζετε ακόμη την πλήρη διεύθυνση URL του
  • <link rel= "dns-prefetch"> - Ομοίως, όταν γνωρίζετε ότι θα χρειαστείτε έναν πόρο σύντομα, αλλά δεν γνωρίζετε ακόμη την πλήρη διεύθυνση URL του (για παλαιότερα προγράμματα περιήγησης)
  • <link rel= "prerender"> — όταν είστε σίγουροι ότι οι χρήστες θα μεταβούν σε μια συγκεκριμένη σελίδα και θέλετε να επιταχύνετε την εμφάνισή της

Πηγή: www.habr.com

Προσθέστε ένα σχόλιο