Accelerated Mobile Pages: AMP для мабільнай аптымізацыі WordPress сайта

1. Што такое AMP?
2. Якія сайты павінны выкарыстоўваць AMP?
3. Якія адрозненні AMP?
4. Чаму блогі і выдаўцы павінны ўключыць AMP
5. Якая аптымізацыя неабходная для AMP-старонак
6. Як дадаць AMP на WordPress-сайт
7. Убудова AMP WordPress ад Automattic
8. AMP for WP - Accelerated Mobile Pages
9. Іншыя спосабы дадаць AMP на WordPress-сайт
10. Ці патрэбныя AMP старонкі на вашым WordPress сайце?

Выкарыстанне інтэрнэту павінна быць простым і хуткім, так што вэб-майстры пастаянна працуюць над аптымізацыяй прадукцыйнасці сайта і паскарэннем загрузкі старонак, і AMP для WordPress - гэта выдатны інструмент, які закліканы дапамагчы ў гэтай працы.

Вэб-сайты ў большасці сваёй распрацоўваліся для вялікіх экранаў. Але маленькіх экранаў становіцца ўсё больш і больш, і колькасна яны пераганяюць планшэты і ПК. Мабільныя прылады зараз складаюць 65% усяго медыя прасторы . Ручныя девайсы маюць патрэбу ў старонках, якія загружаюцца так жа хутка, як і створаныя для вялікіх экранаў.

Каб задаволіць узросшы попыт на хутка загружаць кантэнт, прыкладання, распрацаваныя для мабільных платформаў, даступныя на Apple (News), Facebook (Instant Articles) і Snapchat (Discover). А Google прадставіў тэхналогію Accelerated Mobile Page (AMP), што дазволіла паскорыць дастаўку мабільнага кантэнту.

Што такое AMP?

Праект AMP Project быў анансаваны Google у кастрычніку 2015 і запушчаны ў лютым 2016. Дадзены праект з адкрытым зыходным кодам дае выдаўцам магчымасць ствараць аптымізаваны пад мабільныя прылады кантэнт, які ў наступстве можна неадкладна загрузіць куды заўгодна ў мабільным інтэрнэце.

У жніўні 2016 у індэксе Google Пошуку налічвалася ўжо больш за 150 мільёнаў AMP докаў, і гэта колькасць кожны тыдзень павялічваецца на 4 мільёны на тыдзень. Далей было прадстаўлена прышчапіць Google-пошуку па amp-кантэнту, які пазней будзе ўкаранёны больш шырока.

Якія сайты павінны выкарыстоўваць AMP?

У лютым праект быў ініцыяваны для выдаўцоў. Але пазней AMP былі адаптаваныя таксама для такіх індустрый, як забавы, турызм, электронная камерцыя і т. Д.

Неўзабаве пачалі прыходзіць захопленыя справаздачы адаптаторов, якія адзначалі 88% паляпшэнне часу загрузкі, якое суправаджала ўсе AMP-дакументы. Да прыкладу, eBay, адзін з найбуйнейшых інтэрнэт-крам, пераключыўшыся на AMP, займеў 15 мільёнаў старонак тавараў, у аснове якіх ляжыць тэхналогія AMP.

Такім чынам, выкарыстоўваць AMP павінны ўсе тыя сайты, якія ў справе атрымання трафіку належаць менавіта на мабільныя прылады. Таксама варта памятаць, што ўсё больш і больш карыстачоў выходзяць у інтэрнэт менавіта з мабільных прылад, так што AMP могуць стаць добрым дадаткам для любога WordPress сайта.

Якія адрозненні AMP?

Гэтая сістэма дастаўкі кантэнту грунтуецца на фреймворке AMP HTML, у выніку чаго па хуткасці яна пераўзыходзяць звычайны HTML, таму што:

• Гэта эканамічная версія звычайнага HTML фреймворка, з якой прыбраны ўвесь JavaScript-кантэнт. Для дастаўкі JavaScript, фреймворк выкарыстоўвае агульную бібліятэку AMP JS.
• Кантэнт захопліваецца і захоўваецца ў агульным воблаку, так што часовыя затраты, якія патрэбныя для запыту і дастаўкі кантэнту з сервера выключаны

