Middle
Kas yra AMP puslapiai?
sobes.tech AI
Atsakymas iš AI
AMP (Accelerated Mobile Pages) yra atviro kodo HTML rėmas, sukurtas Google, siekiant sukurti greitas ir reaguojančias interneto svetaines, kurios gerai atrodo mobiliuosiuose įrenginiuose.
AMP pagrindiniai principai:
- Apribotas HTML žymų rinkinys: Naudojama HTML submažmeninė dalis, kuri pagreitina puslapio analizę ir atvaizdavimą.
- Asinchroninis išteklių įkėlimas: Skriptai, vaizdai ir kiti ištekliai įkeliami asinchroniškai, neblokuoja pagrindinio turinio atvaizdavimo.
- Turinio prioritetas: Optimizacija nukreipta į greitą matomo turinio įkėlimą.
- Statiniai elementų dydžiai: Dauguma elementų turi iš anksto nustatytus dydžius, kurie sumažina "šokius" įkėlimo metu.
- AMP Cache naudojimas: Trečiosios šalys (pvz., Google) gali talpinti AMP puslapius ir juos tiekti iš savo talpyklos, užtikrinant momentinį įkėlimą.
AMP pagrindiniai komponentai:
- AMP HTML: Apribotas HTML žymų rinkinys su papildomais AMP komponentais.
- AMP JS: JavaScript biblioteka išteklių įkėlimui ir interaktyvumui valdyti.
- AMP Cache: Proxy tinklas AMP puslapių talpyklai ir pristatymui.
Pavyzdys AMP naudojimo:
<!doctype html>
<html amp lang="lt">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Pavyzdinė AMP puslapis</title>
<link rel="canonical" href="https://example.com/įprasta-puslapis.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
/* Jūsų CSS stiliai */
</style>
</head>
<body>
<h1>Sveiki, AMP!</h1>
<p>Tai yra greitas puslapis.</p>
<amp-img src="/images/kitten.jpg" alt="Kačiukas" width="100" height="100" layout="responsive"></amp-img>
</body>
</html>
AMP privalumai:
- Įkėlimo greitis: Puslapiai įkelia labai greitai, ypač mobiliuosiuose įrenginiuose.
- SEO pagerinimas: Google teikia pirmenybę AMP puslapiams mobiliųjų paieškos rezultatuose.
- Vartotojo patirties gerinimas: Greitas įkėlimas ir sklandus slinkimas.
AMP trūkumai:
- Dizaino ir funkcionalumo apribojimai: Ne visi HTML žymės ir JavaScript funkcijos yra prieinamos.
- Įgyvendinimo sudėtingumas: Reikalauja atskiro kūrimo arba esamo turinio pritaikymo.
- Priklausomybė nuo Google (tam tikru mastu): AMP Cache yra Google kontrolėje.
AMP plačiai naudojamas naujienų straipsniams, tinklaraščiams ir kitam turiniui, kur greitis yra kritiškai svarbus mobiliuosiuose įrenginiuose.