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

Πρόγραμμα Kerish Doctor. 07.04.2019
Επισκόπηση προγράμματος Η έκδοση υπολογιστή του Microsoft Excel Viewer θα επιτρέψει...

Chercher Οικιακές συσκευές"" για βελτιστοποίηση του ιστότοπου σύμφωνα με τις συμβουλές του εργαλείου από 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 "access plus 30 days" ExpiresByType image/gif "access plus 43829 minutes" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" # Ενεργοποίηση προσωρινής αποθήκευσης αρχείων css, javascript και κειμένου για μία εβδομάδα ExpiresByType "pluscspe 604800 δευτερόλεπτα" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" # Enable προσωρινή αποθήκευση 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. Δημιουργήστε ένα αρχείο στο hosting σας με την επέκταση 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 ​​- ό,τι καλύτερο έχουμε φόρουμ, εισβολές, λειτουργικές μονάδες, πρότυπα.

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

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

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

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

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

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

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

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

Βοήθεια για το αρχείο 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 είναι δικό σας προγραμματική πρόσβασηστην προσωρινή μνήμη του προγράμματος περιήγησης. Η ιδιότητα κατάστασης χρησιμοποιείται για έλεγχο τρέχουσα κατάστασηκρύπτη.

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(); // Προσπάθεια ενημέρωσης της προσωρινής μνήμης του χρήστη... if (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 ; handleCacheEvent, false); // Εκτελείται όταν οι πόροι της δήλωσης έχουν ληφθεί πρόσφατα appCache.addEventListener("updateready", handleCacheEvent, false);

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

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

Μπορείτε να επιταχύνετε τη φόρτωση του ιστότοπού σας χρησιμοποιώντας προσωρινή αποθήκευση. Για να λύσετε αυτό το πρόβλημα, μπορείτε να χρησιμοποιήσετε τη μονάδα κεφαλίδες Διακομιστής ιστού Apache. Σας επιτρέπει να ελέγχετε και να τροποποιείτε τις κεφαλίδες αιτήματος HTTP και απόκρισης HTTP. Το όλο θέμα σε αυτήν την περίπτωση έγκειται στο να αναγκάσει το πρόγραμμα περιήγησης να πραγματοποιήσει λήψη σπάνια αλλαγμένων δεδομένων από τον διακομιστή στην τοπική κρυφή μνήμη μόνο μία φορά και, στη συνέχεια, κατά την επίσκεψη στον ιστότοπο, να χρησιμοποιήσει τα δεδομένα από τη μνήμη cache. Μπορείτε να ρυθμίσετε την προσωρινή αποθήκευση για ορισμένους τύπουςαρχεία σε αυστηρά ορισμένη ώρα, μετά την οποία τα αρχεία θα ληφθούν ξανά από τον διακομιστή. Αυτό γίνεται πολύ απλά:

Σύνολο κεφαλίδων Cache-Control "max-age=2592000"

Για αρχεία με καθορισμένες επεκτάσειςη κατασκευή FilesMatch ορίζει την κεφαλίδα Cache-Control που αποστέλλεται από τον διακομιστή και τη μεταβλητή max-age, η οποία καθορίζει το χρόνο σε δευτερόλεπτα για την αποθήκευση των αρχείων στη μνήμη cache. Προσθέστε ή αφαιρέστε επεκτάσεις αρχείων που είναι κατάλληλες για εσάς σε αυτήν την περίπτωση.

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

Η κεφαλίδα απορρίφθηκε το Cache-Control

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

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

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

ExpiresActive On ExpiresΠροεπιλογή "πρόσβαση συν 1 μήνα" ExpiresByType εικόνα/gif "πρόσβαση συν 2 μήνες" ExpiresByType εικόνα/jpeg "πρόσβαση συν 2 μήνες"

Σε αυτό το παράδειγμα, ενεργοποιούμε τη λειτουργική μονάδα, ορίζουμε την προεπιλεγμένη προσωρινή αποθήκευση σε 1 μήνα και, στη συνέχεια, εκχωρούμε χρόνο αποθήκευσης προσωρινής μνήμης συν 2 μήνες για αρχεία με τις επεκτάσεις gif και jpg. Ο χρόνος μπορεί να καθοριστεί σε χρόνια, μήνες, εβδομάδες, ημέρες, ώρες, λεπτά, δευτερόλεπτα. Μπορείτε επίσης να χρησιμοποιήσετε μια επιλογή όπως:

