Ръководство за начинаещи за ускорени мобилни страници (AMP)

Ускорени мобилни страници е инициативата на Google, която има за цел да реши най-големия проблем на мобилната мрежа - скорост. Страхотните потребителски преживявания, които проектираме с голяма грижа, са болезнено бавни на мобилния телефон.

Забавянето не е само проблем на UX, но също така намалява процента на реализации, и уврежда достъпността като изключи потребителите с по-бавни интернет връзки. AMP е екип, чиято цел е да позволи на издателите създаване на мобилно оптимизирано съдържание веднъж и да се зарежда незабавно навсякъде.

От пускането на пазара много издатели като BBC, The Economist, Guardian News и Financial Times изпълниха инициативата, така че до сега можем спокойно да предположим, че AMP е иновация, която си струва да се обмисли за всеки, който иска да остане конкурентен на мобилния мрежа.

AMP в действие

Преди да се потопите в подробностите, ето го AMP демо, значи можеш вижте го в действие. Демото може да бъде достъпно на тази връзка.

За да видите AMP в действие, трябва да направите две неща:

Разгледайте демонстрацията или на мобилно устройство, или на мобилен симулатор, напр. Симулатор за мобилни устройства на Chrome DevTools.
Изпълнете заявката за търсене в лентата за търсене. Тъй като Google AMP понастоящем работи предимно с новинарски сайт, най-добрият избор е новият.

На екрана по-долу можете да видите какво имам, когато използвах думата за търсене Олимпийски игри.

Както можете да видите, страниците на AMP се показват като Богати карти на Google, а оптимизирана за мобилни устройства карусела на изображението, издаден от Google през май 2016 г..

Забележете как Google различава страниците на AMP от други оптимизирани за мобилни страници страници чрез използване на 2 различни етикета: AMP и Mobile-friendly. Също така си струва да кликнете върху някои от резултатите, за да видите как изглежда AMP уеб страницата и колко бързо се движи по мобилния телефон.

Техническа информация

AMP е a уеб стандарт изградени върху съществуващите уеб технологии и фокусирани върху статично съдържание. То има 3 различни части:

HTML AMP: модифициран HTML с (1) ограничението на определени редовни функции HTML / CSS и (2) въвеждане на нови персонализирани маркери (Компоненти)
AMP JS: прилага най-добрите практики, за да намали времето за зареждане на страницата
AMP CDN: кеш с вградена система за валидиране, която допълнително оптимизира сайта Ви

Ако искате да научите повече за техническата основа на AMP страниците, вижте видеото по-долу, в което Paul Bakaus на Google дава уводна беседа за AMP.

Ако искате да се потопите по-дълбоко, си струва да разберете какви оптимизационни техники използва за ускоряване на работата на мобилните устройства. Във видеото по-долу, Malte Ubl, ръководителят на AMP Engineering обяснява анатомия на AMP подробно.

AMP HTML

Ускорени мобилни страници са редовни HTML страници които трябва следвайте набор от правила за да се ускорят зареждането на страниците и да се визуализират с надеждна работа.

Нека разгледаме най-важните неща, които трябва да знаете за него. Можете също така да разгледате пълната спецификация на AMP HTML.

Решете, ако искате отделна AMP страница

За една и съща страница със статично съдържание можете да имате 2 отделни версии - един за AMP и един за не-AMP версията. Можете също да изберете да имате само една версия - страницата AMP и я използвайте навсякъде. Относно поддръжка на браузъра, Исканията на GIMUB на AMP:

Ако все още се тревожите за поддръжката на браузъра, разгледайте публикацията на Google Paul Irish за Google Stackoverflow.

В случай, че искате да имате две страници (AMP и без AMP), трябва връзка към всяка от тях за да информира търсачките за съществуването на две версии.

Добавете следния код към на страницата, която не е AMP:

Също така добавете следния ред към на страницата AMP:

Ако имате само една AMP страница, все още трябва свържете я от себе си по следния начин:

Стартиране на Boilerplate

Проектът AMP предлага различни пускане на бойлери можете да използвате, за да започнете. Погледнете най-простия AMP HTML код по-долу:

          Здравей свят!

Можете да видите, че шаблонът свързва обикновената HTML страница с помощта на маркер. Най- > добавя AMP JS библиотека.

 Най-   
