Практически преглед на Google AMP (Accelerated Mobile Pages) и как ще повлияе на скоростта на уеб сайта
Наскоро в GT се появи новина за това, че Google анонсира собствена js библиотека за ускоряване работата на web-страниците за мобилни устройства. Към това събитие разбира се нямаше как да останем безразлични и решихме да разгледаме възможностите на тази библиотека, а също и да направим едно малко сравнение на скоростта при изтегляне, за да разберем има ли полза от този подход.
Накратко, същността на новата инициатива се състои в следното: оптимизиране и ускоряване зареждането на страниците със съдържание (т.е. статии, новини, коментари, фото/видео – репортажи и т.н.), Google предлага да използвате тяхна разработка – AMP библиотеката. За това обаче, на страницата се налагат редица ограничения. Например, не можете да използвате други js-скриптове, с изключение на самия AMP и неговите разширения. Трябва да се използват специални AMP елементи вместо обичайните (например тага amp-img, вместо img). Не може дори да поставяте свои слайдери за снимки – за тази цел има специален компонент. И за да видите пълноразмерната снимка при клик на превю, трябва да използвате гугълската версия на лайтбокса, а не това, което вече сте свикнали да използвате.
Отделно искаме да подчертаем новият таг за реклама amp-ad — той позволява вмъкване на рекламен елемент на страницата, използвайки една от поддържаните рекламни мрежи: A9, AdReactor, AdSense, AdTech, Doubleclick. Ясно е, че по този начин Google получава допълнителен контрол върху рекламите в сайтовете, чрез поддръжка на едни или други мрежи, но за щастие всичко това добре се блокира от AdBlock (поне за сега).
Всички тези ограничения се проверяват със специалния AMP валидатор. Добавяйки към адреса на страницата „#development=1“ можете да получите в конзолата статуса на страницата – преминала ли е тя валидацията, или нещо е объркано. За съжаление, извеждането на грешка е абсолютно неинформативно. Например при включване на jQuery, получаваме ето тази конзола:
Опитайте се да познаете, какво се е объркало тук?
В случай на успешно преминаване на страницата през валидатора, получаваме съобщението „AMP validation successful.“
И така, какви възможности ни предоставя AMP?
Ето списъка с елементите, които се предлагат за използване:
Вградени компоненти:
amp-ad Контейнер за изобразяване на реклами
amp-img Замяна на img тага
amp-pixel Невидими пиксели — брояч на посещенията
amp-video Замяна на HTML5-тага video
Компоненти, свързани с помощта на разширения (отделни js-библиотеки)
amp-anim Анимирана картинка (GIF)
amp-audio Подмяна на HTML5-тага audio
amp-carousel обикновен корусел — изобразяване на превюто на картинките, подравнени по хоризонтала
amp-fit-text Автоматично намаляване или увеличаване размера на шрифта на текста, за да може да се побере в ограничената област
amp-iframe Подмяна на iframe
amp-image-lightbox Лайтбокс. Пълноразмерен преглед на големи изображения при клик върху превю или линк
amp-instagram Изобразява пост в инстаграм
amp-lightbox Още един лайтбокс
amp-twitter Показва туитовете
amp-youtube, Показва видеото в Ютуб
Няма да даваме примери за кода, таговете и атрибутите – всичко това можете да го видите от линковете по-горе. Оформлението е напълно разбираемо, документацията е изчерпателна, така че всичко трябва да бъде пределно ясно.
Примери можете да разгледате, като изтеглите архива на гитхъб.
Въпреки, че проектът се намира в състояние на техническо превю, впечатлението се разваля от неработещите компоненти. Например, при нас не заработи компонента за показване на туита. Трябва да се каже, че той е направен много удобно – достатъчно е да замените id на туита (например 652050319996780544) и да изберете настройките по ваш вкус. Но той не работи. Този на инстаграм пък работи перфектно.
Ами това е, време е да преминем към теста.
Използвахме две прости, но ресурсоемки страници.
Първата е AMP-валидна, а втората – обикновена HTML5, без AMP.
При отваряне на страниците с телефон, разликата наистина е осезаема. AMP-страницата се зарежда значително по-бързо, а за да бъде натоварена допълнително, в нея дори има отделни индикатори за зареждане (по-точно да се каже, обикновен placeholder, но изглежда хубаво). Обикновената страница се зарежда бавно и не е толкова красива. Но в нея пък работи графиката в края на документа, а в AMP-страницата за съжаление не. Смятаме, че това зависи от браузъра, така че няма да му обръщаме внимание.
Да опитаме любимият ни инструмент на Google – pagespeed insights.
Тестваме обикновената html5-страница:
Скорост на мобилни устройства: 91/100
Удобство при разглеждане на мобилни устройства: 100/100
Скорост при десктоп 100/100
Хубаво. Бихме казали отлично.
Скорост на мобилни устройства: 99/100
Удобство при разглеждане на мобилни устройства: 100/100
Скорост при десктоп 99/100
Малко по-добре на мобилни устройства и малко по-зле при настолните компютри. По принцип, ако вземем предвид особеностите на измерваните от pagespeed insights показатели, то се оказва приблизително еднакво, но разликата в зареждането при мобилните устройства е доста осезаема, дори и в ръчния тест.
Тестваме емулацията в google chrome. Пускаме го например на iPhone 6 plus с 3g.
Обичайна страница – почти 17 секунди
Чистим кеша и зареждаме AMP-страницата.
8,82 секунди. Сериозно? Разликата е два пъти?
Да, но тук трябва да се вземе предвид, че съдържанието се зарежда, докато превъртате страницата. Например, графиката се зарежда само след превъртане до края на документа.
В крайна сметка, имаме нов инструмент, който наистина дава възможност за значително увеличаване на скоростта за зареждане на страниците. За съжаление обаче, увеличаването на скоростта е свързано с налагането на достатъчно сериозни ограничения от към функционалността на страницата. Така, че може да се каже, че AMP – това е доста високоспециализирана разработка, която със сигурност ще намери своята област. Също така, проектът все още е в процес на техническо превю и много компоненти все още са сурови и работят непостоянно, но вече е възможно да се оцени ефектът от прилагането на тази библиотека.