ExpiresByType text/html "πρόσβαση συν 1 μήνα 15 ημέρες 2 ώρες" ExpiresByType εικόνα/gif "τροποποίηση συν 5 ώρες 3 λεπτά"

Διάφοροι τύποι MIME μπορούν να καθοριστούν ως τύποι αρχείων, εδώ είναι μερικοί από αυτούς ως παράδειγμα:

Εικόνα/εικονίδιο x εικόνα/εικόνα jpeg/εικόνα png/εφαρμογή gif/κείμενο x-shockwave-flash/κείμενο css/εφαρμογή Javascript/εφαρμογή javascript/κείμενο x-javascript/ εφαρμογή html/xhtml+xml

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

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

Αλλά η προσωρινή αποθήκευση έχει επίσης μειονεκτήματα - εάν το αρχείο στον διακομιστή έχει αλλάξει, τότε πιθανότατα δεν θα δείτε το νέο, αλλά παλιά έκδοσηαρχείο. Για παράδειγμα, ένα αρχείο με το όνομα img01.jpg περιείχε μια εικόνα ενός αυτοκινήτου. Μπήκες στο site, διάβασες το άρθρο και έφυγες. Αλλά για κάποιο λόγο ο διαχειριστής του ιστότοπου αποφάσισε ότι η εικόνα του αυτοκινήτου ήταν ακατάλληλη εκεί και αποφάσισε να την αντικαταστήσει με μια εικόνα τοπίου. Αλλά το όνομα του αρχείου παραμένει το ίδιο. Μερικές μέρες αργότερα, αποφασίζετε να διαβάσετε ξανά αυτό το άρθρο. Όταν πήγατε στον ιστότοπο, είχατε ακόμα την παλιά εικόνα - ένα αυτοκίνητο. Αυτό συμβαίνει επειδή το πρόγραμμα περιήγησης το αποθήκευσε με το όνομα img01.jpg. Και για να δείτε μια νέα εικόνα με οριζόντιο προσανατολισμό, πρέπει να επαναφέρετε την προσωρινή μνήμη του προγράμματος περιήγησής σας χρησιμοποιώντας έναν συνδυασμό πλήκτρων Ctrl+F5.

Ρύθμιση του htaccess

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

Μετά από αυτό περιέχει τις ακόλουθες οδηγίες:

ExpiresActive σε ExpiresByType εικόνα/jpeg "πρόσβαση συν 7 ημέρες" ExpiresByType εικόνα/gif "πρόσβαση συν 7 ημέρες" ExpiresByType εικόνα/png "πρόσβαση συν 7 ημέρες" ExpiresΠροεπιλογή "πρόσβαση συν 1 έτος" ExpiresByType κείμενο/css "πρόσβαση συν 1 έτος" ExpiresByType εφαρμογή/javascript "πρόσβαση συν 1 έτος"

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

P.S. Θα ήθελα να σημειώσω ένα πράγμα ότι η προσωρινή αποθήκευση, δυστυχώς, δεν ισχύει για εξωτερικούς πόρους, όπως τα σενάρια Yandex.Metrica και Google.Analytics

Γεια σε όλους!Σήμερα θέλω να σας πω πώς να φτιάξετε μια προσωρινή μνήμη εξωτερικά στοιχείαστο Google PageSpeed ​​Insights για να αυξήσετε την ταχύτητα του ιστότοπού σας. Το θέμα θα είναι να κατεβάσετε js και άλλα αρχεία με δυνατότητα λήψης από εξωτερικούς πόρουςστον ιστότοπό σας.

Πώς να ενεργοποιήσετε την προσωρινή αποθήκευση αρχείων στο πρόγραμμα περιήγησης

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

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

