Αρχιμήδης Μερτζάνος - Speed Optimization στο WordPress

Transcript

1. 

   Speed Optimization στο
   WordPress.
   Οδηγός και τεχνικές για να φορτώνει το site µας σε χρόνο dt.
   Παρουσίαση στα πλαίσια του WordCamp Athens 2017
   

   View full-size slide

2. 

   Who Am I;
   Εργάζοµαι ως Lead WordPress Engineer στην
   Hellenic Technologies – hta.gr –
   [email protected]
   Ονοµάζοµαι Αρχιµήδης Μερτζάνος
   Howdy!
   

   View full-size slide

3. 

   Πρόλογος
   Σε αυτή την παρουσίαση θα δείτε τρόπους και τεχνικές που
   θα σας βοηθήσουν να βελτιώσετε την ταχύτητα φόρτωση
   της WordPress ιστοσελίδα σας. Θα µιλήσουµε για τεχνικές
   και έννοιες όπως:
   Slider
   Content Ads
   q  Image Compression
   q  CSS/JS Minifica4on
   q  CSS/JS Combina4ons
   q  JS Defer Parsing
   q  Cri4cal CSS
   q  CDN
   q  Prefetching / Prerender tags
   

   View full-size slide

4. 

   Πριν ξεκινήσουµε.. To plugin or not to plugin;
   Πολλές από τις έννοιες / τεχνικές που προαναφέρθησαν
   µπορούν να υλοποιηθούν και µε χρήση WordPress plugin.
   Δεν υπάρχει κανένα πρόβληµα µε αυτό, εµείς θα δούµε
   πώς µπορούµε να υλοποιήσουµε διάφορες τεχνικές και να
   εµβαθύνουµε σε αυτές .
   Code Samples & References
   https://pastebin.com/u/ArchimidisM/1/q1DEkwhd
   

   View full-size slide

5. 

   Εργαλείο µέτρησης αποτελεσµάτων.
   Προσωπικά προτείνω το GTmetrix. Υπάρχουν και άλλα όπως το Google PageSpeed, Webpagetest.org , Pingdom.
   

   View full-size slide

6. 

   ΠΡΟΒΛΗΜΑ ΤΑΧΥΤΗΤΑΣ 1:
   Εικόνες µεγάλου µεγέθους και µεγάλων
   διαστάσεων.
   Ίσως το νούµερο 1 πρόβληµα που υπάρχει στα
   WordPress sites.
   Ασκόπως µεγάλα µεγέθη εικόνων για
   παράδειγµα εικόνες 3MΒ σε κάποιο
   slider.
   Μεγάλο πλήθος εικόνων , για παράδειγµα 15
   εικόνες σε ένα carousel.
   Δεν λαµβάνεται υπόψιν ότι το website θα
   προβληθεί και σε κινητό.
   Πιθανή λύση
   

   View full-size slide

7. 

   Image compression – Συµπίεση εικόνων
   Η διαδικασία κωδικοποίησης των δεδοµένων µίας εικόνας ή µετατροπής αυτής σε µία που καταλαµβάνει λιγότερο χώρο.
   Χονδρικά έχει δύο βασικές εκφάνσεις την Lossless και την Lossy compression.
   Τρόπος 1: Χειροκίνητα
   Συνίσταται για λίγες εικόνες . Μπορείτε να χρησιµοποιήσετε
   εργαλεία όπως:
   •  https://tinypng.com
   •  https://compressjpeg.com
   •  https://compressor.io
   •  https://saerasoft.com/caesium/
   Έπειτα ανεβάζουµε τις εικόνες εκεί που θέλουµε, µέσω του
   WordPress.
   Τρόπος 2: Με χρήση plugin
   Μπορείτε να χρησιµοποιήσετε συνδυασµό plugins για να
   επιτύχετε ακόµα καλύτερο αποτέλεσµα.
   https://wordpress.org/plugins/imagify/
   https://wordpress.org/plugins/adaptive-images/
   Στην περίπτωσή αυτή όχι µόνο κάνουµε συµπίεση εικόνων
   αλλά στέλνουµε και τις σωστές εικόνες και διαστάσεις στις
   Mobile συσκευές.
   Αποτελέσµατα
   

   View full-size slide

