PHP Page Cache & Image Optimization

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

Περιλαμβάνει cache ολόκληρων σελίδων, cache επιλεγμένων τμημάτων, δημιουργία μικρογραφιών, lazy loading εικόνων και πλοήγηση SPA. Οι λειτουργίες μπορούν να ενσωματωθούν ανάλογα με τις ανάγκες της εφαρμογής.

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

Σκοπός του project

Μια δυναμική ιστοσελίδα μπορεί να επαναλαμβάνει την ίδια εργασία σε κάθε επίσκεψη: παράγει ξανά HTML, επεξεργάζεται εικόνες και φορτώνει ολόκληρη τη σελίδα για κάθε μετακίνηση του επισκέπτη.

Το PHP Page Cache συγκεντρώνει εργαλεία που αντιμετωπίζουν διαφορετικά σημεία αυτής της διαδικασίας. Η cache επαναχρησιμοποιεί παραγόμενο περιεχόμενο, η διαχείριση εικόνων προσαρμόζει τη φόρτωσή τους και το SPA προσθέτει πλοήγηση μέσω JavaScript.

Η προσέγγιση βασίζεται στην ενσωμάτωση των εργαλείων στην υπάρχουσα εφαρμογή. Περιλαμβάνεται επίσης WordPress plugin για την cache σελίδων και τη διαχείριση εικόνων.

Βασικές δυνατότητες

• Προσωρινή αποθήκευση του HTML ολόκληρων σελίδων.
• Ενεργοποίηση, εξαιρέσεις και ανανέωση της cache.
• Προσωρινή αποθήκευση επιλεγμένων τμημάτων περιεχομένου.
• Δημιουργία και επαναχρησιμοποίηση μικρογραφιών εικόνων.
• Lazy loading και δέσμευση χώρου για τις εικόνες.
• Φόρτωση εσωτερικών σελίδων και φορμών μέσω AJAX.
• Ενημέρωση της διεύθυνσης του browser κατά την πλοήγηση SPA.
• Ενσωμάτωση επιλεγμένων λειτουργιών σε WordPress.

Πώς οργανώνονται οι λειτουργίες

Cache ολόκληρων σελίδων

Τα ttfb.php και ttfb.js παρέχουν προσωρινή αποθήκευση του παραγόμενου HTML ανά URL.

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

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

Πού χρησιμεύει

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

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

Cache επιλεγμένων τμημάτων

Το ttfb-elements.php παρέχει προσωρινή αποθήκευση συγκεκριμένων περιοχών της σελίδας.

Οι περιοχές αναγνωρίζονται από τις κλάσεις:

cache-element-1
cache-element-2
cache-element-3
cache-element-4

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

Η συγκεκριμένη cache βασίζεται στη διαδρομή του URL χωρίς τις παραμέτρους query. Αυτό πρέπει να λαμβάνεται υπόψη όταν το περιεχόμενο μιας σελίδας αλλάζει ανάλογα με αυτές τις παραμέτρους.

Επιλογή στρατηγικής

Η cache σελίδων και η cache τμημάτων εξυπηρετούν διαφορετικές ανάγκες:

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

Εικόνες και σταθερότητα διάταξης

Τα cls.php και cls.js συνδυάζουν λειτουργίες για τη φόρτωση και την παρουσίαση εικόνων.

Περιλαμβάνουν:

• Δέσμευση χώρου πριν ολοκληρωθεί η φόρτωση της εικόνας.
• Lazy loading.
• Δημιουργία μικρογραφιών στις απαιτούμενες διαστάσεις.
• Προσωρινή αποθήκευση των παραγόμενων μικρογραφιών.

Η δέσμευση χώρου στοχεύει στον περιορισμό των μετακινήσεων του περιεχομένου καθώς εμφανίζονται οι εικόνες. Οι μικρογραφίες και το lazy loading στοχεύουν στην αποδοτικότερη φόρτωση.

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

Πλοήγηση SPA

Το SPA module προσθέτει πλοήγηση τύπου Single Page Application σε υπάρχουσες ιστοσελίδες PHP. Διατηρεί την παραγωγή HTML στον server και αναλαμβάνει τη φόρτωση και ενημέρωση του περιεχομένου στον browser, περιορίζοντας τις πλήρεις ανανεώσεις σελίδας. Η ενσωμάτωση προσαρμόζεται στις φόρμες, στα scripts και στις απαιτήσεις πλοήγησης της εφαρμογής.

Τι σημαίνει Single Page Application

Μια Single Page Application διατηρεί ανοιχτό το ίδιο έγγραφο στον browser και ενημερώνει το περιεχόμενό του καθώς ο χρήστης πλοηγείται.

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

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

Πώς λειτουργεί η υλοποίηση

Οι σελίδες PHP συνεχίζουν να παράγουν HTML. Τα spa.php και spa.js προσθέτουν τη διαχείριση πλοήγησης πάνω σε αυτή τη λειτουργία:

1. Αναγνωρίζουν εσωτερικούς συνδέσμους που δεν έχουν εξαιρεθεί.
2. Αναλαμβάνουν το κλικ αντί για την κανονική μετάβαση του browser.
3. Ζητούν το HTML της επόμενης σελίδας μέσω AJAX.
4. Συγκρίνουν το νέο HTML με το υπάρχον και ενημερώνουν το DOM, δηλαδή τη δομή της σελίδας.
5. Ενημερώνουν τη διεύθυνση του browser με history.pushState.
6. Ενεργοποιούν ξανά συμβάντα αρχικοποίησης για τα στοιχεία της σελίδας.

