AMP'ing Up Το Πλαίσιο AMP

Από τον Konstantin Sokhan, Διευθυντή Σχεδίασης & David Tapp, Συνεργάτης Πελάτη, MetaLab

TL · DR - Ταξιδεύσαμε στον κόσμο της AMP και μάθαμε κάποια πράγματα

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

Τι είναι το AMP;

Το AMP είναι ένα πλαίσιο ανοικτού κώδικα για την οικοδόμηση αποτελεσματικών ιστοσελίδων υψηλής απόδοσης. Αυτήν τη στιγμή χρησιμοποιείται κυρίως για περιεχόμενο σύνταξης στο κινητό αλλά αυξάνεται πέρα ​​από αυτό για ευρύτερη χρήση σε διάφορες αγορές (και μεγέθη οθόνης).

Βλέποντας και τις δύο πλευρές

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

Το AMP επιτρέπει στους δημιουργούς ιστότοπων να φιλοξενούν μια στατική βελτιστοποιημένη για κινητά έκδοση οποιασδήποτε από τις σελίδες του ιστότοπου τους, τις πλατφόρμες διανομής όπως η μνήμη cache της Google και την εξυπηρέτηση των χρηστών. Μεγάλο μέρος της κριτικής της AMP στοχεύει στην προσέγγιση της Google για την προσωρινή αποθήκευση των σελίδων υπηρεσίας AMP από τον τομέα google.com. Αυτό που αξίζει να αποσαφηνιστεί είναι ότι η μνήμη cache της σελίδας AMP και το πλαίσιο βελτιστοποίησης κινητής τηλεφωνίας AMP HTML είναι ξεχωριστά προϊόντα. Μια σελίδα που έχει κατασκευαστεί με τη χρήση του AMP HTML μπορεί να φιλοξενηθεί ιδιωτικά σε οποιονδήποτε διακομιστή, μπορείτε να επωφεληθείτε από όλες τις δυνατότητες του πλαισίου χωρίς να φιλοξενήσετε το Google το περιεχόμενό σας.

Μην αφήσετε το όνομα να σας ξεγελάσει

Το AMP σημαίνει "Επιταχυνόμενες σελίδες κινητών". Με τους απλούστερους όρους, μπλοκάρει τα περισσότερα από τα στοιχεία που προκαλούν επιβράδυνση του ιστού στο κινητό, όπως μεγάλες ποσότητες JavaScript, δέσμες ενεργειών παρακολούθησης τρίτων και διογκωμένο CSS. Επιτρέπει στο περιεχόμενο να φορτώνεται σχεδόν αμέσως. Το AMP σχεδιάστηκε για προσωρινά αποθηκευμένες σελίδες, αλλά τώρα εξελίσσεται σε ένα ευρύτερο σύνολο εργαλείων για την επιδιόρθωση του κινητού ιστού (καθώς η πλειοψηφία των χρηστών είναι σήμερα κινητά, μερικά φορτία τοποθεσίας μπορούν να διαρκέσουν μερικά λεπτά). Παρόλο που το M σημαίνει Mobile, το AMP μπορεί να βοηθήσει απολύτως στη βελτίωση της ταχύτητας φόρτωσης σε οποιαδήποτε συσκευή ή τύπο προγράμματος περιήγησης.

Το Σύντομο

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

Τι χτίζουμε και γιατί

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

