Водич за почетнике за убрзане мобилне странице (АМП)

Аццелератед Мобиле Пагес је Гооглеова иницијатива која намјерава ријешити највећи проблем мобилног веба - брзина. Невероватна корисничка искуства која дизајнирамо са великом пажњом су болно спора на мобилном телефону.

Спорост није само проблем са УКС, већ и смањује стопе конверзије, и штети приступачности искључивањем корисника са споријим интернет везама. АМП је тимски рад покренут са циљем да се издавачима омогући креирајте садржај за мобилне уређаје једном, и учитајте га одмах свуда.

Од лансирања, многи издавачи као што су ББЦ, Тхе Ецономист, Гуардиан Невс и Финанциал Тимес имплементирали су иницијативу, тако да до сада можемо са сигурношћу претпоставити да је АМП иновација која вриједи размотрити за свакога тко жели остати конкурентан на мобилним уређајима веб.

АМП у акцији

Пре него што уђете у детаље, ево га АМП демо, тако можете видите га у акцији. Демо се може приступити на овом линку.

Да бисте видели АМП у акцији, морате да урадите две ствари:

Погледајте демо на мобилном уређају или на мобилном симулатору, нпр. Симулатор мобилних уређаја Цхроме ДевТоолс.
Покрените упит за претрагу на траци за претрагу. Пошто Гоогле АМП тренутно ради углавном са веб сајтом, најбољи избор је свежа вест.

На слици испод можете видјети што сам добио када сам користио појам за претраживање рио олимпицс.

Убрзана демо страница мобилних страница на ИПад-у

Као што можете да видите, АМП странице се појављују као Гоогле богате картице, а Вртуљак слике оптимизиран за мобилне уређаје, које је Гоогле објавио у мају 2016. године.

Обратите пажњу на то како Гоогле диференцира АМП странице са других страница које су оптимизоване за мобилне уређаје помоћу 2 различите ознаке: АМП и Мобиле-фриендли. Такође је вредно кликнути на неке од резултата да бисте видели како изгледа АМП веб страница и колико брзо ради на мобилном телефону.

Тецхницал Бацкгроунд

АМП је а веб стандард изграђен на постојећим веб технологијама и фокусира се на статички садржај. Има 3 различита дела:

АМП ХТМЛ: измењени ХТМЛ са (1) ограничење одређених регуларних ХТМЛ / ЦСС карактеристика и (2) увођење нових прилагођених ознака (Компоненте)
АМП ЈС: примењује најбоље праксе како би смањио време учитавања странице
АМП ЦДН: кеш са уграђеним системом за валидацију који додатно оптимизује ваш сајт

Ако желите да сазнате више о техничкој позадини АМП страница, погледајте видео испод у којем Гооглеов Паул Бакаус даје уводни говор на АМП.

Ако желите да зароните дубље, вреди разумети шта оптимизационе технике АМП користе да убрзају перформансе на мобилним уређајима. У видеу испод, Малте Убл, вођа АМП Инжењеринга објашњава анатомија АМП детаљно.

АМП ХТМЛ

Убрзане мобилне странице су обичне ХТМЛ странице које треба пратите низ правила како би се странице брже учитавале и приказивале са поузданим перформансама.

Хајде да погледамо најважније ствари које треба да знате о томе. Такође можете погледати пуну АМП ХТМЛ спецификацију.

Одлучите да ли желите засебну АМП страницу

За исту статичку страницу са садржајем можете имати 2 одвојене верзије - један за АМП и један за не-АМП верзију. Такође можете изабрати да имате само једна верзија - АМП страницу и користите је свуда. Се односе бровсер суппорт, Захтјева АМП Гитхуб страницу:

Ако сте још увијек забринути за подршку прегледника, погледајте пост Гооглеовог Ирског Ирца на Стацковерфлову.

У случају да желите имати двије странице (АМП и не-АМП), требате на сваку од њих да би информисати претраживаче о постојању два верзије.

Додајте следећи код у на страни која није АМП:

Такође додајте следећу линију секције АМП странице:

Ако имате само једну АМП страницу, и даље требате повезати га са собом на следећи начин:

Стартинг Боилерплате

АМП Пројекат нуди другачије старт боилерплатес можете користити да бисте започели. Погледајте најједноставнији АМП ХТМЛ предложак испод:

          Здраво Свете!

Можете да видите да предложак повезује обичну ХТМЛ страницу помоћу таг. Тхе > таг додаје АМП ЈС либрари.

 Тхе   