Το εργαλείο περιλαμβάνει επίσης διαχείριση υποβολής φορμών POST και εξαιρέσεις μέσω του urls-spa.txt.

Προσθήκη SPA σε υπάρχουσα ιστοσελίδα

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

• Ενσωματώνουμε τα spa.php και spa.js, μαζί με τις κοινές εξαρτήσεις τους.
• Διατηρούμε λειτουργικές τις κανονικές διευθύνσεις, ώστε κάθε σελίδα να ανοίγει και απευθείας.
• Προσαρμόζουμε τα διαδραστικά στοιχεία ώστε να αρχικοποιούνται και μετά την αλλαγή περιεχομένου.
• Χειριζόμαστε σωστά ιστορικό, φόρμες, ανακατευθύνσεις και αποτυχίες φόρτωσης.
• Εξαιρούμε συνδέσμους ή διαδικασίες που πρέπει να χρησιμοποιούν κανονική πλοήγηση.

Δεν απαιτείται απαραίτητα μεταφορά σε React ή άλλο framework για να αποκτήσει μια εφαρμογή τέτοια συμπεριφορά.

Συμβατότητα και σημεία προσαρμογής

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

Η τρέχουσα υλοποίηση έχει συγκεκριμένα σημεία που χρειάζεται να ληφθούν υπόψη:

• Η πλοήγηση στους συνδέσμους χρησιμοποιεί POST, ενώ συνήθως οι σελίδες ανοίγουν με GET. Η εφαρμογή πρέπει να υποστηρίζει αυτή τη συμπεριφορά ή να προσαρμοστεί ο χειρισμός των αιτημάτων.
• Χρησιμοποιείται pushState, αλλά δεν υπάρχει αντίστοιχος χειρισμός popstate για ενημέρωση του περιεχομένου με τα κουμπιά Πίσω και Μπροστά.
• Η αντιγραφή HTML δεν εξασφαλίζει ότι νέα scripts και editors θα εκτελεστούν ή θα αρχικοποιηθούν σωστά.
• Η υποβολή φορμών χρειάζεται προσαρμογή για τη σωστή συμπεριφορά πεδίων όπως checkboxes, radio buttons και disabled inputs.
• Σε αποτυχία του AJAX χρειάζεται κατάλληλη συμπεριφορά, όπως επιστροφή στην κανονική πλοήγηση.

Αυτά είναι σημεία ενσωμάτωσης και εξέλιξης της υπάρχουσας υλοποίησης.

Οργάνωση του project

Ο κύριος κώδικας βρίσκεται στον φάκελο common/.

common/
  functions.php
  polyfills.php
  ttfb.php
  ttfb.js
  ttfb-elements.php
  cls.php
  cls.js
  spa.php
  spa.js

ttfb-cls.php

Τα functions.php και polyfills.php παρέχουν κοινές λειτουργίες που χρησιμοποιούνται από τα επιμέρους εργαλεία.

Ενσωμάτωση σε εφαρμογή PHP

Η ενσωμάτωση ξεκινά από την επιλογή των λειτουργιών που χρειάζεται η εφαρμογή.

1. Τοποθετήστε τα επιλεγμένα αρχεία και τις κοινές εξαρτήσεις στις κατάλληλες διαδρομές.
2. Συνδέστε τα PHP αρχεία με την αρχικοποίηση της εφαρμογής, πριν παραχθεί η σχετική έξοδος HTML.
3. Διατηρήστε μαζί τα αντίστοιχα αρχεία PHP και JavaScript.
4. Ρυθμίστε τις διαδρομές αποθήκευσης και τα δικαιώματα εγγραφής της cache.
5. Ορίστε ποιες σελίδες ή περιοχές μπορούν να χρησιμοποιούν cache.
6. Προσαρμόστε τον έλεγχο διαχειριστή και τις επιλογές ανανέωσης.
7. Για SPA, συνδέστε την αρχικοποίηση των διαδραστικών στοιχείων με τις αλλαγές σελίδας.

Οι διαδρομές των scripts και των μικρογραφιών πρέπει να αντιστοιχούν στην πραγματική εγκατάσταση.

Ενσωμάτωση σε WordPress

Το ttfb-cls.php λειτουργεί ως σημείο εισόδου του WordPress plugin και φορτώνει:

• Την cache σελίδων.
• Τη διαχείριση εικόνων.

Τα SPA και fragment cache ενσωματώνονται ξεχωριστά. Δεν ενεργοποιούνται αυτόματα από το συγκεκριμένο plugin.

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

Απαιτήσεις λειτουργίας

• Web server με PHP.
• Κοινές συναρτήσεις των modules.
• Εγγράψιμος χώρος για την cache και τις μικρογραφίες.
• Υποστήριξη επεξεργασίας εικόνων για τις λειτουργίες CLS.
• JavaScript στον browser για SPA και τις αντίστοιχες λειτουργίες εικόνων.
• Κατάλληλος έλεγχος πρόσβασης στις ενέργειες διαχείρισης.

Η επίδραση στην απόδοση εξαρτάται από το περιεχόμενο, το hosting και τον τρόπο ενσωμάτωσης. Το project δεν περιλαμβάνει εγγύηση συγκεκριμένης βαθμολογίας PageSpeed.

Τι παρουσιάζει ως project

Το PHP Page Cache παρουσιάζει διαφορετικές παρεμβάσεις στη διαδρομή μιας σελίδας από τον server μέχρι τον browser.

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

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