Μετά από κάποια ανταλλαγή ιδεών, προσγειώσαμε στην ιδέα ότι οι διαδικτυακές γκαλερί τέχνης και τα μουσεία είναι συνήθως διασκεδαστικές, αφηρημένες και δεν παίζουν με τους κανόνες όταν πρόκειται για την παρακολούθηση συμβατικών διατάξεων πλέγματος web. Με την ιδέα αυτή δημιουργήσαμε μια γκαλερί ζωγραφικής τέχνης ως αποδεικτικό στοιχείο για τον επαναπροσδιορισμό των δυνατοτήτων της AMP. Κατασκευάσαμε έναν ιστότοπο που αξιοποίησε τις καλύτερες πρωτοβουλίες και βασίστηκε στα θεμέλια του. Οι ομάδες μας βασίστηκαν στη δύναμη της AMP για να εξασφαλίσουν ότι ο ιστότοπος ήταν εξαιρετικά αποτελεσματικός, ενώ παράλληλα εισήγαγε νέα χαρακτηριστικά και στοιχεία στο πλαίσιο, συμπεριλαμβανομένων των εξειδικευμένων εμπειριών parallax, του hover states και άλλων. Είχαμε ακόμη και λίγη διασκέδαση με τη δυνατότητα μιας βυθιζόμενης έκδοσης VR που έγινε στο AMP για εξέταση. Δοκιμάστε την απόδειξη της ιδέας στο τηλέφωνό σας εδώ.

Σχεδιασμός για το Art Gallery AMP Site

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

Σχεδιασμός για την κράτηση θέσεων ταξιδιού AMP

Ποιος είναι ο AMP For;

Σήμερα, η AMP είναι προσανατολισμένη στους ανθρώπους εν κινήσει, οι οποίοι είναι βαριές στο περιεχόμενο εκδοτικού ύφους (ειδήσεις και ιστολόγια στα τηλέφωνά τους) και στο ηλεκτρονικό εμπόριο. Εκεί όπου θα φανταστεί κανείς ότι η έντονη υιοθεσία θα γίνει είναι με ιστότοπους που προσπαθούν να είναι πέρα ​​από τις επιδόσεις ή έχουν ένα ευρύ φάσμα διεθνών ακροατηρίων. Επί του παρόντος, η μέση κινητή ιστοσελίδα σε μια σύνδεση 3G διαρκεί περίπου 19 δευτερόλεπτα για να φορτώσει και σχεδόν ο μισός κόσμος εξακολουθεί να τρέχει σε αυτήν - αυτό προφανώς πρέπει να βελτιωθεί και AMP μπορεί να βοηθήσει. Καθώς ο ιστός συνεχίζει να στηρίζεται κυρίως σε κινητά, η δημιουργία αποτελεσματικότητας εδώ είναι λογική και απαραίτητη. Το AMP μπορεί ενδεχομένως να παράσχει ένα σχέδιο για τη βελτίωση της πρόσβασης στις πληροφορίες στις αναπτυσσόμενες χώρες.

Ζούμε στο μέλλον;

Δεν είναι αρκετά, αλλά κάνει πρόοδο καθημερινά! Οι ιστοσελίδες AMP που βρίσκονται σήμερα στο διαδίκτυο εξακολουθούν να είναι κυρίως μέσα μαζικής ενημέρωσης, ειδήσεις και συντακτικό περιεχόμενο (προς το παρόν). Τα οφέλη είναι προφανή, δεδομένου ότι βασίζεται στην AMP, παρέχει μια σημαντική ώθηση στην απόδοση και στην ανακάλυψη. Είναι η AMP και οι προσδοκίες της για το μέλλον όλων των ιστών; Μπορεί. Μάλλον όχι. Ένα πράγμα είναι σίγουρο, οι σπουδές και οι βέλτιστες πρακτικές που το πλαίσιο βοηθά να καθιερώσουν είναι σίγουρα εδώ για να μείνουν. Το AMP χτίζεται επίσης στην κορυφή της τελευταίας και μεγαλύτερης στον ιστό σε πραγματικό χρόνο με την ανάπτυξη των χαρακτηριστικών του. Η αναπτυξιακή της κοινότητα προσπαθεί συνεχώς να ενημερώνεται για τις νέες τάσεις. προωθώντας προορατικά την επερχόμενη λειτουργικότητα του ιστού και σας το δίνουμε σήμερα.