Можеш само имати један уграђени стилски лист, а има и много забрањена правила стила, на пример, не можете да користите !важно квалификатор, @увоз правило, и псеудо-класе.
 Не заборавите да проверите ограничења стилова пре него што почнете да пишете ЦСС за ваше АМП странице.
 Постоји још једна ствар која је важна за АМП правила правила: ти не можете користити било који распоред који желите - јер је то један од АМП принципа који дозвољава претраживачу израчунајте простор сваког елемента на страници унапред.
 Погледајте подржане и неподржане изгледе.
 АМП ЈС
 АМП документи могу садржати нити било који ауторски писани, нити било који други ЈаваСцрипт-ови трећих страна, међутим, то не значи да Аццелератед Мобиле Пагес уопште не користи ЈаваСцрипт. АМП ЈаваСцрипт библиотека (АМП рунтиме) је одговорна за учитавање и приказивање АМП страница примену најбољих пракси перформанси.
 АМП Цомпонентс
 АМП Цомпонентс аре дефинисан АМП рунтиме-ом. Они су горе поменути ХТМЛ ознаке специфичне за АМП морате да користите уместо обичног партнера, као што је  уместо  таг.
 Свака АМП компонента садржи а одређени спољни ресурс (слика, видео, уградња, итд.). Спољни ресурси су склони успоравању веб страница. Главни циљ овог решења је да управљати учитавањем екстерних ресурса на разуман начин тако што ћете их водити инсиде сандбокес.
 АМП вам пружа 2 врсте компоненти:
 Уграђене компоненте: они су увек доступни у сваком АМП документу, они су уграђен у АМП рунтиме. Тренутно их има пет:  за приказивање огласа
  за слике, користи се уместо  таг
  за праћење пиксела (користи се за бројање приказа странице)
  за директну ХТМЛ5 видео датотеку уграђује, замјењује  таг
  за уграђене елементе (може се користити уместо  у одређеним случајевима)
 
 Проширене компоненте: Додатне компоненте, морате експлицитно их укључити у ваш АМП документ. Има много корисних, као што су  и , погледајте комплетну листу. Многи од њих се могу навикнути уградите садржај услуга трећих страна, као што су Твиттер или Инстаграм.
 
Имајте на уму да сви екстерно учитани ресурси, као што су  и  мора имати познато  и  аттрибуте да бисте омогућили претраживачу да израчунајте распоред унапријед.
 АМП ЦДН
 Тхе АМП ЦДН је у основи кеш, назван Гоогле АМП кеш. Он преузима важеће АМП документе, кешира их и учитава. АМП ЦДН такође има а уграђени систем валидације.
 Вреди тестирање АМП страница пре него што им дозволите да се повежу са интернетом како би безбедно проћи валидатор. То можете урадити на много различитих начина.
  ИМАГЕ: АМП Пројецт
Добро је знати да АМП ЦДН користи ХТТП / 2 протокол како би постигао најбоље могуће перформансе.
 АМП Тоолс
 Постоје неке одличне алатке које вам могу помоћи да имплементирате Аццелератед Мобиле Пагес, погледајмо неке од њих.
 Гоогле пружа вебмастерима при руци АМП статус репорт тоол који показује број успјешно индексираних АМП страница, као и грешке повезане с АМП-ом.
 Луллабот'с АМП ПХП Либрари омогућава вам да претворите ваше ХТМЛ странице у АМП ХТМЛ, а такође пријављује усклађеност било којег ХТМЛ документа са АМП стандардима.
 Ако желите да користите АМП на свом ВордПресс сајту, прочитајте Иоастов водич о томе како да подесите ВордПресс за АМП и како АМП ради са Иоаст СЕО плугин-ом.
 Такођер можете провјерити Аутоматтиц'с АМП плугин који вам омогућава да омогућите убрзане мобилне странице на вашем ВордПресс сајту.
  ИМАГЕ: ВордПресс.орг
Даље разматрање
 Ако још нисте увјерени, погледајте видео о а брзо тестирање брзине испод.
 
 Јонатхан Абрамс, оснивач Нуззела, даје још боље тврдње, тврдећи да чак и сајтови оптимизирани за мобилне уређаје попут Нев Иорк Тимес-а учитавају знатно брже - уместо три секунде за учитавање просечне странице, учитава се страница мање од пола секунде када је Гоогле-ове убрзане мобилне странице омогућене.
 Такође можете прочитати занимљив чланак у Верге-у о конкуренцији Гоогле АМП-а и Фацебоокових Инстант чланака. Ако још увијек тражите одговор за "шта је улов?", Провјерите Иоастов пост који спомиње страхове да нас АМП у основи враћа на интернет прије 2000, и поставља питање да ли је то заиста отворен стандард.
 .