Ёсць яшчэ шмат адрозненняў, але гэтыя два даюць найбольш хуткае разуменне дадзенай тэхналогіі.

Чаму блогі і выдаўцы павінны ўключыць AMP

Так як чытанне павольна загружае старонкі нерэальна хвалюе карыстальнікаў, то выдаўцы губляюць магчымасць зарабіць на рэкламе. Тэхналогія AMP дапамагае затрымаць наведвальніка на сайце на больш доўгі час, што патэнцыйна спрыяе павелічэнню колькасці клікаў па рэкламе.

Старонкі AMP з'яўляюцца ў суправаджэнні абразкі ў выглядзе маланкі, што дазваляе вылучыць іх на фоне звычайнага кантэнту. Чалавек, кликнувший на гэты варыянт, пераносіцца прама на AMP старонкі, якія адкрываюцца з дапамогай AMP аглядальніка. Таксама кантэнт будзе неадкладна даступны ек толькі ў пошуку Google, але і на такіх платформах, як Twitter, LinkedIn, WordPress, Parse.ly, Adobe Analytics, Nuzzel і Pinterest.

Больш за тое, выдаўцы атрымаюць доступ да Google Analytics, каб адсачыць прадукцыйнасць сваіх старонак. Яны могуць выкарыстоўваць AMP-лепшы кантэнт для аптымізацыі прадукцыйнасці сайта і паляпшэння карыстацкага досведу.

Якая аптымізацыя неабходная для AMP-старонак

AMP - гэта на самай справе цэлы набор аптымізацый , Якія павінны быць зроблены на сайце згодна з патрабаваннямі Google. Каб старонка адпавядала патрабаванням AMP, трэба прытрымлівацца наступнага спісу правілаў:

• Дазваляйце толькі асінхронны JavaScript - гэта трэба, каб не ўзнікла адтэрміноўкі рэндэрынгу старонкі. Гэта значыць, што вы не можаце выкарыстоўваць любы JavaScript, які создалисами, і вам давядзецца пакласціся на AMP-элементы, калі справа тычыцца інтэрактыўнага кантэнту на вашых старонках. JS ў iframe дазволены, але толькі калі ён не вядзе да адтэрміноўкі рэндэрынгу.
• Зададзены памер усіх рэсурсаў заўсёды статичен- AMP загружае старонку, не чакаючы пакуль запампуюцца рэсурсы тыпу малюнкаў і айфреймов. Памер гэтых рэсурсаў павінен быць замацаваны ў HTTP, такім чынам памер і размяшчэнне гэтых рэсурсаў вядомы яшчэ да таго, як пачнецца загрузка.
• Не дазваляеце механізмам пашырэньні блакаваць рэндэрынг - калі на старонцы ёсць нейкае пашырэнне, кастомный скрыпт павінен праінфармаваць сістэму пра гэта. Такім чынам для пашырэння створыцца прастору, яшчэ да таго моманту, як AMP пазнае, што трэба ўключыць у старонку. Пашырэння для лайтбоксов, Instagram-вклеек і твітаў прымаюцца, калі яны не блакуюць рэндэрынг старонкі, нават калі для гэтага спатрэбяцца дадатковыя HTTP-запыты.
• Трымаеце ўсе іншыя JavaScript па-за крытычнага шляху - кастомный JavaScript дазволены толькі ў айфреймах, якія знаходзяцца ў «пясочніцы». У гэтым выпадку яны не блакуюць загрузку галоўнай старонкі.
• Усе CSS павінны быць лінейнымі і са звязаным памерам - гэта дапамагае знізіць колькасць HTTP-запытаў на крытычным шляху.
• Запуск шрыфтоў павінен быць эффективным- сістэма AMP не дазваляе HTTP-запыты пакуль шрыфты не пачнуць загружацца.
• Мінімізуе памер пераразлікаў - пераразлікі вядуць да адтэрміноўкі рэндэрынгу, так што іх павінна быць па мінімуму.
• Запускайце толькі анімацыю на GPU- ўся анімацыя павінна запускацца толькі на GPU (Graphical Processing Unit).
• Стварыце прыярытэтнасць загрузкі ресурсов- толькі патрэбны кантэнт павінен загружацца першым, а рэкламныя аб'явы і карцінкі загружаюцца так хутка, наколькі гэта магчыма. У гэтым выпадку нагрузка на CPU (цэнтральны працэсар) зведзена да мінімуму.
• Загружайце старонкі ў адзін момант- пре-рэндэрынг выкарыстоўвае занадта шмат прапускной здольнасці і рэсурсаў цэнтральнага працэсара. AMP пре-рэндэрынг спачатку загружае толькі неабходны кантэнт і падгружае іншыя айфреймы і іншыя рэсурсы, толькі калі тыя запытваюцца.

