Οδηγός αρχαρίων για επιταχυνόμενες σελίδες για κινητά (AMP)

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

Η βραδύτητα δεν είναι μόνο πρόβλημα UX, αλλά επίσης μειώνει τα ποσοστά μετατροπής, και βλάπτει την προσβασιμότητα αποκλείοντας τους χρήστες με βραδύτερες συνδέσεις στο διαδίκτυο. ΑΜΠΕΡΑΖ είναι μια ομαδική προσπάθεια που ξεκίνησε με στόχο να επιτρέψει στους εκδότες δημιουργία βελτιστοποιημένου περιεχομένου για κινητά μία φορά, και να το φορτώσετε αμέσως παντού.

Από την έναρξη, πολλοί εκδότες όπως το BBC, το The Economist, το Guardian News και οι Financial Times έχουν εφαρμόσει την πρωτοβουλία, οπότε μπορούμε τώρα να υποθέσουμε με ασφάλεια ότι η AMP είναι μια καινοτομία που αξίζει να εξεταστεί για όλους όσους θέλουν να παραμείνουν ανταγωνιστικοί στο κινητό ιστός.

AMP σε δράση

Πριν βυθιστείτε στις λεπτομέρειες, εδώ είναι το AMP demo, ώστε να μπορείτε να δείτε το σε δράση. Το demo είναι προσβάσιμο σε αυτόν τον σύνδεσμο.

Για να δείτε το AMP σε δράση, πρέπει να κάνετε δύο πράγματα:

1. Προβολή της επίδειξης είτε σε κινητή συσκευή είτε σε προσομοιωτή κινητού, π.χ. Προσομοιωτής κινητών συσκευών Chrome DevTools.
2. Εκτελέστε ερώτημα αναζήτησης στη γραμμή αναζήτησης. Καθώς το Google AMP λειτουργεί αυτή τη στιγμή κυρίως με τον ιστότοπο ειδήσεων, η καλύτερη επιλογή είναι μια νέα ιστορία ειδήσεων.

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

Όπως μπορείτε να δείτε, οι σελίδες AMP εμφανίζονται ως Κάρτες εμπλουτισμένες με Google, ένα κινητό-βελτιστοποιημένο καρουσέλ εικόνας, που κυκλοφόρησε το Google τον Μάιο του 2016.

Παρατηρήστε πώς η Google διαφοροποιεί τις σελίδες AMP από άλλες σελίδες βελτιστοποιημένες για κινητά χρησιμοποιώντας 2 διαφορετικές ετικέτες: AMP και κινητό. Αξίζει επίσης να κάνετε κλικ σε μερικά από τα αποτελέσματα για να δείτε πώς μοιάζει μια ιστοσελίδα AMP και πόσο γρήγορα τρέχει στο κινητό.

Τεχνικό υπόβαθρο

Το AMP είναι a web πρότυπο με βάση τις υπάρχουσες τεχνολογίες ιστού, και με επίκεντρο το στατικό περιεχόμενο. Εχει 3 διαφορετικά μέρη:

1. AMP HTML: τροποποιημένη HTML με (1) ο περιορισμός ορισμένων τυπικών λειτουργιών HTML / CSS και (2) την εισαγωγή νέων προσαρμοσμένων ετικετών (Components)
2. AMP JS: επιβάλλει βέλτιστες πρακτικές προκειμένου να μειωθεί ο χρόνος φόρτωσης της σελίδας
3. ΑΜΠΕΡΑΖ CDN: μια προσωρινή μνήμη με ενσωματωμένο σύστημα επικύρωσης, που βελτιστοποιεί περαιτέρω τον ιστότοπό σας

Εάν θέλετε να μάθετε περισσότερα σχετικά με το τεχνικό υπόβαθρο των σελίδων AMP, δείτε το παρακάτω βίντεο στο οποίο ο Paul Bakaus της Google δίνει ένα εισαγωγική συζήτηση στο AMP.

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

AMP HTML

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

Ας ρίξουμε μια ματιά στα πιο σημαντικά πράγματα που πρέπει να ξέρετε γι 'αυτό. Μπορείτε επίσης να ρίξετε μια ματιά στην πλήρη προδιαγραφή AMP HTML.