8. 

   Image compression –Αποτελέσµατα
   Χρησιµοποιώντας το Imagify Plugin και µόνο είχαµε τα εξής αποτελέσµατα:
   ΠΡΙΝ: MEΤΑ:
   

   View full-size slide

9. 

   ΠΡΟΒΛΗΜΑ ΤΑΧΥΤΗΤΑΣ 2:
   Μεγάλου µεγέθους αρχεία CSS/JS
   Σηµαντικό πρόβληµα που εµφανίζεται σε διάφορα
   WordPress themes τα οποία «φορτώνουν» και µεγάλα
   και πολλά CSS/JS αρχεία για να λειτουργήσουν.
   Αρχεία κώδικα που περιέχουν πολλά και άσκοπα
   κενά.
   Μεγάλη ποσότητα σχολίων και formatting στα
   αρχεία αυτά.
   Μα γιατί είναι κακό αυτό; Η ύπαρξη σχολίων και το
   όµορφο formatting , είναι λάθος;
   

   View full-size slide

10. 

    CSS/JS/HTML Minification
    Η διαδικασία κατά την οποία αφαιρούµε/αλλάζουµε περιττά στοιχεία από τα CSS/JS/HTML αρχεία µας και έτσι µειώνουµε
    δραστικά το µέγεθός τους ώστε να "σερβίρονται" πολύ πιο γρήγορα από τον server χωρίς φυσικά να είναι εσφαλµένα.
    Τρόποι για να το πετύχουµε (Είτε για CSS, είτε για JS είτε για HTML)
    q  Χειροκίνητα
    q  Με χρήση plugins όπως το https://wordpress.org/plugins/autoptimize η full featured caching plugins
    q  Με χρήση Node.js και µε το Grunt.
    

    View full-size slide

11. 

    CSS/JS/HTML Minification - Extra Tips 1
    q  Στην χειροκίνητη περίπτωση για να βρω τα CSS που γίνονται enqueue : https://pastebin.com/hJF3dBjM .
    q  Στo αρχείο functions.php χρησιµοποιούµε την global µεταβλητή $wp_styles. Το ίδιο και για τα scripts.
    Code chunk:
    global $wp_styles;
    foreach( $wp_styles->queue as $style ) :
    $out['styles'][] = $wp_styles->registered[$style]->src . ";";
    endforeach;
    return $out;
    Με µία µικρή αλλαγή κώδικα παίρνω και τα handles
    

    View full-size slide

12. 

    CSS/JS/HTML Minification - Extra Tips 2
    q  Στην περίπτωση µε το plugin , δηµιουργείται συνήθως κάποιος φάκελος cache και εκεί γίνονται Minified ολα τα αρχεία που
    επιλέγουµε.
    q  Στην περίπτωση Node.js µπορούµε να κατεβάσουµε το https://www.npmjs.com/package/minifier και να το τρέξουµε στο local
    directory µας. Με την παρακάτω εντολή παίρνουµε όλα τα minified .
    q  Χρησιµοποιπούµε Grunt Tasks για όλα τα παραπάνω.
    

    View full-size slide

13. 

    CSS/JS/HTML Minification - Extra Tips 2
    q  Στην περίπτωση µε το plugin , δηµιουργείται συνήθως κάποιος φάκελος cache και εκεί γίνονται Minified ολα τα αρχεία που
    επιλέγουµε.
    q  Στην περίπτωση Node.js µπορούµε να κατεβάσουµε το https://www.npmjs.com/package/minifier και να το τρέξουµε στο local
    directory µας. Με την παρακάτω εντολή παίρνουµε όλα τα minified .
    q  Χρησιµοποιπούµε Grunt Tasks για όλα τα παραπάνω.
    

    View full-size slide

14. 

    CSS/JS Combination / Google Fonts Combination
    Διαδικασία κατά την οποία όχι ενώνουµε τα διάφορα CSS αρχεία / JS αρχεία σε ένα και µόνο. Αυτό µειώνει κατά πολύ τα HTTP
    requests.
    Τρόποι για να το πετύχουµε (Είτε για CSS, είτε για JS είτε για HTML)
    q  Χειροκίνητα
    q  Με χρήση plugins όπως το wp-rocket το οποίο λειτουργεί µε το autoptimize χωρίς προβλήµατα.
    q  Με χρήση Node.js και µε το Grunt.
    q  Προσοχή: Αν τα αρχεία είναι πολύ µεγάλα, ενδέχεται να υπάρξουν τα αντίθετα αποτελέσµατα.
    

    View full-size slide

