Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Poleznye-stati » Amp-html-uskorennye-mobilnye-stranicy

AMP HTML — ускоренные мобильные страницы

Что же такое AMP HTML? Совсем недавно я наткнулся на одну очень интересную статью, в которой рассказывалось об ускоренных мобильных страницах или Accelerated Mobile Pages. Надо сказать, что современный мир сложно представить без мобильных устройств. Лет 10 назад мобильный интернет был очень слабым и медленным. Но говоря о мобильном интернете тогда и сказав про современный вопрос об увеличении скорости загрузки страниц на мобильных устройствах остаётся открытым.

AMP HTMLТак вот, одна из групп разработчиков решила помочь разобраться с этим вопросом, они то и придумали такое понятие, как AMP (Accelerated Mobile Pages) HTML.  Разработчики утверждают, что их код работает довольно быстро. Он не очень работает с JS, но зато очень любит CSS. С кодом спецификации AMP HTML можно ознакомится перейдя по ссылке https://github.com/ampproject/amphtml

Как использовать данный код?

На самом деле я понял, что просто нужно нужно подключить AMP JS библиотеку:

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="каноническая ссылка">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>

      Ваш код страницы документа HTML

  </body>
</html> 

Библиотека позволяет быстро провести рендеринг соответствующей страницы. Компоненты AMP HTML могут дополнить или изменить ядро функциональности элементов HTML5. Вообщем кто желает можете протестировать данную библиотеку и уже начать ею пользоваться (я пока не тестил).
Приведу простой пример, который вы можете найти в спецификации AMP HTML:


<!doctype html> 
 <html ⚡>   
 <head>    
  <meta charset="utf-8">
      <title>Простой документ</title>   
   <link rel="canonical" href="./regular-html-version.html">    
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">   
   <style amp-custom>   
     h1 {color: red}   
   </style>   
   <script type="application/ld+json">  
    {     
   "@context": "http://schema.org",     
   "@type": "NewsArticle",   
     "headline": "Article headline",   
     "image": [          "thumbnail1.jpg"        ],   
     "datePublished": "2015-02-05T08:00:00+08:00"      
}      </script>   
   <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>   
   <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>  
    <script async src="https://cdn.ampproject.org/v0.js"></script>    
</head>   
 <body>  
    <h1>Простой документ</h1>   
   <p>        Какой-то текст     
   <amp-img src=sample.jpg width=300 height=300></amp-img>     
 </p>      <amp-ad width=300 height=250     
   type="a9"       
   data-aax_size="300x250"     
     data-aax_pubname="test123"        
  data-aax_src="302">     
 </amp-ad>   
 </body> 
</html>

Документ AMP HTML должен содержать следующее:

В конце хотелось бы отметить тех кто занимается и делает данный проект — AMP Project.



наверх