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-сайту (або будь-якого іншого сайту ).