Усе стандартныя фарматы, рэкламныя банэрныя сеткі і тэхналогіі таксама будуць даступныя. Таксама выдаўцы могуць выкарыстоўваць уласныя фарматы, калі тыя не ўплываюць на хуткасць загрузкі.

Як дадаць AMP на WordPress-сайт

Google дае інструкцыю, якая распавядае, як можна стварыць базавыя старонкі AMP HTML, як іх захоўваць і валидировать ў якасці AMP-адпаведнага кантэнту, а таксама дае інфармацыю аб тым, як іх публікаваць і распаўсюджваць. Вельмі важна валидировать AMP-старонкі, так як гэта дазваляе іншым сайтам тыпу Twitter і Instagram пераканацца ў тым, што старонкі адлюструюцца на іх платформах як трэба.

Сайты, якія знаходзяцца на хостынгу WordPress.com, аўтаматычна падтрымліваюць гэтую тэхналогію, але калі ваш сайт размяшчаецца на любым іншым хостынгу, то вам давядзецца ўсталяваць адпаведны убудова.

Убудова AMP WordPress ад Automattic

Пасля ўстаноўкі і актывацыі плагіна AMP на вашым WordPress-сайце, вашыя запісы аўтаматычна атрымаюць дынамічна згенераваныя AMP-версіі. Вы можаце атрымаць доступ да гэтых старонка, дадаўшы amp пасля URL (пример.com / my-post / amp). Калі ў вас няма дружалюбных пастаянных спасылак, тады дадайце? Amp = 1 да спасылцы (пример.com /? P = 100 & amp = 1). Цяпер засталося толькі пратэставаць і валидировать вашыя старонкі, як паказана вышэй.

Вы не заўважыце нейкіх налад або функцый, дададзеных убудовай. Ёсць толькі адна дабаўленая ў адмінку опцыя для AMP Analytics, дзе вы можаце ўклеіць код вашай ўласнай JSON-канфігурацыі, і на гэтым усё.

Гэта афіцыйны убудова ад Automattic, і цяпер ён не падтрымлівае старонкі і архівы, а таксама не дае магчымасці кастомизировать згенераваны кантэнт. Але гэта вельмі простая ў выкарыстанні опцыя, і вы можаце парыцца ў дакументацыі на Github, калі вам патрэбна нейкія навыкі, якія дазваляюць кастомизировать дадзены тып кантэнту.

AMP for WP - Accelerated Mobile Pages

Яшчэ адзін цудоўны варыянт - гэта AMP for WP . Гэта бясплатны WordPress убудова, які прапануе хуткае і простае пачатак працы- проста ўсталюйце убудова, задзейнічайце налады і пачніце аўтаматычнае стварэнне AMP для вашага вэб-сайта. Бонусам ідзе яго сумяшчальнасць з мильтисайтовыми інсталяцыямі.

Тут ужо ёсць убудаваныя налады для ўключэння AMP (пасты, старонкі, архівы), магчымасць дадання рэкламных абласцей для мабільных прылад, структураваныя дадзеныя, (важная частка SEO-аптымізацыі), Yoast SEO meta tag інтэграцыя, прасунутыя опцыі index / no-index, push -уведомление, натыўны AMP каментаванне, кастомные AMP-пераклады (для тых, хто не выкарыстоўвае ангельскую на сваіх сайтах) і многае іншае. Такое багацце опцый проста дзіўна для бясплатнай убудовы.