15. 

    CSS/JS/HTML compression/combination errors
    Συνήθως εµφανίζονται προβλήµατα κατά τη διαδικασία του combination (πολλά αρχεία σε ένα) των JS αρχείων. Πιθανοί λόγοι
    o  Κακογραµµένος κώδικας χωρίς να υπάρχουν τα σωστά "dependencies" ειδικά σε plugins.
    o  Reference errors που εµφανίζονται στην κονσόλα µας.
    Για να διορθωθούν αυτά συνήθως κάνουµε τα εξής:
    •  Ανοίγουµε την console µε F12 και βλέπουµε το ref error
    •  Ανοίγουµε νέο tab στον browser µε URL της ιστοσελίδας τύπου http://
    example.com/?nocache
    •  Ψάχνουµε τα αρχεία από το browser για τη µεταβλητή η τη function που
    δηµιουργεί το error άρα και το URL του αρχείου.
    •  Το κάνουµε exclude από το minification/combination
    

    View full-size slide

16. 

    Defer JS Parsing
    Γίνεται parse του/των συγκεκριµένων JS αρχείων ΑΦΟΥ πρώτα έχει φορτώσει η σελίδα µας. Τα αρχεία αυτά τα δένουµε στο
    onload event και αφού φορτώσει η σελίδα φορτώνουν και αυτά. Στην ουσία ένα εσωτερικό script καλεί εξωτερικά µετά το load.
    q  Προτείνεται για external scripts,πχ google analytics, Facebook scripts κλπ.
    q  Δεν προτείνεται για την jQuery αυτή καθ' εαυτή.
    q  Θέλει µεγάλη προσοχή στα dependencies για αυτό και προτείνονται εξωτερικά scripts.
    q  Συνήθως τα plugins κάνουν τη διαδικασία σωστά.
    Κώδικας που µπορείτε να χρησιµοποιήσετε:
    https://pastebin.com/W75v1tPd
    

    View full-size slide

17. 

    Defer Image Loading - Lazy Loading
    Είναι τεχνική φόρτωσης εικόνων κατά τη διάρκεια που ο χρήστης scrolls την σελίδα προς τα κάτω. Μπορεί να κάνει την
    ταχύτητα φόρτωσης αρκετά µεγάλη όµως έχει διάφορα θέµατα, κυρίως performance και διάφορα incompatibilities.
    3
    2
    1
    Ο browser caches την αληθινή
    εικόνα και στην θέση τους
    τοποθετεί ένα placeholder.
    ON LOAD
    Οι εικόνες που είναι στο user's
    viewport αρχίζουν να
    φαίνονται.
    FULLY LOADED
    Κατά το scroll οι λ εικόνες
    εµφανίζονται.
    ON Scroll
    

    View full-size slide

18. 

    Critical CSS - Τι είναι;
    4
    3
    2
    1
    Πληκτρολογούµε URL O browser ζητάει CSS Λήψη - Εφαρµογή CSS Πλήρης Φόρτωση
    ü  Μεταξύ 2 και τέλους του 3 η σελίδα καθυστερεί την πλήρη φόρτωσή της γιατί πρέπει πρώτα να λάβει και να
    εφαρµόσει τα ζητούµενα CSS. (Render Blocking CSS αλλά και JS φυσικά)
    ü  Στο διάστηµα αυτό ίσως δούµε τη σελίδα για λίγο χωρίς styles.
    ü  Σε αυτό το διάστηµα συµβαίνει το FOUC - Flash Of Unstyled Content.
    Το Cri4cal CSS είναι το απόλυτα αναγκαίο CSS κομμάτι που πρέπει να φορτώσει
    πριν φορτώσει πλήρως η σελίδα. Αυτό το κομμάτι είναι το "above the fold" που βλέπετε σαν recommenda4on
    στο Google Pagespeed.
    

    View full-size slide

