Πώς να καθορίσετε την ημερομηνία λήξης της προσωρινής μνήμης. Ενεργοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησης για το Google PageSpeed

Έρικ Μπίντελμαν

Μετάφραση: Vlad Merzhevich

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

Η χρήση μιας διεπαφής προσωρινής μνήμης παρέχει στην εφαρμογή σας τρία πλεονεκτήματα:

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

Η προσωρινή μνήμη εφαρμογών (ή η AppCache) επιτρέπει στον προγραμματιστή να καθορίσει ποια αρχεία θα πρέπει να αποθηκεύσει το πρόγραμμα περιήγησης στην προσωρινή μνήμη και να διαθέσει σε χρήστες εκτός σύνδεσης. Η εφαρμογή σας θα λειτουργεί σωστά ακόμα κι αν ο χρήστης κάνει κλικ στο κουμπί "Ενημέρωση" ενώ βρίσκεται λειτουργία εκτός σύνδεσης.

Αρχείο μανιφέστου προσωρινής αποθήκευσης

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

Βοήθεια για το αρχείο Manifest

Για να ενεργοποιήσετε την προσωρινή μνήμη της εφαρμογής, συμπεριλάβετε το χαρακτηριστικό manifest στην ετικέτα .

...

Το χαρακτηριστικό manifest πρέπει να βρίσκεται σε κάθε σελίδα της εφαρμογής σας που θέλετε να αποθηκεύσετε προσωρινά. Το πρόγραμμα περιήγησης δεν αποθηκεύει προσωρινά μια σελίδα εκτός εάν περιέχει ένα χαρακτηριστικό δήλωσης (και εκτός εάν αναφέρεται ρητά στο αρχείο δήλωσης). Αυτό σημαίνει ότι οποιαδήποτε σελίδα με το χαρακτηριστικό manifest που επισκέπτεται ο χρήστης θα προστεθεί έμμεσα στην κρυφή μνήμη της εφαρμογής. Με αυτόν τον τρόπο δεν χρειάζεται να καταχωρίσετε όλες τις σελίδες στο μανιφέστο.

Το χαρακτηριστικό manifest καθορίζει μια απόλυτη ή σχετική διεύθυνση URL, αλλά απόλυτη διαδρομήπρέπει να είναι εντός της ίδιας διαδικτυακής εφαρμογής. Το αρχείο δήλωσης μπορεί να έχει οποιαδήποτε επέκταση, αλλά πρέπει να καθορίσετε τον σωστό τύπο MIME (δείτε παρακάτω).

...

Το αρχείο μανιφέστου πρέπει να εξυπηρετείται με το κείμενο/cache-manifest τύπου MIME . Ίσως χρειαστεί να προσθέσετε έναν προσαρμοσμένο τύπο αρχείου στον διακομιστή web ή μέσω της ρύθμισης .htaccess. Για παράδειγμα, για να διαμορφώσετε αυτόν τον τύπο MIME στο Apache, προσθέστε στο αρχείο διαμόρφωσης:

AddType text/cache-manifest .appcache

Ή στο αρχείο app.yaml στη διεύθυνση Εφαρμογή GoogleΚινητήρας:

Url: /mystaticdir/(.*\.appcache) static_files: mystaticdir/\1 mime_type: text/cache-manifest upload: mystaticdir/(.*\.appcache)

Δομή αρχείου Manifest

Ένα απλό μανιφέστο μπορεί να μοιάζει κάπως έτσι:

CACHE MANIFEST index.html stylesheet.css images/logo.png scripts/main.js

Αυτό το παράδειγμα αποθηκεύει προσωρινά τα τέσσερα αρχεία που καθορίζονται στο μανιφέστο.

Μερικά πράγματα που πρέπει να σημειώσετε:

  • Η γραμμή CACHE MANIFEST πρέπει να είναι πρώτη και απαιτείται.
  • Τα δεδομένα προσωρινής αποθήκευσης ιστότοπου περιορίζονται στα 5 MB. Ωστόσο, εάν γράφετε μια εφαρμογή για το Chrome Web Store, η χρήση του unlimitedStorage καταργεί αυτόν τον περιορισμό.
  • εάν δεν είναι δυνατή η λήψη του αρχείου δήλωσης ή του πόρου που καθορίζεται σε αυτό, ολόκληρη η διαδικασία ενημέρωσης της προσωρινής μνήμης θα αποτύχει, το πρόγραμμα περιήγησης θα χρησιμοποιήσει παλιά κρυφή μνήμηεφαρμογές.

Ας δούμε ένα πιο περίπλοκο παράδειγμα:

CACHE MANIFEST # 2010-06-18:v2 # Ρητά αποθηκευμένες κύριες εγγραφές CACHE: /favicon.ico index.html stylesheet.css images/logo.png scripts/main.js # Πόροι που θα χρειαστεί ο χρήστης στο διαδίκτυο ΔΙΚΤΥΟ: login.php /myapi http://api.twitter.com # static.html θα χρησιμοποιηθεί εάν το main.py δεν είναι διαθέσιμο # offline.jpg θα χρησιμοποιηθεί στη θέση όλων των εικόνων στις εικόνες/large/ # offline.html θα χρησιμοποιηθεί θέση όλων των αρχείων HTML FALLBACK: /main.py /static.html images/large/ images/offline.jpg *.html /offline.html

