Стаття для веб-розробників, верстальщиків, дизайнерів і НЕ Junior SEO-спеціалістів .
На носі 2016 рік, з чим я вітаю Вас усіх. Особливо тих, хто читаю цей пост зараз 
Минулого року, Google презентував нам алгоритми mobile-friendly. Власники сайтів, котрі таки зробили сайт дружнім до усіх типів пристроїв – ну просто молодці, готуйтесь до нових витрат =). Власники сайтів, котрі так нічого і не робили з своїми сайтами – сидіть і далі на PPC і думайте, що це єдиний дієвий інструмент інтернет-маркетингу )
Google Accelerated Mobile Pages Project
АМР, або Accelerated Mobile Pages – новий формат HTML верстки, створений на базі власної JS бібліотеки Google. Її ціль – пришвидшити мобільний інтернет за допомогою легких версій веб-сайту і кешування на стороні Google. Проект Accelerated Mobile Pages – відкритий для розробників (open sourse) і прийняти участь в його подальшій розробці можуть усі бажаючі. На даний момент усі функції представлені в AMP розроблені виключно до побажань великих партнерів, серед яких LinkedIn, Twitter, Pinterest, WordPress…
Швидкість
Формат верстки AMP забороняє використання сторонніх JS бібліотек. Тобто, більша частина можливих функцій на сайті – зникнуть. Тільки через це, сторінка сайту завантажуватиметься практично моментально (приблизно на 80-90% швидше). Но і це ще не все. Google відкриває свої сервери-кешування для усіх практично безкоштовно. Коли сьогодні більшість сайтів мають серверно-клієнтське кешування і лише певна частка кешує свої сайти і на сторонніх серверах та CDN мережах із функціями кешування, то тепер кешування AMP сторінок буде відбуватися ще і серверами Google. Це все буде безкоштовно і саме головне, це буде максимально швидко, оскільки мережа кеш-серверів Google є однією із найбільших у світі. Тобто читаючи цю статтю зараз, ви отримали весь контент із серверів CDN CloudFlare, або із дата-центру в Києві. 80% читачів блогу за даними аналітики – жителі України. Тобто перейматися мені нема потреби. А от коли Вас читають в Китаї, Африці, США та Європі і у Вас один-єдиний сервер в Франкфурті, то це біда. Із CDN, у вас буде ще нехай 10 серверів по всьому світу. Із Google їх стане сотні, оскільки в кожній країні Google має свої сервера, а в деяких країнах ці сервера розміщені і в декількох містах одразу). Відстань відвідувача сайту до сервера – менша, відповідно він отримає контент швидше, через низький ping.
Функціональність
Як я вже писав вище, AMP забороняє використання сторонніх бібліотек. Тобто сторінка сайту стане “голенькою”. Та ще із CSS не все так просто. Створити мега-крутий дизайн – теж не получиться. Все має бути максимально простим і зручним. Не подобається? – Знущайтесь і далі над тими, хто ще досі на 2G і чекає завантаження сторінки хвилинами! =)
Загалом у нас тут цілий набір нових тегів появився, які Вам варто буде використовувати:
amp-ad – контейнер для показу реклами
P.S. Так. AMP заборонить слайдери, анімашки, але залишить рекламу =)
amp-img – заміна тегу <img> (хоча зараз тег img – теж підтримується бібліотекою)
amp-pixel – тег для невидимих лічильників відвідуваності.
amp-video – заміна HTML5-тегу <video>
А ще нас чекають розширені теги, які запрацюють підключивши додаткові бібліотеки AMP
amp-anim – тег для показу анімаційних зображень (GIF), теж використовуватиметься замість <img>
P.S. Також на разі не потрібний, оскільки працює <img>
amp-audio – заміна HTML5-тегу <audio>
amp-carousel – “каруселька”. Прев’ю картинок, котрі відображаються по горизонталі
amp-fit-text – а це досить крутий тег. Завдяки ньому, шрифт буде автоматично збільшуватись, або зменшуватись, щоб поміститись в задану йому область.
amp-iframe – заміна <iframe> тегу
amp-image-lightbox – лайтбокс. Так як сторонні JS підключати не можна, відобразити повне зображення можна буде через цей тег. Працює як з фото у контенті, так і з фото в каруселі.
amp-instagram – відображатиме пост із інстаграму
amp-lightbox – а це ще один лайтбокс. Так сказати для різноманітності…
amp-twitter – відображатиме твіт із твіттера
amp-youtube – ну і звісно ж тег для відео із youtube.
Реклама
Тег AMP в першу чергу буде потрібний сайтам ЗМІ, соц.мережам, інформаційним.порталам, блогерам і іншим ресурсам, які розміщують лише текстово-графічний контент. ЗМІ, котрі полюбили круті фішки типу інфографіки на JS, анімаціям, графікам, онлайн-презентаціям і т.п. – можуть залишити цей контент для відвідувачів із десктопів та планшетиків.
Рекламу залишили, оскільки на цих сторінках вона буде найбільш помітною, конверсії будуть шаленими. Від цього збільшаться прибутки у всіх. До речі, Google не провів монополістичні дії і дозволив розміщення реклами не тільки із своїх рекламних сервісів, а й і з інших. Тому любителі купувати рекламу на сайтах рекламних агрегаторів, можуть не боятися, що їх рекламу не побачать.
Accelerated Mobile Pages і WordPress
Одразу після анонсу Accselerated Mobile Page, з’явився і плагін інтеграції сайту із AMP. Тому, якщо у вас сайт на WordPress, складності інтегруватися не буде взагалі. Єдине, потрібно буде попрацювати над дизайном.
Тести
Я опублікував цей запис перед тестом і зробив два аналізи сервісами Google PageSpeed Insights (піськомір для SEOшників) та Pingdom (НЕпіськомір). Що я отримав:
GPSI (Google PageSpeed Insights) для AMP версії сайту:
Мобільні пристрої – 70/100
Юзабіліті на мобільних – 100/100
ПК (на котрих Accelerated Mobile Pages сто років не потрібні – 79/100)
GPSI (GOOGLE PAGESPEED INSIGHTS) ДЛЯ звичайної ВЕРСІЇ САЙТУ:
Мобільні пристрої – 62/100
Юзабіліті на мобільних – 96/100
ПК (на котрих Accelerated Mobile Pages сто років не потрібні – 72/100)
Така от не сильно велика різниця…
А ось, що я отримав на Pingdom для звичайної версії сайту:
Швидкість завантаження сторінки – 1,8 секунди, 55 запитів серверу (по середнім даним із 5 тестів)
Оцінка сторінки – 80/100
Показники Pingdom для AMP версії:
Швидкість завантаження сторінки – 0,59 секунди, 9 запитів серверу (по середнім даним із 5 тестів)
Оцінка сторінки – 81/100
Що ми із цього маємо із даного тестування:
1. PageSpeed Insight – таки піськомір і хоч би як сайт швидко не працював, він може мати малу оцінку.
2. AMP – корисний для власників сайтів ЗМІ, блогів, інформаційних порталів, тощо
Висновки
Accelerated Mobile Pages скоріш стане трендом у 2016 році. Сайти стануть ще дружнішіми для наших пристроїв! Але слід замітити:
- Усі сайти стануть досить схожими між собою. Тому дизайнерам прийдеться добре потрудитися над тим, щоб саме їх дизайни запам’ятовувались! Саме запам’ятовувались!
- SEO-шинкам слід вивчити новий тег rel=”amphtml”
- Розробникам робити буде нічого цього року, оскільки інтеграція AMP у сайт не буде складною.
- З’являться мінімальні проблеми із отриманням данних метрик, для сервісів аналітики, оскільки AMP не підтримує їх коди. І данні можна буде отримувати через невидимі лічильники, або за допомогою підрахунку переходів…
- AMP погіршить поведінкові фактори сайту і може збільшити кількість відмов, оскільки на сторінках AMP відсутні функції коментарів, а також відсутня навігація.
Позитивні моменти це звісно швидкість. Чи варто жертвувати функціоналом заради швидкості – вирішувати Вам. Але я б не рекомендував використовувати AMP для сайтів із малою відвідуваністю. Цей проект розрахований на великі сайти із великою відвідуваністю.
Можливо корисні ресурси:
Сайт Accselerated Mobile Page Project: www.ampproject.org
Вихідний код та документація AMP: GitHub