Η Google ξεκίνησε το project AMP – Accelerated Mobile Pages τον Οκτώβριο του 2015, με στόχο την βελτίωση των επιδόσεων των ιστοσελίδων σε όλες τις φορητές συσκευές.
Όλο αυτό ξεκίνησε όταν οι φορητές συσκευές που συνδέονταν στο διαδίκτυο (τελευταία νέα για την χρήση συσκευών), γίνονταν ολοένα και περισσότερες, και έγινε πλέον εμφανές ότι οι μέθοδοι που υπάρχουν για τον σχεδιασμό και την δημιουργία των ιστοσελίδων, όπως και οι τρόποι παράδοσης τους μέσα από το Web, δεν ήταν πλέον ικανές να αντεπεξέλθουν.
Ειδικά όταν μιλάμε για πιο “βαριές” σελίδες, με διάφορα script ή/και media elements, δεν καταλήγουν να φαίνονται μόνο άσχημες στις μικρότερες οθόνες, αλλά αργούν πάρα πολύ και να φορτώσουν. Για αυτούς που η ιστοσελίδα τους αποτελεί κομμάτι μιας επιχείρησης, όλα αυτά σημαίνουν και την απώλεια επισκεπτών και κατά συνέπεια αγορών.
Η ιδέα της Google ήταν να βρουν τον καλύτερο τρόπο που μπορούν, για να παραδοθούν στον χρήστη σελίδες με rich content όπως videos, animations και γραφικά, όσο πιο άμεσα γίνεται. Ο ίδιος κώδικας όμως πρέπει να είναι συμβατός με όλες τις πλατφόρμες και τις συσκευές ώστε οι επιδόσεις να βελτιωθούν ανεξάρτητα με το τι είδους τηλέφωνο/tablet/άλλη συσκευή χρησιμοποιεί ο χρήστης.
Αυτό έγινε και ο λόγος που δημιουργήθηκε το AMP HTML, το framework που κατασκευάστηκε εξ ολοκλήρου από ήδη υπάρχουσες Web τεχνολογίες, και είναι η απάντηση σε όλα τα παραπάνω.
Και έτσι τον Φεβρουάριο του 2016, πρωτοεμφανίστηκε στο διαδίκτυο το συγκεκριμένο framework, και σιγά σιγά κέρδισε την εμπιστοσύνη του internet. Τον Μαίο του 2017 η Google ανακοίνωσε ότι 900.000 domains δημοσιεύουν AMPs, και υπάρχουν 2 δισεκκατομυρια AMPs παγκοσμίως. Και τον Ιούνιο του 2017 το Twitter άρχισε να συνδέει τα links με τα AMPs στα apps για τις φορητές συσκευές (Android & iOS).
Ας δούμε όμως πως δουλεύει το framework.
Τα AMPs έχουν 3 βασικά μέρη: AMP HTML, AMP JS, AMP Cache.
AMP HTML
Είναι η γνωστή γλώσσα HTML αλλά έχουν κρατήσει μόνο αυτά που θεώρησαν απολύτως απαραίτητα, και την έχουν εμπλουτίσει με μερικά πράγματα.
|
1 2 3 4 5 6 7 8 9 10 11 |
<!doctype html> <html ?> <head> <meta charset="utf-8"> <link rel="canonical" href="hello-world.html"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head> <body>Hello World!</body> </html> |
Στην αρχή βλέπουμε ότι το html tag είναι <html ?>, το οποίο μπορούμε να το γράψουμε και <html amp>.
Οτιδήποτε θέλουμε να κάνουμε με το CSS πρέπει να προστεθεί μέσα στο head χρησιμοποιώντας το tag <style amp-custom>. (δεν δέχεται κανένα εξωτερικό αρχείο CSS)
Και πριν κλείσουμε το <head> πρέπει να βάλουμε το special tag <style amp-boilerplate>.
AMP JS
Γενικότερα δεν γίνονται δεκτά τα περισσότερα third-party JavaScript, αφού μπορεί να είναι η αιτία πολλών προβλημάτων στην επίδοση της ιστοσελίδας. Αλλά αν προσέξετε στον παραπάνω κώδικα, υπάρχει ένα tag <script>. Έτσι μπορούμε να καλέσουμε την AMP JS library, που είναι σχεδιασμένη για το γρήγορο rendering των σελίδων, αφού υλοποιεί τις βέλτιστες πρακτικές, διαχειρίζεται το resource loading και μας δίνει τα custom tags του AMP.
Από τις πιο σημαντικές βελτιώσεις με αυτή την βιβλιοθήκη, είναι ότι οποιοδήποτε εξωτερικό αρχείο πρέπει να φορτωθεί, γίνεται ασύγχρονα. Έτσι τίποτα δεν μπορεί να δημιουργήσει πρόβλημα στην διαδικασία φόρτωσης.
Άλλες βελτιώσεις είναι το sandboxing των iframes, ο υπολογισμός εκ των προτέρων του layout για κάθε element της σελίδας πριν φορτωθεί οτιδήποτε και η απενεργοποίηση των αργών CSS selectors.
AMP Cache
Και το τρίτο κομμάτι είναι η Cache. Όπως όλοι γνωρίζουμε είναι κάτι πολύ σημαντικό στις Web εφαρμογές. Η Google υλοποίησε την δική της proxy-based cache για να εξυπηρετεί όλα τα AMPs. Αφού λάβει μια σελίδα, άμεσα την περνάει στην Cache για τυχόν επόμενα αιτήματα. Εκτός αυτού, τα κείμενα, τα αρχεία JS και οι εικόνες φορτώνονται από την ίδια πηγή με HTTP 2.0, για καλύτερη απόδοση.
Κάθε φορά που μία σελίδα περνάει στην cache, ελέγχεται και επικυρώνεται ότι λειτουργεί σωστά, και ότι δεν εξαρτάται από εξωτερικές πηγές. Το σύστημα επικύρωσης περνά από μια σειρά από tests την σελίδα, σύμφωνα με το AMP HTML specification.
Το URL των AMPs
Οι σελίδες που έχουν βελτιστοποιηθεί σύμφωνα με το framework, χρειάζονται και ένα ξεχωριστό URL. Αυτό θα τελειώνει σε “‘/amp”. Για παράδειγμα, https://www.geekd.gr/Η-mona-lisa-του-μαθηματικού-da-vinci/amp/
Αν βέβαια δουλεύετε σε κάποιο CMS, υπάρχουν αντίστοιχα διάφορα plugins που κάνουν σχετικά καλά την μετατροπή των σελίδων σας σε AMPs αλλά χρειάζεται προσοχή.
Επίλογος
Πρέπει να σημειώσουμε ότι τα sites που χρησιμοποιούν το framework, χρίζουν ειδικής μεταχείρισης από την Google, και στο πως εμφανίζονται στα αποτελέσματα των αναζητήσεων από φορητές συσκευές, αλλά και θεωρείται ότι έχει γίνει ένα κριτήριο για τα rankings.
Τέλος, σίγουρα έχει γίνει αρκετά καλή δουλειά αφού η βελτίωση της ταχύτητας των σελίδων είναι εμφανής. Όπως έχουν δηλώσει και η ίδια η Google, αλλά και τρίτοι οργανισμοί, οι σελίδες φορτώνουν κατά μέσο όρο μέσα σε ένα δευτερόλεπτο. Κάτι που έρχεται σε σύγκριση με τα 5, 7, 10 ή και παραπάνω δευτερόλεπτα που χρειάζονται αρκετές τυπικές σελίδες.
Πηγές
agathan
Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών
του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην
τεχνική υποστήριξη του τμήματος. Ακολούθησε το
μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Google Ads engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.
"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien
Latest posts by agathan (see all)
- Αφιλόξενος πλανήτης Αφροδίτη: θα μπορούσε να υπάρχει ζωή; - 1 Οκτωβρίου 2020
- Τα ιπτάμενα αυτοκίνητα αρχίζουν να γίνονται πραγματικότητα - 13 Σεπτεμβρίου 2020
- Η ιστορική εκτόξευση της SpaceX που θα μεταφέρει αστροναύτες στον ISS - 26 Μαΐου 2020
Αφήστε ένα σχόλιο