Αναμείνατε ολίγον τι
Web Devel

Τι είναι τo AMP και πως το χρησιμοποιούμε

Τι είναι τo AMP και πως το χρησιμοποιούμε

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

 

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

Πηγές

Μοιραστείτε το άρθρο

The following two tabs change content below.
agathan

agathan

Αποφοίτησα απο το τμήμα Εφαρμοσμένων Μαθηματικών του Πανεπιστημίου Κρήτης. Κάτα την διάρκεια εργάστηκα στην τεχνική υποστήριξη του τμήματος. Ακολούθησε το μεταπτυχιακό μου, Msc In Applied Mathematics at University Of Delaware. Ύστερα δούλεψα για μερικά χρόνια σαν web developer (CMS and what not) και SEO/Adwords engineer.
Και τώρα είμαστε στο GeekD, μια λέξη που περιγράφει όλα τα παραπάνω.

"All we have to decide is what to do with the time that is given us."
-Gandalf The Grey, JRR Tolkien

Αφήστε ένα σχόλιο

Επιλογές της ομάδας
Νέα εντυπωσιακά ευρήματα από το ναυάγιο των Αντικυθήρων
Μελέτη σε αρχαίο κείμενο αποκαλύπτει νέα στοιχεία για την προέλευση του μηδενός
Τα 10++ καλύτερα plugins αναζήτησης του Wordpress για το 2017
Ο «ανθρώπινος υπολογιστής» Katherine Johnson, τιμάται από τη NASA για το σπουδαίο έργο της στις διαστημικές αποστολές
Έξι επιστήμονες της NASA πέρασαν έναν χρόνο «αρειανής ζωής» στη Γη
tablet - smartphone
Flash player and Html 5 logos
cassini grand finale video still Science Breakthrough
Catan in Virtual Reaiity
Close

Συνεχίζοντας να χρησιμοποιείτε την ιστοσελίδα, συμφωνείτε με τη χρήση των cookies. Περισσότερες πληροφορίες.

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

Κλείσιμο