19. 

    Critical CSS - Above the fold content tips
    Ένα καλό εργαλείο για να βρούμε το Cri4cal CSS είναι αυτό
    hdp://www.sitelocity.com/cri4cal-path-css-generator
    Προσοχή, υπάρχει πιθανότητα να πρέπει να αλλάξουμε τα paths των αρχείων σε absolute paths.
    Ένα επίσης πολύ καλό εργαλείο που λειτουργεί και με το Autop4mize είναι το hdps://cri4calcss.com/
    Το CSS που λαμβάνω το τοποθετώ στο ειδικό πεδίο στο Autop4mize ή στο Caching Plugin που χρησιμοποιώ.
    

    View full-size slide

20. 

    DNS Prefetch
    Με το Prefetch ο browser µπορεί να «φέρει» resources από ένα URL και να τις αποθηκεύσει στην µνήµη cache που διαθέτει
    για µελλοντική χρήση
    To DNS Prefetch είναι τεχνική βελτιστοποίησης. Μέσω ενός meta tag στην σελίδα µας ο browser
    «φορτώνει» στο background τα περιεχόµενα κάποιων hosts όπως πχ //fonts.googleapis.com/ κάνοντας DNS Lookups.
    Στο WordPress µπορούµε να χρησιµοποιήσουµε το wp_resource_hints filter.
    Δεν υποστηρίζεται από τον Opera Mini browser. Οι περισσότεροι browsers το κάνουν αυτόµατα.
    
    
    
    1.  To Prerender είναι µία «επέκταση» του DNS prefetch. Όχι µόνο «κατεβάζει» τα δεδοµένα του host αλλά τους συµπεριφέρεται σαν
    να έχουµε ανοίξει ένα δεύτερο tab.
    Prerender
    

    View full-size slide

21. 

    CDN – Content Delivery Network
    Εξασφαλίζει βέλτιστη διανοµή των αρχείων της
    ιστοσελίδας
    Τα αρχεία είναι διαθέσιµα παγκοσµίως
    Αντιγράφονται τα αρχεία µας στο server και
    σερβίρονται όχι πλέον από το δικό µας URL αλλά
    από το URL του CDN.
    Πολλά caching plugins και όχι µόνο υποστηρίζουν τη
    δυνατότητα CDN.
    https://wordcamp-9c29.kxcdn.com/wordcamp/wp-content/
    cache/autoptimize/css/
    autoptimize_eaf3ffce54f9f4c159d6cb3bcda06932.css
    

    View full-size slide

22. 

    Χωρίς CDN
    Με χρήση CDN
    

    View full-size slide

23. 

    Επιπλέον πράγµατα που πρέπει να ληφθουν υπόψιν:
    q  Ενεργοποίηση Gzip Compression στο server – Πολύ σηµαντικό
    q  Να µην χρησιµοποιείται @import σε CSS αρχεία. Αυτό γιατί µπορεί να υπάρξει σηµαντική καθυστέρηση φόρτωσης.
    q  Χρησιµοποίηση Expire Headers. Αυτό ρυθµίζεται είτε από το htaccess , είτε µε plugin.
    q  Κατά τη φόρτωση της σελίδας να µην υπάρχουν errors, ειδικά «Not found errors».
    q  Να χρησιµοποιείτε βέλτιστα image sizes στο WordPress ώστε να σερβίρονται scaled images.
    q  Μην κάνετε υπερβολική χρήση WordPress plugins.
    q  Σερβίρετε Videos είτε embedded είτε µέσω API και όχι από το server σας.
    q  Καλό θα είναι να αφαιρούνται τα query strings από τα resources για παράδειγµα
    https://example.com/wp-content/plugins/revslider/public/assets/js/extensions/
    revolution.extension.layeranimation.min.js?version=5.4.6
    q  Γενικότερα ή βελτιστοποίηση µίας ιστοσελίδας θέλει χρόνο και απαιτεί κόπο. Μην ξεχάσετε αφού την ολοκληρώσετε
    να κάνετε έλεγχο της ιστοσελίδας ότι λειτουργεί καλά.
    

    View full-size slide

24. 

    ΕΡΩΤΗΣΕΙΣ;
    Ευχαριστώ πολύ για την παρακολούθηση.
    Μπορείτε να βρείτε αρκετά παραδείγµατα κώδικα καθώς και
    references εδώ
    https://pastebin.com/u/ArchimidisM/1/q1DEkwhd
    Επίσης µπορείτε να µε βρείτε και προσωπικά στο email
    [email protected]
    

    View full-size slide