Можете само да имате един вграден стил и има и много забранени правила за стил, например не можете да използвате !важно квалификатор @import правило и псевдокласи.
 Не забравяйте да проверите ограниченията за стилове преди да започнете да пишете CSS за AMP страниците.
 Има още едно нещо, което е важно да знаете за правилата на стила на AMP: вие Не можете да използвате желаното оформление - това е един от принципите на AMP, които позволяват на браузъра изчисли пространството на всеки елемент на страницата предварително.
 Обърнете внимание на поддържаните и неподдържаните оформления.
 AMP JS
 Документите за AMP могат да включват нито написани от автора, нито JavaScript от трети страни, това обаче не означава, че ускорените мобилни страници изобщо не използват JavaScript. JavaScript библиотеката (AMP runtime) е отговорна за зареждането и визуализирането на AMP страниците бързо прилагане на най-добри практики за ефективност.
 AMP компоненти
 AMP компоненти са определено от времето на изпълнение на AMP. Те са гореспоменатите Специфични за AMP HTML тагове трябва да използвате вместо обикновения си колега, като например  вместо  свободен край.
 Всеки AMP компонент съдържа a конкретен външен ресурс (изображение, видео, вграждане и др.). Външните ресурси са склонни да забавят уебсайтовете. Основната цел на това решение е да управление на зареждането на външни ресурси по разумен начин, като ги управлява вътре в пясъчници.
 AMP ви осигурява 2 вида компоненти:
 Вградени компоненти: те са винаги на разположение във всеки документ на AMP, те са вградена в средата за изпълнение на AMP. Понастоящем има пет от тях:  за показване на реклами
  за изображения, той се използва вместо  свободен край
  за проследяващи пиксели (използвани за преброяване на показванията на страниците)
  за директен HTML5 видео файл вгражда, замества  свободен край
  за вградени елементи (може да се използва вместо  в някои случаи)
 
 Разширени компоненти: Допълнителни компоненти, трябва явно ги включете в документа на AMP. Има много полезни такива  и , виж пълния списък. Много от тях могат да бъдат свикнали вграждате съдържание от услуги на трети страни, като например от Twitter или Instagram.
 
Имайте предвид, че всички външно заредени ресурси, като например  и  трябва да има известен  и  атрибут , за да се даде възможност на браузъра да изчислете предварително оформлението.
 AMP CDN
 Най- AMP CDN е всъщност кеш, наречен Кеш на Google AMP. Извлича валидни AMP документи, кешира ги и ги зарежда. AMP CDN също има a вградена система за валидиране.
 Струва си тестване на AMP страниците преди да ги пуснете онлайн, за да можете безопасно преминат валидатора. Можете да го направите по много различни начини.
  ИМИДЖ: Проект AMP
Добре е да знаете, че AMP CDN използва протокола HTTP / 2, за да постигне възможно най-доброто представяне.
 AMP Tools
 Има някои чудесни инструменти, които могат да ви помогнат да реализирате ускорени мобилни страници, нека погледнем някои от тях.
 Google предоставя на уеб администраторите удобен Инструмент за отчет за състоянието на AMP които показват броя на успешно индексираните AMP страници, както и грешките, свързани с AMP.
 Lullabot на AMP PHP библиотека ви позволява да конвертирате вашите HTML страници в AMP HTML, а също така съобщавате за съответствието на всеки HTML документ с AMP стандартите.
 Ако искате да използвате AMP на вашия WordPress сайт, прочетете урока на Yoast за това как да настроите WordPress за AMP и как AMP работи с плагина Yoast SEO.
 Можете също така да проверите автоматиката на Automattic AMP плъгин , която ви позволява да активирате ускорени мобилни страници на вашия WordPress сайт.
  ИЗОБРАЖЕНИЕ: WordPress.org
Допълнителни съображения
 Ако все още не сте убедени, погледнете видеото за a тест за бърза скорост По-долу.
 
 Джонатан Абрамс, основателят на Nuzzel, прави още по-добри претенции, тъй като твърди, че дори мобилни оптимизирани сайтове като New York Times зареждат значително по-бързо. - вместо три секунди, за да зареди средната страница, се зарежда страница по-малко от половин секунда когато са активирани ускорените мобилни страници на Google.
 Можете също така да прочетете интересна статия в Verge за състезанието на Google AMP и Instant статии на Facebook. Ако все още търсите отговор за "какъв е уловът?", Вижте публикацията на Yoast, в която се споменават опасенията, че AMP всъщност ни връща към интернет преди 2000 г., и се пита дали наистина е отворен стандарт.
 .