Καταλάβαμε τι είναι η προσωρινή μνήμη. Τώρα, ας ελέγξουμε τον ιστότοπό μας στο Υπηρεσία PageSpeedκαι βεβαιωθείτε ότι η Google συνιστά τη χρήση της προσωρινής μνήμης του προγράμματος περιήγησης. Ακολουθεί ένα απόσπασμα από το μήνυμα.

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

Εάν αυτά τα αρχεία βρίσκονται στον πόρο σας, τότε μπορείτε να γράψετε τον κώδικα προσωρινής αποθήκευσης του προγράμματος περιήγησης στο αρχείο 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 "access plus 30 days" ExpiresByType image/gif "access plus 43829 minutes" ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds" # Ενεργοποίηση προσωρινής αποθήκευσης αρχείων css, javascript και κειμένου για μία εβδομάδα ExpiresByType "pluscspe 604800 δευτερόλεπτα" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds of textpet/endays htmly enable" "access plus 43200 seconds" # Ενεργοποίηση προσωρινής αποθήκευσης αρχείων xml για δέκα λεπτά ExpiresByType application/xhtml+xml "access plus 600 seconds" # Μη τυπικές γραμματοσειρές ιστότοπου ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType opentype "πρόσβαση συν 1 μήνα" ExpiresByType εφαρμογή/x-font-woff "πρόσβαση συν 1 μήνα" ExpiresByType εικόνα/svg+xml "πρόσβαση συν 1 μήνα" ExpiresByType εφαρμογή/vnd.ms-fontobject "πρόσβαση συν 1 μήνα"

Επικολλώντας αυτόν τον κώδικα στο αρχείο htacces, μπορείτε να ελέγξετε ξανά τον ιστότοπό σας υπηρεσία Google Page Speed
Insights. Εάν στην ενότητα " χρησιμοποιήστε την προσωρινή μνήμη του προγράμματος περιήγησης«Όλα είναι καλά, αυτό σημαίνει ότι θα τα έχεις εκεί
μόνο συνδέσεις με εξωτερικούς πόρους, όπως analytics, social
κουμπιά και ούτω καθεξής.
Προσωπικά, παράλληλα με αυτόν τον κώδικα, χρησιμοποιώ τις δυνατότητες του hosting μου για να αποθηκεύω προσωρινά αρχεία από την πλευρά του χρήστη. Μοιάζει με αυτό.

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

Πώς να ενεργοποιήσετε την εξωτερική προσωρινή μνήμη αρχείων στο Google PageSpeed ​​Insights

Εάν έχετε ακολουθήσει τις συστάσεις για την προσωρινή αποθήκευση αρχείων στο ιστολόγιό σας. Πρέπει, μέσα εργαλείο Google PageSpeed ​​Insights, δείτε μόνο συνδέσμους προς εξωτερικούς πόρους. Πρέπει να έχεις κάτι παρόμοιο.
Όπως μπορείτε να δείτε από το στιγμιότυπο οθόνης, το Google PageSpeed ​​Insights παραπονιέται για εξωτερικούς πόρους όπως το Yandex Metrica, google analyticsκαι άλλοι. Τώρα θα σας πω πώς να διορθώσετε αυτό το σφάλμα και να δημιουργήσετε συνδέσμους σε εξωτερικούς πόρους εσωτερικούς και προσωρινά αποθηκευμένους στο πλάι του διακομιστή σας.

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

Δεδομένου ότι τα αρχεία εξωτερικών πόρων δεν ανήκουν στον ιστότοπό μας, πρέπει πρώτα να τα κατεβάσετε. Για να κατεβάσετε εξωτερικά αρχείαμε πόρους τρίτων, πρέπει να δημιουργήσουμε ένα αρχείο kesh_js.phpμε τον παρακάτω κωδικό. Σας συμβουλεύω να χρησιμοποιήσετε Μπλοκ++ για γρήγορη και σωστή προσθήκη κώδικα σε ένα αρχείο.

Για να γράψουμε τον κωδικό που χρειαζόμαστε. πάρτε και αντιγράψτε αυτόν τον σύνδεσμο:

λήψηJs( επικολλήστε τον σύνδεσμο από το PageSpeed ​​εδώ /metrics.js, realpath("./ folder_js« ) . ‘/ metrics.js- εισάγετε εδώ τελικό αρχείο’ ) ;

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

Αφού προσθέσετε τον κώδικα στο αρχείο kesh_js.php, μπορείς να το πεις αλλιώς. Πρέπει να μεταφορτωθεί στη ρίζα του ιστότοπού μας. Επίσης στη ρίζα του ιστότοπου, πρέπει να δημιουργήσετε έναν φάκελο folder_js, ή με άλλο όνομα με δικαιώματα πρόσβασης 777/755. Για να ορίσετε δικαιώματα πρόσβασης για έναν φάκελο, προτείνω να χρησιμοποιήσετε Fillizille.

Για να το κάνετε αυτό, απλά ανοίξτε το πρόγραμμα fillizilla. Στη συνέχεια, επιλέξτε το φάκελο και ορίστε τα δικαιώματα πρόσβασης, βεβαιωθείτε ότι το 777, μετά το αλλάζουμε ξανά σε 755. Αυτό μπορεί επίσης να γίνει στον πίνακα ελέγχου της φιλοξενίας σας, εάν δεν θέλετε να χρησιμοποιήσετε αυτό το πρόγραμμα. Θα σας δείξω ένα στιγμιότυπο οθόνης με τη ρύθμιση των δικαιωμάτων πρόσβασης στο πρόγραμμα Fillizilla.
Στη συνέχεια ανοίξτε την ενότητα " δικαιώματα αρχείων" και εισαγάγετε την τιμή μας 777/755.

Πώς να ενεργοποιήσετε τον προγραμματιστή εργασιών για τον ιστότοπο (cron)

Το επόμενο βήμα, πρέπει να ενεργοποιήσουμε τον προγραμματιστή εργασιών για τον ιστότοπό μας, έτσι ώστε το σενάριό μας https://διεύθυνση του ιστότοπού σας/kesh_js.phpξεκίνησε, καθημερινά. Χάρη σε αυτό, θα είναι πάντα στον ιστότοπό μας τρέχουσα έκδοσηαρχεία από εξωτερικούς πόρους. Ακόμα κι αν οι προγραμματιστές κάνουν αλλαγές στον κώδικά τους, θα έχουμε πάντα έκδοση εργασίαςστον ιστότοπο, χάρη στον προγραμματιστή εργασιών.

Για να προγραμματίσετε εργασίες για τον ιστότοπό σας, πρέπει να μεταβείτε στον πίνακα ελέγχου φιλοξενίας και να εισαγάγετε μία από τις επιλογές κώδικα.

εκτέλεση μιας εργασίας μέσω του GET. Εάν πρέπει να εκτελέσετε μια εργασία cron λαμβάνοντας υπόψη το περιβάλλον του κινητήρα:

ΛΑΒΕΤΕ https://site.ru/script.php

όπου site.ru είναι το όνομα του τομέα σας και script.php είναι το όνομα του αρχείου με την εργασία.

εκτέλεση εργασίας μέσω WGET. Μια εναλλακτική επιλογή για την εκτέλεση μιας εργασίας cron, λαμβάνοντας υπόψη το περιβάλλον του κινητήρα:

Wget -q -O - https://site.ru/script.php> /dev/null 2>&1

όπου site.ru είναι το όνομα του τομέα σας και script.php είναι το όνομα του αρχείου με την εργασία.

Στην περίπτωσή μας πρέπει να γράψουμε:

ΛΑΒΕΤΕ https://διεύθυνση του ιστότοπού σας/kesh_js.php

Ή επιλέξτε εναλλακτική επιλογή, προσωπικά συμβιβάστηκα στο πρώτο.

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

Τώρα, ανοίξτε την καρτέλα "δημιουργία".

Στη συνέχεια εκκαθαρίζουμε την προσωρινή μνήμη του προγράμματος περιήγησης. Για Google Chrome, χρησιμοποιήστε τον συνδυασμό πλήκτρων ctrl+shift+delete και ελέγξτε τη λειτουργία του ιστότοπου. Συνιστώ επίσης να εκτελέσετε ξανά τον ιστότοπό σας μέσω του εργαλείου PageSpeed ​​Insights.

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



Συνιστούμε να διαβάσετε

Κορυφή