І лепей за ўсё тое, што вы можаце кастомизировать знешні выгляд свайго AMP-кантэнту з дапамогай гэтага плагіна. Выкарыстоўвайце уключаныя па змаўчанні AMP-тэмы або выкарыстоўвайце іх AMP Theme Framework, каб стварыць уласны дызайн.

AMP for WP таксама прапануе платныя пашырэння для дадання дадатковых функцый (тыпу прызыву да дзеяння глей кэшаванне AMP) і падтрымкі папулярных убудоў тыпу WooCommerce, Advanced Custom Fields і Contact Form 7.

Іншыя спосабы дадаць AMP на WordPress-сайт

Дадатковыя ўбудовы, якія дапамогуць вам у працы з AMP-кантэнтам на вашым WordPress-сайце.

• WP AMP - патрэбен, каб стварыць кастомный AMP дызайн без працы з кодам і палепшыць SEO.
• Accelerated Mobile Pages (AMP) for WordPress - патрэбен, каб стварыць AMP тэму для вашага вэб-сайта
• Custom AMP - патрэбен, каб лепей кастомизироать ваш AMP кантэнт.
• Facebook Instant Articles & Google AMP Pages - патрэбен, каб публікаваць ваш кантэнт і кіраваць ім прама з WordPress на Google AMP Pages з падтрымкай рэкламных аб'яў і аналітыкі.
• Glue for Yoast SEO & AMP - патрэбен, каб пераканацца ў тым, што ваш WordPress AMPплагин выкарыстоўвае правільныя Yoast SEO мета дадзеныя. Таксама убудова дазваляе мадыфікаваць дызайн вашых AMP-старонак.

Ці патрэбныя AMP старонкі на вашым WordPress сайце?

Хоць тэхналогія AMP і не абавязковая для вэб-старонак, якія выявіць Google, цалкам відавочна, што Google імкнуцца да ўсёабдымнай рэалізацыі свайго праекта. Зараз жа AMP-сумяшчальнасць не з'яўляецца адным з фактараў, якія ўплываюць на ранжыраванне сайта ў пошукавай выдачы Google. Хоць разумна выказаць здагадку, што ў будучыні такі ўплыў з'явіцца.

Калі вы памятаеце пра тое, што хуткасць загрузкі старонак - гэта важны фактар, які ўплывае на ранжыраванне сайта, то ў вас асабліва няма выбару, калі вы хочаце стаць часткай мабільнага інтэрнэту. Калі ранжыраванне пошукавымі сістэмамі важна для вас, то вам не прыйдзецца доўга разважаць на тэму ўкаранення AMP-кантэнту.

Але калі вы хочаце стаць часткай гэтага праекта то вам трэба дакладна прытрымлівацца фарматаванні, якое патрабуецца Google, а гэта не ўсім падыходзіць. Бо такое фарматаванне абмяжоўвае вас у выбары таго, што вы можаце размясціць на сваім сайце, у сваю чаргу ваш сайт можа страціць сваю індывідуальнасць. Нельга выкарыстоўваць некаторыя віды анімацыі, а формы і зусім не падтрымліваюцца. І калі мэтавыя старонкі патрэбныя ўсім, то AMP нельга назваць добрай гісторыяй для ўсіх. Акрамя таго, ёсць сайты, для якіх аўтэнтычнасць і брэндынг важней хуткасці, так што для іх AMP - гэта хутчэй няўдалы выбар.

Як бы там ні было, калі вы хочаце стварыць для вашых карыстальнікаў вопыт хуткага і прыемнага выкарыстання вашага сайта, і даўжэй затрымаць іх на вашым сайце, то вам варта сур'ёзна задумацца пра тое, каб пачаць выкарыстоўваць AMP для WordPress-сайта (або любога іншага сайта ).