Οι γραμμές που ξεκινούν με κατακερματισμό (#) είναι σχόλια, αλλά μπορούν επίσης να εξυπηρετήσουν και άλλο σκοπό. Η προσωρινή μνήμη της εφαρμογής ενημερώνεται μόνο όταν αλλάξει το αρχείο δήλωσης. Για παράδειγμα, κατά την επεξεργασία εικόνων ή Λειτουργίες JavaScript, αυτές οι αλλαγές δεν θα αποθηκευτούν ξανά στην κρυφή μνήμη. Πρέπει να αλλάξετε το αρχείο δήλωσης για να πείτε στο πρόγραμμα περιήγησης να ενημερώσει τα αρχεία στη μνήμη cache. Δημιουργήστε ένα σχόλιο με τον αριθμό έκδοσης, άθροισμα ελέγχουή ημερομηνία είναι ένας τρόπος για να διασφαλίσετε ότι οι χρήστες χρησιμοποιούν τελευταία έκδοση. Μπορείτε επίσης να ενημερώσετε μέσω προγραμματισμού τη μνήμη cache όταν μια νέα έκδοση είναι έτοιμη, όπως περιγράφεται στην ενότητα για την ενημέρωση της προσωρινής μνήμης.

Ένα μανιφέστο μπορεί να έχει τρεις διαφορετικές ενότητες: CACHE, NETWORK και FALLBACK.

CACHE: Αυτή είναι η τυπική ενότητα για εγγραφή. Τα αρχεία που παρατίθενται σε αυτό το μπλοκ (ή αμέσως μετά το CACHE MANIFEST) θα αποθηκευτούν ρητά στην κρυφή μνήμη μετά τη λήψη τους για πρώτη φορά.

ΔΙΚΤΥΟ: Τα αρχεία που παρατίθενται σε αυτήν την ενότητα είναι πόροι που απαιτούν σύνδεση με τον διακομιστή. Όλα τα αιτήματα σε αυτούς τους πόρους παρακάμπτουν την κρυφή μνήμη, ακόμα κι αν ο χρήστης είναι εκτός σύνδεσης. Μπορείτε να χρησιμοποιήσετε το * για να καθορίσετε ένα μοτίβο.

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

Αυτές οι ενότητες μπορούν να παρατίθενται με οποιαδήποτε σειρά και κάθε ενότητα μπορεί να εμφανίζεται περισσότερες από μία φορές.

Η ακόλουθη δήλωση ορίζει τις "καθολικές" σελίδες (offline.html) που θα εμφανίζονται όταν ένας χρήστης προσπαθεί να αποκτήσει πρόσβαση στη ρίζα του ιστότοπου ενώ είναι εκτός σύνδεσης. Αναφέρει επίσης ότι όλοι οι άλλοι πόροι (όπως σε απομακρυσμένο ιστότοπο) απαιτούν σύνδεση στο Διαδίκτυο.

CACHE MANIFEST # 2010-06-18:v3 # Ρητά αποθηκευμένες καταχωρήσεις στην κρυφή μνήμη index.html css/style.css # offline.html θα εμφανίζονται σε λειτουργία εκτός σύνδεσης FALLBACK: / /offline.html # Όλοι οι άλλοι πόροι (συμπεριλαμβανομένων των τοποθεσιών) απαιτούν σύνδεση στο διαδίκτυο ΔΙΚΤΥΟ σύνδεσης: * # Πρόσθετοι πόροι στην κρυφή μνήμη CACHE: images/logo1.png images/logo2.png images/logo3.png

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

Ενημέρωση προσωρινής μνήμης

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

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

Κατάσταση προσωρινής μνήμης

Το αντικείμενο window.applicationCache είναι δικό σας προγραμματική πρόσβασηστην προσωρινή μνήμη του προγράμματος περιήγησης. Η ιδιότητα status χρησιμοποιείται για τον έλεγχο της τρέχουσας κατάστασης της κρυφής μνήμης.

Var appCache = window.applicationCache; διακόπτης (appCache.status) ( case appCache.UNCACHED: // UNCACHED == 0 επιστροφή "UNCACHED"; break; case appCache.IDLE: // IDLE == 1 επιστροφή "IDLE"; break; case appCache.CHECKING: // ΕΛΕΓΧΟΣ == 2 επιστροφή "ΕΛΕΓΧΟΣ" appCache. DOWNLOADING == 3 επιστροφή appCache. ΑΓΝΩΣΤΗ ΚΑΤΑΣΤΑΣΗ CACHE"·

Για αναβάθμιση λογισμικού cache, η applicationCache.update() καλείται πρώτα. Θα προσπαθήσει να ενημερώσει τη μνήμη cache του χρήστη (η οποία απαιτεί την αλλαγή του αρχείου δήλωσης). Τέλος, όταν το applicationCache.status βρίσκεται σε κατάσταση UPDATEREADY, η κλήση της applicationCache.swapCache() θα ενημερώσει την παλιά κρυφή μνήμη στη νέα.

Var appCache = window.applicationCache; appCache.update(); // Προσπάθεια ενημέρωσης της προσωρινής μνήμης του χρήστη... εάν (appCache.status == window.applicationCache.UPDATEREADY) ( appCache.swapCache(); // Επιτυχής, αλλαγή σε νέα κρυφή μνήμη }

Η χρήση της ενημέρωσης() και της swapCache() δεν χρησιμεύει για την ενημέρωση πόρων στον χρήστη. Αυτή η ροή απλώς λέει στο πρόγραμμα περιήγησης να ελέγξει για το νέο μανιφέστο, να πραγματοποιήσει λήψη του καθορισμένου ενημερωμένου περιεχομένου και να συμπληρώσει ξανά τη μνήμη cache της εφαρμογής. Έτσι, η σελίδα γίνεται λήψη από τον διακομιστή δύο φορές, την πρώτη φορά γεμίζοντας την κρυφή μνήμη της νέας εφαρμογής και τη δεύτερη ενημέρωση του περιεχομένου της σελίδας. Καλα ΝΕΑ: Μπορείτε να αποφύγετε αυτήν τη διπλή λήψη. Για να ενημερώσετε τον χρήστη με μια νέα έκδοση του ιστότοπού σας, ρυθμίστε την παρακολούθηση για το συμβάν που είναι έτοιμο για ενημέρωση κατά τη λήψη της σελίδας.

// Ελέγξτε εάν η νέα κρυφή μνήμη είναι διαθέσιμη κατά τη φόρτωση της σελίδας window.addEventListener("load", function(e) ( window.applicationCache.addEventListener("updateready", function(e) ( if (window.applicationCache.status = = παράθυρο applicationCache.UPDATEREADY) ( // Το πρόγραμμα περιήγησης κατεβάζει μια νέα κρυφή μνήμη // Την αντικαθιστά και ενημερώνει τη σελίδα window.applicationCache.swapCache(); if (confirm("Μια νέα έκδοση αυτού του ιστότοπου είναι διαθέσιμη. Φόρτωση;" )) ( window.location.reload( ); ) ) else ( // Το μανιφέστο δεν έχει αλλάξει, τίποτα νέο στον διακομιστή ) ), false ), false);

Εκδηλώσεις AppCache

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

Συνάρτηση handleCacheEvent(e) ( //... ) συνάρτηση handleCacheError(e) (ειδοποίηση(Σφάλμα: Αποτυχία ενημέρωσης της προσωρινής μνήμης!"); // Εκτελέστηκε μετά την πρώτη αποθήκευση στην προσωρινή μνήμη του μανιφέστου appCache.addEventListener("cached", handleCacheEvent, false ); handleCacheEvent, false); λήψη του manifest appCache.addEventListener("noupdate", handleCacheEvent, false ; , false); // Εκτελείται όταν έχουν γίνει πρόσφατα λήψη των πόρων δήλωσης appCache.addEventListener("updateready", handleCacheEvent, false);

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

Θέλω να καταλάβω τη συμβουλή που μου δίνει σε αυτό σχετικά με την Google: Χρησιμοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησής σας! Λοιπόν, ας προσπαθήσουμε να το λύσουμε!

Επεξηγήσεις από την Google:Εάν καθορίσετε την ημερομηνία ή την ημερομηνία λήξης των στατικών πόρων στις κεφαλίδες HTTP, το πρόγραμμα περιήγησης θα φορτώσει προηγουμένως ληφθέντες πόρους από τοπικός δίσκος, όχι από το Διαδίκτυο.

Η λύση σε αυτό το ζήτημα είναι να εισαγάγετε κώδικα στο αρχείο .htaccess που θα διαχειρίζεται την προσωρινή μνήμη στο πρόγραμμα περιήγησης του χρήστη και θα υποδεικνύει πόσο χρόνο θα πρέπει να αποθηκευτούν αυτά τα δεδομένα. Εδώ είναι ο κώδικας που έβαλα στον εαυτό μου, κατόπιν συμβουλής άλλων webmasters:

# caching στο πρόγραμμα περιήγησης από την πλευρά του χρήστη ExpiresActive Στις ExpiresΠροεπιλογή "πρόσβαση 7 ημέρες" ExpiresByType εφαρμογή/javascript "πρόσβαση συν 1 έτος" ExpiresByType κείμενο/javascript "πρόσβαση συν 1 έτος" ExpiresByType κείμενο/css "πρόσβαση συν 1 έτος" ExpiresByType συν κείμενο/html ημέρα "λήξη" /x-javascript "πρόσβαση 1 έτος" ExpiresByType εικόνα/gif "πρόσβαση συν 1 έτος" ExpiresByType εικόνα/jpeg "πρόσβαση συν 1 έτος" ExpiresByType εικόνα/png "πρόσβαση συν 1 έτος" ExpiresByType εικόνα/jpg "πρόσβαση συν 1 έτος" Λήξη ByTy εικόνα/εικονίδιο x "πρόσβαση 1 έτος" Εφαρμογή ExpiresByType/x-shockwave-flash "πρόσβαση 1 έτος"# Cache-Control # 30 μέρες # 30 μέρες Σύνολο κεφαλίδων Cache-Control "max-age=2592000, public"# 2 ημέρες Σύνολο κεφαλίδων Cache-Control "max-age=172800, public, must-revalidate"# 1 ημέρα Σύνολο κεφαλίδων Cache-Control "max-age=172800, private, must-revalidate" # χρησιμοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησης FileETag MTime Size ExpiresActive στο ExpiresΠροεπιλογή "πρόσβαση συν 1 έτος" #Απαγόρευση αποστολής κεφαλίδων Vary HTTP σε προγράμματα περιήγησης της οικογένειας MSIE BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary

Όπως μπορείτε να δείτε, η λίστα είναι εντυπωσιακή, υπάρχουν κυρίως αρχεία στυλ και σενάρια. Ίσως όλα αυτά να μην επιταχύνουν τόσο τον ιστότοπο, αλλά θέλω να το καταλάβω κατ' αρχήν.

Οι άνθρωποι γράφουν ότι δεν υποστηρίζουν όλα τα hosting αυτή τη λειτουργία σε επίπεδο διακομιστή, ίσως και η φιλοξενία μου. έγραψα σε τεχνική υποστήριξηκαι άρχισε να περιμένει απάντηση. Καμία απάντηση ακόμα :(

Μόλις απάντησα μετά από ένα άλλο μήνυμα μου. Η απάντηση ήταν:

Καλή μέρα!

Η κρυφή μνήμη λειτουργεί όπως θα έπρεπε, δεν αποθηκεύονται προσωρινά μόνο οι διαγραμμένες βιβλιοθήκες που έχουν ληφθεί από το Twitter, το Twimg κ.λπ. Από όσο μπορείτε να δείτε, όλα τα άλλα είναι καλά.

Λοιπόν, προς το παρόν θα πιστεύω ότι όλα αυτά είναι αλήθεια. Έχετε κάποια σκέψη για αυτό;Περιέγραψα μια από τις λύσεις σε αυτό το πρόβλημα στο...

ΣΥΜΒΟΥΛΕΣ WEBMASTER:Η ικανότητα να κερδίσετε χρήματα στο Διαδίκτυο είναι μόνο η μισή μάχη, η άλλη μισή είναι η ικανότητα να εξαργυρώνετε ΚΕΡΔΟΦΟΡΑ το ηλεκτρονικό χρήμα. Ακολουθεί μια λίστα με υπεράκτιες τραπεζικές κάρτες στις οποίες μπορείτε να κάνετε ανάληψη χρημάτων και στη συνέχεια να αποσύρετε ευκρινείς λογαριασμούς από αυτές:

1. Payoneer- Το πιο δημοφιλές σύστημα πληρωμών στον κόσμο για ελεύθερους επαγγελματίες. Κάρτες εκδόσεων, που βρίσκονται στις Η.Π.Α.

2. EpayService- Το αμερικανικό σύστημα πληρωμών, πολύ δημοφιλές σε πολλές χώρες, παρέχει δωρεάν κάρτα MasterCard στον ΕΒΡΟ για κατοίκους της ΚΑΚ και της Ευρώπης.

3. Skrill- Το μόνο σύστημα πληρωμών που λειτουργεί με κρυπτονομίσματα και ταυτόχρονα εκδίδει δωρεάν τραπεζικές κάρτες MasterCard.

4. AdvCash- Η υπεράκτια τράπεζα βρίσκεται στο Μπελίζ, μπορείτε να ανοίξετε λογαριασμό σε δολάρια, ευρώ, λίρες και ρούβλια.

5. Payeer- Η έδρα αυτού σύστημα πληρωμήςβρίσκεται στη Γεωργία, μπορείτε επίσης να ανοίξετε λογαριασμό σε δολάρια, ευρώ και ρούβλια.


Τομέας RU - 99 RUR
Τομέας RF - 99 RUR

Ιγκόρ. Ενημέρωση: 21 Νοεμβρίου 2017.

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

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

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

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

Ας υποθέσουμε ότι έχουμε την ευκαιρία να εκκινήσουμε έναν μηχανισμό που θα μας επιτρέπει να αποθηκεύουμε αντίγραφα των στοιχείων σελίδας απευθείας στο πρόγραμμα περιήγησης ιστού του χρήστη που τα επισκέπτεται. Στη συνέχεια, με κάθε επόμενη πρόσβαση, όλα αυτά τα στοιχεία θα λαμβάνονται απευθείας από την προσωρινή μνήμη του προγράμματος περιήγησης του επισκέπτη (), δηλαδή, από ειδικό φάκελο, που βρίσκεται στον σκληρό δίσκο του υπολογιστή του.

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

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

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

Επομένως, με βάση τα παραπάνω, πρέπει να διασφαλίσουμε την έξοδο μιας από τις κεφαλίδες Last-Modified και ETag, καθώς και ένα από τα ζεύγος Expires ή Cache-Control: max-age. Για λόγους σαφήνειας και επέκτασης της γκάμα, ας εξετάσουμε διάφορες επιλογές.

Παραλλαγές κώδικα για τη διαχείριση της προσωρινής μνήμης χρησιμοποιώντας τις κεφαλίδες Last-Modified, Expires και Cache-Control

Εάν η φιλοξενία σας έχει ήδη ρυθμιστεί ώστε να εξάγει την ίδια Τελευταία Τροποποίηση, τότε η μισή δουλειά έχει ολοκληρωθεί (παρεμπιπτόντως, ελέγξτε για την παρουσία αυτής της σημαντικής κεφαλίδας, συμπεριλαμβανομένου στη λίστα τους ένα εργαλείο για τον έλεγχο της απόκρισης του διακομιστή από το Yandex). Αν όχι, τότε είναι πολύ εύκολο να το κάνετε γράφοντας μερικές γραμμές στο ίδιο αναντικατάστατο .htaccess:

RewriteRule .* - RewriteRule .* -

Είναι αλήθεια ότι αυτή η μέθοδος θα λειτουργήσει, και πάλι, υπό την προϋπόθεση ότι έχετε έναν "καθαρό Apache" (αλλά αυτή είναι ακριβώς η περίπτωση που εξετάζουμε). Θα υποθέσουμε ότι η κεφαλίδα Last-Modified, η τιμή της οποίας, παρεμπιπτόντως, θα εμφανίζει την ημερομηνία τελευταία αλλαγή, διαμορφώθηκε.

Τώρα είναι η σειρά του Cache-Control με την παράμετρο max-age, η τιμή της οποίας θα καθορίσει την περίοδο αποθήκευσης της κρυφής μνήμης για κάθε συγκεκριμένο στατικό αντικείμενο. Η ενότητα έρχεται στη σκηνή κεφαλίδες mod, ο κώδικας του οποίου θα πρέπει να εισαχθεί στο .htaccess:

#disable caching

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

Ο χρόνος διατήρησης της κρυφής μνήμης προσδιορίζεται χρησιμοποιώντας την παράμετρο μέγιστη ηλικία, η τιμή του ορίζεται σε δευτερόλεπτα. Χάρη στα σχόλια (τα οποία, παρεμπιπτόντως, μπορείτε να διαγράψετε με ασφάλεια) μετά το σύμβολο κατακερματισμού "#", νομίζω ότι η βάση αυτής της κατασκευής είναι σαφής.

Ωστόσο, αντί για κεφαλίδες mod είναι πολύ πιθανό να χρησιμοποιήσετε τη μονάδα το mod λήγει, εμφανίζοντας την κεφαλίδα Expires (η οποία, σύμφωνα με την ίδια την Google, είναι προτιμότερη γιατί έχει ευρύτερη υποστήριξη). Σε αυτήν την περίπτωση, το τμήμα κώδικα για να το ενεργοποιήσετε θα είναι ως εξής:

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

Για να το δείτε αυτό, δείτε την ενότητα εικόνας του κώδικα. Εκεί υπέδειξα συγκεκριμένα χρόνο σε διαφορετικές μονάδες: 1 μήνας, 4 εβδομάδες, 30 ημέρες, 43829 λεπτά, 2592000 δευτερόλεπτα.

Είναι σαφές ότι σε ένα μήνα και σε ένα χρόνο μπορεί να υπάρχουν διαφορετική ποσότηταημέρες, εβδομάδες, λεπτά και δευτερόλεπτα, αλλά αυτό δεν είναι σημαντικό αφού χρησιμοποιούνται μέσες τιμές. Παρεμπιπτόντως, για την JS, Αρχεία CSSκαι εικόνες, συνιστάται να ορίσετε μια χρονική περίοδο τουλάχιστον μιας εβδομάδας, αλλά όχι περισσότερο από ένα έτος. Στην περίπτωση αυτή, στην πραγματικότητα, η ημερομηνία του αναμενόμενου τέλους της περιόδου προσωρινής αποθήκευσης αυτής της έκδοσης του αντικειμένου θα υποδεικνύεται ως η τιμή της κεφαλίδας Expires στην απόκριση διακομιστή.

Εκτός από τις ενότητες που αναφέρθηκαν, είναι χρήσιμο να χρησιμοποιείτε επίσης mod setenvif. Το γεγονός είναι ότι τα προγράμματα περιήγησης ιστού της οικογένειας Microsoft InternetΟ Explorer και ορισμένες εκδόσεις του Mazila δεν ανταποκρίνονται σωστά Διακομιστής HTTPΗ κεφαλίδα ποικίλλει, η οποία συμβάλλει επίσης σημαντικά στη διαχείριση της προσωρινής αποθήκευσης. Αυτή η ενότητα σάς επιτρέπει να λύσετε αυτό το πρόβλημα εξαιρώντας το Vary από την απόκριση διακομιστή:

Ως αποτέλεσμα παίρνουμε δύο τελικές επιλογέςρυθμίσεις προσωρινής αποθήκευσης, τις οποίες μπορείτε να ελέγξετε εισάγοντας μία προς μία στο .htaccess (δεν συνιστώ τη χρήση και των δύο ταυτόχρονα):

#cache Αρχεία HTML και HTM για μία ημέρα Σύνολο κεφαλίδων Cache-Control "max-age=43200"#cache CSS, JavaScript και αρχεία κειμένου για μία εβδομάδα Σύνολο κεφαλίδων Cache-Control "max-age=604800"#cache Flash και εικόνες για ένα μήνα Σύνολο κεφαλίδων Cache-Control "max-age=2592000"#disable caching Η κεφαλίδα απορρίφθηκε το Cache-Control BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary

ExpiresActive Στην #προεπιλεγμένη προσωρινή μνήμη για 5 δευτερόλεπτα ExpiresΠροεπιλεγμένη "πρόσβαση συν 5 δευτερόλεπτα" #αποθήκευση φλας και εικόνων για ένα μήνα ExpiresByType εικόνα/εικονίδιο x "πρόσβαση συν 1 μήνα" ExpiresByType εικόνα/jpeg "πρόσβαση συν 4 εβδομάδες" ExpiresByType "εικόνα/ πρόσβαση συν 30 ημέρες" ExpiresByType εικόνα/gif "πρόσβαση συν 43829 λεπτά" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" #caching CSS, JavaScript και αρχεία κειμένου για μία εβδομάδα ExpiresByType8 text/css0 ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" #cache HTML and HTM texts seconds/scontext 204800 seconds " #cache αρχεία XML για δέκα λεπτά ExpiresByType application/xhtml+xml "πρόσβαση συν 600 δευτερόλεπτα" BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary

Να σας υπενθυμίσω για άλλη μια φορά ότι παρά την παρουσία του κοντέινερ IfModule, που διασφαλίζει την ασφάλεια της επεξεργασίας, δεν θα ήταν περιττό να το κάνετε αυτό κάθε φορά που αλλάζετε .htaccess Αντίγραφο ασφαλείαςτην αρχική έκδοση του αρχείου (μπορείτε απλά να αντιγράψετε το περιεχόμενό του και να το αποθηκεύσετε στον υπολογιστή σας) για να μην σας αιφνιδιάσει η ανωτέρα βία σε μια ή την άλλη παραλλαγή.

Κώδικας για τη δημιουργία κεφαλίδων Etag και Expires για τη διαμόρφωση της κρυφής μνήμης

Σε περίπτωση που οι οδηγίες που προτείνονται παραπάνω ξαφνικά δεν λειτουργούν (ακόμα και αν ο "καθαρός" Apache είναι εγκατεστημένος στη φιλοξενία σας), ας δούμε μια άλλη περίπτωση, δηλαδή όταν μερικές κατηγορίες χρησιμοποιούνται ως εργαλεία διαχείρισης προσωρινής αποθήκευσης απαιτούμενες κεφαλίδες Etag και Expires. Όπως θυμάστε, και οι δύο είναι υπεύθυνοι για την έγκαιρη παράδοση των αρχείων από τη μνήμη cache, ξεκινώντας έναν έλεγχο για τη συνάφεια της τρέχουσας έκδοσης.

Αλλά εάν η τιμή Expires εμφανίζει την ημερομηνία της τελευταίας αλλαγής, τότε το ETag χρησιμοποιεί ένα ή άλλο μοναδικό αναγνωριστικό πόρου (πιο συχνά αυτός ο ρόλος παίζεται από την έκδοση του αρχείου). Για να ενεργοποιήσετε το ETag χρειάζεται μόνο να εισαγάγετε μία γραμμή στο ίδιο .htaccess:

Μέγεθος FileETag MTime

Λοιπόν, τότε εφαρμόστε το module mod expires, που είναι ήδη γνωστό σε εμάς. Μπορείτε επίσης να προσθέσετε το mod setenvif, το οποίο, όπως είπα παραπάνω, απαγορεύει το σχηματισμό κεφαλίδων Vary για μια συγκεκριμένη ομάδα προγραμμάτων περιήγησης ιστού για να διασφαλιστεί ο σχηματισμός προσωρινής μνήμης από την πλευρά τους:

Μέγεθος FileETag MTime ExpiresActive στο ExpiresΠροεπιλογή "πρόσβαση συν 1 έτος" BrowserMatch "MSIE" force-no-vary BrowserMatch "Mozilla/4.(2)" force-no-vary

Εδώ χρησιμοποιούμε ένα σύμπλεγμα με ελάχιστους τύπους αντικειμένων που εμπλέκονται, αλλά τα πιο δημοφιλή (CSS, JavaScript και εικόνες), τα οποία θα πρέπει επίσης να επαρκούν για την παροχή μέγιστη αποτελεσματικότηταστην επιτάχυνση τοποθεσίας. Εάν θέλετε, μπορείτε να προσθέσετε άλλους τύπους αρχείων στο σύνολο "jpg|jpeg|gif|png|ico|css|js".

Επιπλέον, στο παραπάνω παράδειγμα κώδικα, όλα τα αρχεία υπόκεινται στην ίδια περίοδο ζωής της κρυφής μνήμης ενός έτους ("πρόσβαση συν 1 έτος"), την οποία προτείνει η Google. Αλλά μπορείτε να καθορίσετε τη δική σας χρονική περίοδο για κάθε ομάδα αντικειμένων, ακολουθώντας το παράδειγμα των περιεχομένων των λειτουργικών μονάδων mod_expires και mod_headers από την προηγούμενη ενότητα του άρθρου.

Έλεγχος της παρουσίας των απαιτούμενων κεφαλίδων στην απόκριση διακομιστή

Αφού επικολλήσετε τον κώδικα στο αρχείο .htaccess, μπορείτε να ελέγξετε εάν οι απαιτούμενες κεφαλίδες περιλαμβάνονται στην απόκριση διακομιστή. Για το σκοπό αυτό μπορείτε να χρησιμοποιήσετε μερικά ηλεκτρονική υπηρεσία, για παράδειγμα, Checkmy.ru, όπου ως πελάτης (User Agent) στέλνοντας ένα αίτημα HTTP στον διακομιστή, επιλέξτε οποιοδήποτε πρόγραμμα περιήγησης και επίσης εισαγάγετε URL πόρων(για παράδειγμα, πήρα το μονοπάτι προς την εικόνα που χρησιμοποιήθηκε σε ένα από τα άρθρα του ιστολογίου):


Αφού κάνετε κλικ στο κουμπί «Αποστολή αιτήματος», μετά από λίγα δευτερόλεπτα θα εμφανιστεί το αποτέλεσμα:


Όπως μπορείτε να δείτε, στην περίπτωσή μου υπάρχουν και οι τέσσερις κεφαλίδες. Είπα ότι ένα από τα ζεύγη "Τελευταία τροποποίηση - ETag" και "Expires - Cache-Control" πρέπει να εμφανιστεί, τα υπόλοιπα δεν είναι απαραίτητα. Σε αυτή την περίπτωση, το πλήρες σετ, από όσο μπορεί κανείς να κρίνει, δεν θα προκαλέσει κακό.

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

Εξάλλου, εάν το nginx υπάρχει στην απόκριση του διακομιστή, τότε θα χρειαστεί να το ρυθμίσετε (ο πάροχος μου το έκανε αυτό) και το αρχείο διαμόρφωσης .htaccess θα είναι άχρηστο εδώ. Σε αυτήν την περίπτωση, όπως ήδη σημείωσα, θα πρέπει να χρησιμοποιήσετε τη βοήθεια της υπηρεσίας υποστήριξης, εκτός εάν, φυσικά, το τιμολόγιο φιλοξενίας και η ανεπαρκής γνώση σας επιτρέπουν να επιλύσετε μόνοι σας το πρόβλημα.

Στη συνέχεια, για να ενοποιήσετε το υλικό, σας συμβουλεύω να στραφείτε στο βίντεο και να παρακολουθήσετε 6 μαθήματα στη σειρά (ένα από τα οποία είναι αφιερωμένο στη ρύθμιση της προσωρινής αποθήκευσης σε προγράμματα περιήγησης), τα οποία συζητούν λεπτομερώς όλα τα περισσότερα σημαντικές πτυχέςεπιταχύνετε τον ιστότοπο WP:

");">

Θα θέλατε να λαμβάνετε έγκαιρα φρέσκα, σχετικά και χρήσιμα άρθρα; Στη συνέχεια, μπορείτε να εγγραφείτε:

Περισσότερα άρθρα για αυτό το θέμα:

60 κριτικές

  1. Denis

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

  2. Ιγκόρ

    Απόλυτο δίκιο, Ντένη. Όλα είναι αλληλένδετα στην προώθηση της ιστοσελίδας.

  3. Marazzi

    Δεν καταλαβαίνω τίποτα, το πρόγραμμα περιήγησης θυμάται πραγματικά τους ιστότοπους στους οποίους βρισκόταν σε cookies, εάν διαγράψετε τα cookies. ΣΥΜΦΩΝΑ ΜΕ ΤΗ ΜΕΘΟΔΟ ΣΑΣ, τότε το κύκλωμά σας θα σταματήσει να λειτουργεί, ή μάλλον, καταλαβαίνω ότι αυτό μιλάμε, σχεδιασμένο για τακτικός επισκέπτηςπου δεν καθαρίζει το ιστορικό7 ΕΓΓΡΑΦΗΚΕ, ΠΕΡΙΜΕΝΟΝΤΑΣ ΑΠΑΝΤΗΣΗ1

  4. Σεργκέι Ντμίτριεβιτς

    Πολύ χρήσιμες πληροφορίες. Το βρήκα χρήσιμο. Ευχαριστώ.

  5. Ιγκόρ

    Marazzi, πρώτα απ 'όλα, τα cookies και η προσωρινή μνήμη είναι διαφορετικά πράγματα. Τα cookies είναι ειδικά αρχεία με ένα σύνολο δεδομένων που σας επιτρέπουν να αναγνωρίσετε έναν χρήστη εάν επισκεφτεί έναν πόρο Ιστού. Και η κρυφή μνήμη (μεταφρασμένη από τα αγγλικά ως αποθήκη, κρυψώνα) του προγράμματος περιήγησης είναι ένα είδος απομονωμένου μέρους για την αποθήκευση αντιγράφων εγγράφων (για παράδειγμα, ιστοσελίδες ιστότοπου), τα οποία, εάν είναι απαραίτητο, εμφανίζονται στο πρόγραμμα περιήγησης. Από την πλευρά του διακομιστή γίνεται η εντολή για χρήση της προσωρινής μνήμης στην πλευρά του προγράμματος περιήγησης του χρήστη και δημιουργείται ένας φάκελος με την προσωρινή μνήμη στον υπολογιστή του χρήστη. Από την πλευρά του, ο χρήστης μπορεί να ρυθμίσει τη συχνότητα δημιουργίας αποθηκευμένων αντιγράφων των σελίδων του ιστότοπου εκκαθαρίζοντας το φάκελο της προσωρινής μνήμης. Ή απενεργοποιήστε εντελώς την προσωρινή αποθήκευση, τις ρυθμίσεις σύγχρονα προγράμματα περιήγησηςαυτό επιτρέπεται. Όσο πιο συχνά εκκαθαρίζετε την προσωρινή μνήμη, τόσο περισσότερο νέα έκδοσηλαμβάνετε σελίδες.

  6. Νικολάι

    Σούπερ, και όλα είναι εντάξει εδώ!!!

  7. μαράτσι

    Λοιπόν, για αυτό μιλούσα.

  8. Αλέξανδρος
  9. Νικολάι

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

  10. Η Ιρίνα

    ΕΝΤΑΞΕΙ! Ευχαριστώ!
    Αυτός ο κωδικός βοήθησε, τώρα 80 στα 100

    FileETag MTime Size ExpiresActive στο ExpiresΠροεπιλογή "πρόσβαση συν 1 έτος"

  11. Ιγκόρ

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

  12. Αντρέι

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

  13. Ιγκόρ

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

  14. Αντρέι

    Λοιπόν, ναι, έχεις δίκιο με τις φωτογραφίες. ΕΝΑ συγκεκριμένη σελίδαμην αποθηκεύετε προσωρινά (για παράδειγμα, από τον πίνακα διαχείρισης). Είναι δυνατόν?

  15. Ιγκόρ

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

  16. Γιαροσλάβ

    Πολύ χρήσιμο άρθρο, ήθελα να ρυθμίσω την προσωρινή αποθήκευση για πολύ καιρό, αλλά προηγουμένως έβρισκα την πρώτη μέθοδο που παρουσιάστηκε παντού και δεν έκανε απολύτως τίποτα.
    Αλλά χάρη στη δεύτερη μέθοδο, όλα λειτουργούν με ένα μπαμ!! ΥΓ 91

  17. Ιγκόρ

    Καλό αποτέλεσμα, Γιαροσλάβ.

  18. σταν

    κανένας τρόπος δεν λειτουργεί

  19. Ιγκόρ

    Stan, μπορεί κάλλιστα αυτό να εξαρτάται σε μεγάλο βαθμό από τον οικοδεσπότη.

  20. Η Ίλια

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

  21. Ιγκόρ

    Σε παρακαλώ, Ίλια.

  22. Γκρί

    Ευχαριστώ Λειτουργεί!

  23. Σεργκέι

    καμία μέθοδος δεν λειτουργεί
    ο οικοδεσπότης είναι επαρκής

    Προφανώς θα πρέπει να γράψουν για να υποστηρίξουν

  24. Ιγκόρ Γκόρνοφ

    Ναι, Σεργκέι, ίσως. Μπορείτε να δείτε και μόνοι σας ότι πολλοί καταφέρνουν να το εφαρμόσουν.

  25. Alexander Puzatykh

    Ευχαριστώ. Υπέροχες πληροφορίες. Τώρα θα το διορθώσω στην ιστοσελίδα μου. Διαφορετικά, το pgespeed δίνει κόκκινο σημάδι.

  26. Γιούρι

    Έκανα τα πάντα όπως περιγράφεται, αλλά η ταχύτητα φόρτωσης του PageSpeed ​​Insights δεν άλλαξε (74%). Ποιος μπορεί να είναι ο λόγος;

  27. Γιούρι

    Εδώ είναι το htaccess μου
    # ΑΡΧΙΣΤΕ το WordPress

    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.php$ - [L]
    RewriteCond %(REQUEST_FILENAME) !-f
    RewriteCond %(REQUEST_FILENAME) !-d
    RewriteRule. /index.php [L]

    #ENDWordPress
    Προσθέτω τον κωδικό σου και δεν αλλάζει τίποτα
    Το PageSpeed ​​Insights παραμένει στο 74%.
    Πες μου τι μπορεί να είναι το πρόβλημα;;;

  28. Ιγκόρ Γκόρνοφ

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

  29. Valery

    Igor, καλό άρθρο. Ήθελα να το κάνω εδώ και πολύ καιρό, αλλά δεν ήξερα πώς. Τώρα είναι ξεκάθαρο. Έχω μια ερώτηση: "Πού στο αρχείο .htaccess πρέπει να επικολλήσω τον κώδικα;"

  30. Ιγκόρ Γκόρνοφ

    Valery, αν έχετε ήδη κάποια κομμάτια κώδικα στο .htaccess, τότε θα πρέπει να υπάρχει μια γραμμή όπως αυτή:

    #ENDWordPress

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

  31. vokacan

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

  32. Αέλι

    Παραδόξως, δεν μου λειτούργησε το ίδιο, αλλά τι πρέπει να κάνω, ή καλύτερα, τι να ρωτήσω τον οικοδεσπότη;

  33. Ιγκόρ Γκόρνοφ

    Πρέπει να ρωτήσετε τον οικοδεσπότη τα εξής: είναι δυνατόν να ενεργοποιηθεί η προσωρινή αποθήκευση στον διακομιστή για όλους; πιθανά αρχεία. Ίσως έχουν ήδη έναν έτοιμο αλγόριθμο που είναι διαφορετικός από αυτόν που πρότεινα.

  34. Αέλι

    Ευχαριστώ, το έγραψα τώρα.

  35. Αέλι

    Να ένα αστείο, εκείνοι (ο οικοδεσπότης) είπαν ότι έχουν τα πάντα, και τους λέω και το Googlespeedtest δείχνει "χρησιμοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησης" και μου λένε ότι αυτές είναι ερωτήσεις για το Googlespeedtest. Δεν μπορώ να καταλάβω ποιον να πιστέψω; :)

  36. Ιγκόρ Γκόρνοφ

    Aely, αυτή η στάση απέναντι στον πελάτη από την πλευρά του οικοδεσπότη είναι, τουλάχιστον, περίεργη. Θεωρητικά, θα έπρεπε να εξηγούν και να δίνουν πιθανό αλγόριθμογια να το προσθέσετε στο αρχείο .htaccess για να ενεργοποιήσετε τη δυνατότητα ακόμα κι αν την έχουν ενεργοποιημένη. Αναρωτιέμαι αν δεν είναι η πρώτη φορά που επικοινωνείτε με την υπηρεσία υποστήριξης, πώς συμπεριφέρθηκε σε άλλες περιπτώσεις;

"" για βελτιστοποίηση του ιστότοπου σύμφωνα με τις συμβουλές του εργαλείου από Google PageSpeed Insights. Κάθε κάτοχος ιστότοπου έχει αντιμετωπίσει το πρόβλημα της δυσκολίας αποθήκευσης σεναρίων js σε προσωρινή μνήμη από ιστότοπους τρίτων.

Δεν είναι έτσι σημαντικός δείκτηςγια βελτιστοποίηση, στην ουσία, τα στοιχεία CSS και JS μεταφέρονται από την κεφαλίδα του ιστότοπου στο υποσέλιδο, επιπλέον, αν κοιτάξετε Πόροι της GoogleΈχουν προβλήματα με αυτό το σημείο :)

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

Η κρυφή μνήμη του προγράμματος περιήγησης των στοιχείων του

Δημιουργία κρυφής μνήμης για διαφορετικά σενάρια, παράδειγμα από το ιστολόγιο Devaka ru (τη στιγμή της σύνταξης)
Π.χ:

/assets/copyright.min.js (δεν προσδιορίζεται ημερομηνία λήξης)
/assets/i/566.jpg (δεν προσδιορίζεται ημερομηνία λήξης)
/assets/i/icons.png (δεν προσδιορίζεται ημερομηνία λήξης)
/i/postcomm-left.png (δεν έχει καθοριστεί ημερομηνία λήξης)
/i/postcomm-right.png (δεν προσδιορίζεται ημερομηνία λήξης)



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

# κείμενο συμπίεσης, html, javascript, css, xml: AddOutputFilterByType DEFLATE κείμενο/html κείμενο/απλό κείμενο/xml εφαρμογή/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript# προσωρινή μνήμη προγράμματος περιήγησης ExpiresActive Στις #προεπιλεγμένη προσωρινή μνήμη είναι 5 δευτερόλεπτα ExpiresΠροεπιλεγμένη "πρόσβαση συν 1 ημέρες" # Ενεργοποίηση προσωρινής αποθήκευσης εικόνας και φλας για ένα μήνα ExpiresByType εικόνα/εικονίδιο x "πρόσβαση συν 1 μήνα" ExpiresByType εικόνα/jpeg "πρόσβαση συν 4 εβδομάδες" ExpiresByType εικόνα/p "πρόσβαση συν 30 ημέρες" ExpiresByType εικόνα/gif "πρόσβαση συν 43829 λεπτά" ExpiresByType εφαρμογή/x-shockwave-flash "πρόσβαση συν 2592000 δευτερόλεπτα" # Ενεργοποίηση προσωρινής αποθήκευσης css, javascript και αρχεία κειμένουγια μια εβδομάδα ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType script "#800 plus html" αρχεία htmγια μια μέρα ExpiresByType text/html "πρόσβαση συν 43200 δευτερόλεπτα" # Ενεργοποίηση προσωρινής αποθήκευσης xml αρχείαγια δέκα λεπτά ExpiresByType application/xhtml+xml "πρόσβαση συν 600 δευτερόλεπτα" # Μη τυπικές γραμματοσειρές ιστότοπου ExpiresByType application/x-font-ttf "πρόσβαση συν 1 μήνα" ExpiresByType γραμματοσειρά/opentype "πρόσβαση συν 1 μήνα" ExpiresByTy εφαρμογή font-woff "πρόσβαση συν 1 μήνα" ExpiresByType εικόνα/svg+xml "πρόσβαση συν 1 μήνα" ExpiresByType application/vnd.ms-fontobject "πρόσβαση συν 1 μήνα"

Παραδείγματα σεναρίων τρίτων

Εάν κάνατε τα πάντα σωστά στο πρώτο βήμα, θα πρέπει να δείτε κάτι σαν αυτό:

Χρησιμοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησής σας για τους ακόλουθους πόρους


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

Προσωρινή μνήμη στοιχείων τρίτων

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

Δεν υπάρχει τρόπος να επηρεάσετε τον χρόνο προσωρινής αποθήκευσης ενός πόρου τρίτου μέρους, αλλά μπορείτε να το κάνετε στο έργο ιστού σας Η πιο σωστή κίνηση σε αυτήν την περίπτωση είναι η αυτόματη λήψη φρέσκα σενάριαμετρήσεις, αναλυτικά στοιχεία κ.λπ. στον ιστότοπό σας χρησιμοποιώντας cron (υπάρχει σενάριο)

Ας πάρουμε τα πράγματα με τη σειρά τώρα!
Βήμα 1. Αντιγράψτε τη λίστα με όλα τα σενάρια στα οποία επισημαίνεται το Google PageSpeed ​​σε ένα σημειωματάριο ή απευθείας από το πρόγραμμα περιήγησης.
Βήμα 2. Δημιουργήστε ένα αρχείο στη φιλοξενία σας με επέκταση phpκαι επικολλήστε τον ακόλουθο κώδικα σε αυτό:

Προσοχή! Δεν έχετε άδεια προβολής κρυφού κειμένου.

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


Σε αυτή τη γραμμή αλλάζουμε την 3η τιμή:
Χρησιμοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησης για το Google PageSpeed
1. Το σενάριο που θα ανεβάσουμε στην ιστοσελίδα μας

Προσοχή! Δεν έχετε άδεια προβολής κρυφού κειμένου.

2. Διαδρομή όπου αποθηκεύεται το αρχείο:

Realpath("./js")

Σε αυτό το παράδειγμα είναι ο φάκελος js, δηλ. η ακριβής διαδρομή θα είναι www.site/js/ (πρέπει να δημιουργήσετε τον φάκελο μόνοι σας και να ορίσετε δικαιώματα εγγραφής CHMOD για αυτόν)

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

Βήμα 3. Ανεβάστε το επεξεργασμένο αρχείο στον διακομιστή

Βήμα 4. Τοποθετήστε το αρχείο στο cron for αυτόματη ενημέρωσηαρχεία

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

Μεταβείτε στον πίνακα φιλοξενίας σας και επιλέξτε την καρτέλα CRON και πληκτρολογήστε την εντολή και επίσης καθορίστε την ώρα μία φορά την ώρα/ημέρα ή οποιαδήποτε άλλη ώρα.

Wget -q -O - /dev/null http://www..php >/dev/null 2>&1

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

Βήμα 5. Αλλάξτε τη διαδρομή σε JS στον μετρητή ή το σενάριο

Εάν υπήρχε μια διαδρομή στον μετρητή https://mc.yandex.ru/metrika/watch.js, τότε αντικαταστήστε την με μια διαδρομή μέσα στον ιστότοπο, για παράδειγμα http://www..js

Αυτό είναι όλο, τώρα δεν θα πρέπει να βλέπετε κανένα μήνυμα σχετικά με τη ρύθμιση της προσωρινής μνήμης του προγράμματος περιήγησής σας στη λίστα PageSpeed ​​Insights.

Κατεβάστε τις οδηγίες "ενεργοποίηση προσωρινής μνήμης του προγράμματος περιήγησης για το Google PageSpeed" στο αρχείο Δεν μπορείτε να κάνετε λήψη αρχείων από τον διακομιστή μας
Παρουσιάζοντας χρήσιμο άρθρο"Ενεργοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησης για το Google PageSpeed" για να βελτιστοποιήσετε τον ιστότοπο σύμφωνα με τις συμβουλές του εργαλείου από το Google PageSpeed ​​- ό,τι καλύτερο έχουμε φόρουμ, εισβολές, λειτουργικές μονάδες, πρότυπα.