Μαθήματα ανάπτυξης με βάση τις γνώσεις μας από την AMP

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

  1. Το AMP απαγορεύει το προσαρμοσμένο JavaScript έξω από ένα iframe, αναγκάζοντάς σας να βασίζεστε στη βιβλιοθήκη βελτιστοποιημένου κώδικα. Αυτό γίνεται για να διασφαλιστεί ότι κανένας κακώς βελτιστοποιημένος ή κακόβουλος κώδικας δεν έχει την ευκαιρία να εμποδίσει την εμπειρία του χρήστη. Παρατηρούμε ότι πολλοί, άλλως καλά κατασκευασμένοι ιστότοποι, μπορούν να επιβραχυνθούν από τη συμπερίληψη μεμβρανών διαφημίσεων και σεναρίων παρακολούθησης. Η σημασία της βελτιστοποίησης και προσεκτική εξέταση του κώδικα JavaScript που περιλαμβάνεται στον ιστότοπό σας είναι μια πολύ σημαντική διοργάνωση από την AMP.
  2. Το AMP δίνει προτεραιότητα στο περιεχόμενο που είναι ορατό στον χρήστη. Ξέρει ποιο περιεχόμενο βρίσκεται κάτω από την πτυχή και απομακρύνει τη φόρτωση ή την απόδοση του μέχρι να είναι απαραίτητο. Οι επισκέπτες στις σελίδες AMP δεν θα πρέπει ποτέ να περιμένουν καθώς όλες οι εικόνες και οι διαφημίσεις φόρτωσης αποκλείουν την πρόσβασή τους στη σελίδα. Επιπλέον, εάν ένας επισκέπτης δεν αποφασίσει ποτέ να μετακινηθεί προς τα κάτω, κανένα από τα δεδομένα του κινητού δεν χάθηκε, φορτώνοντας περιεχόμενο που δεν θα μπορούσε να δει ποτέ.
  3. Το AMP έχει επιλύσει το "load jank". Σε μια σελίδα AMP, κάθε στοιχείο πρέπει να έχει ένα προκαθορισμένο γνωστό ύψος, είτε πρόκειται για διαφήμιση, εικόνα ή βίντεο είτε για μια παράγραφο κειμένου. Ποτέ δεν θα εμφανιστεί η μετατόπιση περιεχομένου στην οθόνη σας ως στοιχεία πάνω από το φορτίο.
  4. Απόδοση διαφημίσεων: Η AMP ορίζει τη νέα γραμμή για την ενσωμάτωση διαφημίσεων στους ιστότοπους. Οι διαφημίσεις πρέπει να συμπεριφέρονται σωστά στη σελίδα και πρέπει να συμμορφώνονται με τη βέλτιστη εμπειρία χρηστών. Αντίο πλήρους οθόνης εξαγορές και άλλο ενοχλητικό περιεχόμενο που δεν θέλετε στη σελίδα. Η AMP επιβάλλει ότι οι διαφημίσεις συμπεριφέρονται σαν καλοί πολίτες.

Κλείνοντας

Αυτή η ευκαιρία ήταν προκλητική, διασκεδαστική και έδωσε κάποια νέα προοπτική. Μας δόθηκε μεγάλη ευελιξία, ενώ παράλληλα έπρεπε να βρούμε αντισυμβατικούς τρόπους να τηρήσουμε τις προϋποθέσεις εντός του πλαισίου AMP. Μάθαμε πολύ περισσότερα από ό, τι πιστεύαμε ότι ήμασταν σε επαφή με την AMP και αποκάλυψα κάποιες προηγούμενες παρανοήσεις. Εργαζόμενοι στο πλαίσιο, καταλήξαμε με μια ακόμη ισχυρότερη κατανόηση του πού πηγαίνει ο ιστός και πώς μπορεί να μάθει από την AMP. Αν ενδιαφέρεστε να δημιουργήσετε τον επόμενο ιστότοπό σας, βεβαιωθείτε ότι έχετε ελέγξει τα πρότυπα, τα οποία είναι πλήρως ανοιχτά, ελεύθερα στη χρήση και μπορούν να μεταφορτωθούν στο ampstart.com.