Αποφασίστε εάν θέλετε ξεχωριστή σελίδα AMP

Για την ίδια σελίδα στατικού περιεχομένου, μπορείτε να έχετε 2 ξεχωριστές εκδόσεις - ένα για το AMP και ένα για την έκδοση AMP. Μπορείτε επίσης να επιλέξετε να έχετε μόνο μία έκδοση - τη σελίδα AMP και να την χρησιμοποιείτε παντού. Σχετικά με υποστήριξη του προγράμματος περιήγησης, Η σελίδα Github της AMP ισχυρίζεται:

Αν εξακολουθείτε να ανησυχείτε για την υποστήριξη του προγράμματος περιήγησης, ανατρέξτε στη δημοσίευση του Paul Irish της Google στο Stackoverflow.

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

Προσθέστε τον ακόλουθο κώδικα στο στην σελίδα μη-AMP:

Προσθέστε επίσης την ακόλουθη γραμμή στο στη σελίδα AMP:

Αν έχετε μόνο μία σελίδα AMP, θα πρέπει να συνεχίσετε συνδέστε τον από τον εαυτό του με τον ακόλουθο τρόπο:

Ξεκινώντας το Boilerplate

Το πρόγραμμα AMP προσφέρει διαφορετικά εκτοξευτήρες μπορείτε να το χρησιμοποιήσετε για να ξεκινήσετε. Ρίξτε μια ματιά στο απλούστερο boilerplate AMP HTML παρακάτω:

          Γειά σου Κόσμε!  

Μπορείτε να δείτε ότι το boilerplate συνδέει την κανονική σελίδα HTML χρησιμοποιώντας το ετικέτα. ο > η ετικέτα προσθέτει το Βιβλιοθήκη AMP JS.

ο

Μπορείτε να το έχετε μόνο ένας ενσωματωμένο φύλλο στυλ, και υπάρχουν επίσης πολλά απαγορευμένους κανόνες στυλ, για παράδειγμα, δεν μπορείτε να χρησιμοποιήσετε το !σπουδαίος τον προκριματικό, το @εισαγωγή κανόνα και ψευδο-τάξεις.

Μην ξεχάσετε να ελέγξετε τους περιορισμούς φύλλου στυλ πριν αρχίσετε να γράφετε CSS για τις σελίδες AMP.

Υπάρχει ένα άλλο πράγμα που είναι σημαντικό να γνωρίζετε για τους κανόνες στυλ AMP: εσείς δεν μπορείτε να χρησιμοποιήσετε οποιαδήποτε διάταξη θέλετε - καθώς είναι μια από τις αρχές της AMP για να επιτρέψει στο πρόγραμμα περιήγησης να υπολογίστε το χώρο κάθε στοιχείου στη σελίδα εκ των προτέρων.

Ρίξτε μια ματιά στις υποστηριζόμενες και μη υποστηριζόμενες διατάξεις.

AMP JS

Τα έγγραφα AMP μπορούν να περιλαμβάνουν ούτε συγγραφέας-γραπτό, ούτε JavaScript τρίτου μέρους, ωστόσο αυτό δεν σημαίνει ότι οι Επιταχυνόμενες Κινητές Σελίδες δεν χρησιμοποιούν καθόλου το JavaScript. Η βιβλιοθήκη JavaScript της AMP (το AMP runtime) είναι υπεύθυνη για τη γρήγορη φόρτωση και απόδοση σελίδων AMP επιβάλλοντας τις καλύτερες πρακτικές απόδοσης.

Στοιχεία AMP

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

Κάθε στοιχείο AMP περιέχει a συγκεκριμένους εξωτερικούς πόρους (μια εικόνα, ένα βίντεο, μια ενσωμάτωση κλπ.). Οι εξωτερικοί πόροι είναι επιρρεπείς στην επιβράδυνση των ιστοτόπων. Ο κύριος στόχος αυτής της λύσης είναι να διαχείριση της φόρτωσης εξωτερικών πόρων με έναν λογικό τρόπο με την εκτέλεση τους μέσα σε sandboxes.

Το AMP σας παρέχει 2 είδη στοιχείων:

1. Ενσωματωμένα στοιχεία: είναι πάντα διαθέσιμα σε κάθε έγγραφο AMP, είναι ενσωματωμένο σωστά στο χρόνο εκτέλεσης AMP. Επί του παρόντος υπάρχουν πέντε από αυτά:
   1. για την προβολή διαφημίσεων
   2. για εικόνες, χρησιμοποιείται αντί για ετικέτα
   3. για εικονοστοιχεία παρακολούθησης (χρησιμοποιούνται για την καταμέτρηση των προβολών σελίδας)
   4. για απευθείας ενσωμάτωση αρχείων βίντεο HTML5, αντικαθιστά το ετικέτα
   5. για ενσωματωμένα στοιχεία (μπορεί να χρησιμοποιηθεί αντί για σε ορισμένες περιπτώσεις)
2. Εκτεταμένα στοιχεία: Πρόσθετα εξαρτήματα, πρέπει να τις συμπεριλάβει ρητά στο έγγραφο AMP. Υπάρχουν πολλές χρήσιμες, όπως και , δείτε την πλήρη λίστα. Πολλοί από αυτούς μπορούν να συνηθίσουν ενσωμάτωση περιεχομένου από υπηρεσίες τρίτων, όπως από το Twitter ή το Instagram.

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

AMP CDN

ο AMP CDN είναι βασικά μια κρυφή μνήμη, που ονομάζεται Cache της Google AMP. Λαμβάνει έγκυρα έγγραφα AMP, αποθηκεύει κρυφά και φορτώνει. Το AMP CDN έχει επίσης ένα ενσωματωμένο σύστημα επικύρωσης.

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

Είναι καλό να γνωρίζουμε ότι το AMP CDN χρησιμοποιεί το πρωτόκολλο HTTP / 2 για να επιτύχει την καλύτερη δυνατή απόδοση.

Εργαλεία AMP

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

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

Το Lullabot AMP PHP Βιβλιοθήκη σας επιτρέπει να μετατρέψετε τις σελίδες σας HTML σε AMP HTML, και αναφέρει επίσης τη συμμόρφωση οποιουδήποτε εγγράφου HTML με τα πρότυπα AMP.

Αν θέλετε να χρησιμοποιήσετε το AMP στον ιστότοπό σας στο WordPress, διαβάστε το σεμινάριο του Yoast σχετικά με τον τρόπο ρύθμισης του WordPress για AMP και πώς λειτουργεί το AMP με το plugin Yoast SEO.

Μπορείτε επίσης να ελέγξετε το Automattic's Προσθήκη AMP που σας επιτρέπει να ενεργοποιήσετε τις Επιταχυνόμενες Κινητές Σελίδες στον ιστότοπό σας WordPress.

Περαιτέρω σκέψεις

Αν δεν είστε ακόμα πεπεισμένοι, ρίξτε μια ματιά στο βίντεο για ένα γρήγορη δοκιμή ταχύτητας παρακάτω.

Ο Jonathan Abrams, ο ιδρυτής του Nuzzel, κάνει ακόμα καλύτερους ισχυρισμούς, καθώς ισχυρίζεται ότι ακόμη και οι τοποθεσίες βελτιστοποιημένων από κινητά όπως οι New York Times φορτώνουν σημαντικά ταχύτερα - αντί να πάρει τρία δευτερόλεπτα για να φορτώσει τη μέση σελίδα, φορτώνεται μια σελίδα λιγότερο από μισό δευτερόλεπτο όταν είναι ενεργοποιημένες οι Επιταχυνόμενες σελίδες για κινητά της Google.

Μπορείτε επίσης να διαβάσετε ένα ενδιαφέρον άρθρο στο Verge σχετικά με τον ανταγωνισμό του Google AMP και του Instant Articles του Facebook. Εάν εξακολουθείτε να ψάχνετε μια απάντηση για το "ποιο είναι το καλώδιο;", ελέγξτε τη δημοσίευση του Yoast, η οποία αναφέρει τους φόβους ότι η AMP μας φέρνει ουσιαστικά πίσω στο διαδίκτυο πριν από το 2000 και αμφισβητεί αν είναι πραγματικά ανοιχτό πρότυπο.

.