Share
AMP is in een notendop een methode om websites te optimaliseren om sneller en performanter te zijn.
AMP staat voor 'Accelerated Mobile Pages' en hoewel de vermelde focus ligt op prestaties op mobiele apparaten, zijn de snelheidsvoordelen die het kan brengen even nuttig op niet-mobiele apparaten. AMP bevat een reeks optimalisatiemethoden die verschillende soorten voordelen bieden, maar de kracht om sites sneller te maken is aantoonbaar het belangrijkst op beeld- en videozware sites.
Gegeven snellere sites zorgen voor meer betrokken bezoekers, mogelijk hogere rankings van zoekmachines (en dus een grotere blootstelling), het is zeker de moeite waard om na te denken over AMP wanneer je de volgende web-gebaseerde showcase van je werk maakt.
AMP is een open source-project met Google erachter en is nu in ontwikkeling sinds ongeveer september 2015, met AMP-versies van sites die sinds 24 februari van dit jaar in de zoekresultaten van Google worden weergegeven. We hebben AMP besproken sinds de publieke lancering eerder dit jaar, dus het is een geweldig idee om te lezen "AMP Project: zal het je sites sneller maken" als je wat achtergrondinformatie wilt voordat we verder gaan.
In dat artikel vindt u veel informatie over de algemene waarde van werken met AMP, maar we gaan een beetje meer direct kijken naar de twee meest relevante aspecten van het werken met afbeeldingen en video: AMP's custom
Vuurtoren door ssuaphoto / PhotoDune. AMP kan uw sites helpen beter te presteren bij het zoeken.Wanneer u een pagina maakt op basis van AMP-vereisten, gebruikt u een reeks aangepaste elementen in plaats van enkele van de standaard HTML-elementen waaraan u wellicht bent gewend.
Accentsconagua
![]()
Wanneer u deze aangepaste elementen gebruikt, maakt u automatisch gebruik van een aantal voordelen die inherent zijn aan AMP. Laten we eens kijken naar wat ze zijn en waarom ze jouw overweging waard zijn.
U weet al dat AMP wordt verondersteld om uw sites sneller te maken, maar wat specifiek de
Als u een pagina met meerdere afbeeldingen hebt, moet elke afbeelding standaard in één treffer worden geladen. Dit kan heel gemakkelijk de totale laadtijd van uw site naar een langere tijd slepen. Hoe hoger uw initiële laadtijd, des te groter de kans dat bezoekers uw site verlaten en des te erger kunt u in zoekmachines.
Met een techniek die 'Lazy Loading' wordt genoemd, kun je in plaats daarvan alleen de eerste paar afbeeldingen laden en de rest later komen. Er is voldoende inhoud geladen voor de bezoeker om de pagina te bekijken en de resterende afbeeldingen worden "lazy loaded" wanneer de bezoeker naar beneden scrolt. Dit kan uw laadsnelheid aanzienlijk verbeteren.
In de tests die ik bijvoorbeeld uitvoerde als onderdeel van mijn artikel "AMP-project: zal het uw sites sneller maken", merkte ik dat op een gesimuleerde mobiele verbinding het 26 seconden duurde om een pagina met vijf 500Kb-afbeeldingen te laden. Met een AMP-versie van dezelfde site werd de laadtijd teruggebracht tot 16 seconden.
Een van de belangrijkste voordelen van het gebruik van AMP is dat het probleem van het meerdere keren opnieuw plaatsen van de pagina-indeling wordt voorkomen.
Terwijl een pagina wordt weergegeven, hebben de elementen van niet-geladen media aanvankelijk geen hoogte of breedte. Daarom legt de browser dingen uit alsof het genoemde medium geen deel uitmaakt van de pagina. Wanneer een afbeelding klaar is met laden, moet de lay-out opnieuw worden berekend, waarbij andere elementen moeten worden verplaatst en van vorm moeten worden veranderd om in de afbeelding te passen, iets dat "reflowing" wordt genoemd. Als andere media ook nog moeten worden geladen, moet de pagina telkens opnieuw worden geplaatst voor elk item.
Vooral op mobiele apparaten kunnen bezoekers gefrustreerd raken als ze al verloofd zijn en waar ze op gefocust zijn, plotseling uit het zicht springt als gevolg van reflow. Dit kan heel gemakkelijk leiden tot verminderde aandacht van bezoekers of het verlaten van de site, vooral als dit meerdere keren gebeurt.
Met AMP treedt nooit opnieuw vloeien op. Dit komt omdat elk stukje media een tijdelijke aanduiding van de juiste grootte heeft toegevoegd aan de lay-out vanaf het begin. Zodra het medium is geladen, vervangt het de tijdelijke aanduiding, er is geen hervulling nodig.
Opslag en bandbreedte voor grote hoeveelheden media kunnen vrij snel duur worden en het kiezen van een host die snel aan kijkers over de hele wereld kan leveren, is niet altijd eenvoudig.
Wanneer u AMP echter gebruikt, krijgt u gratis toegang tot een door Google verstrekt CDN. Zolang u een pagina maakt die de AMP-validatie passeert, slaat Google automatisch uw HTML-documenten, JS-bestanden en afbeeldingen in de AMP CDN in de cache op..
De waarheid is de meeste dingen die AMP doet, want je kunt ook op andere manieren doen via verschillende scripts en methodologieën. Een van de grote voordelen van het gebruik van AMP is echter dat u niet op de hoogte hoeft te zijn van de technische details die gepaard gaan met het instellen van gelijkwaardige optimalisaties..
Door AMP te gebruiken, kunt u voorkomen dat u handmatig meerdere scripts en processen moet kiezen, configureren en onderhouden. In plaats daarvan gebruikt u AMP gewoon zoals voorgeschreven en gebeurt alles op de achtergrond zonder uw hands-on betrokkenheid.
Voordat we ingaan op de details van het gebruik
Het is niet nodig om de volledige tutorial te doen, dus als je gewoon doorgaat tot het einde van de sectie getiteld "Omgaan met Inline CSS", ben je helemaal klaar om terug te komen en hier weer op te halen.
Op een AMP-pagina die u gaat gebruiken
(U kunt de volledige documentatie vinden voor
Bij het toevoegen van een src attribuut om de locatie van uw afbeelding te specificeren, en een alt attribuut om een fallback voor tekst in te stellen.
Het is ook een eis in AMP die u opgeeft hoogte en breedte elke keer. Dit komt omdat AMP de kenmerken height en width gebruikt om de grootte van placeholders in te stellen voordat de afbeelding wordt geladen.
Als u zich zorgen maakt over hoe u afbeeldingen responsief kunt laten reageren omdat u vaste dimensies instelt, hoeft u zich geen zorgen te maken omdat AMP functionaliteit heeft voor het afhandelen van responsieve aanpassingen, die we later zullen bespreken.
Een eenvoudig voorbeeld van de
De srcset kenmerk dat kan worden gebruikt om alternatieve afbeeldingen op te geven die op verschillende breedten of pixeldichtheden moeten worden weergegeven.
Het is op dezelfde manier gebruikt als in een gewone
Als u bijvoorbeeld verschillende afbeeldingen met verschillende pixeldichtheden wilt gebruiken, kunt u het volgende gebruiken:
Of om verschillende afbeeldingen te laden, afhankelijk van de breedte van de viewport die u mogelijk gebruikt:
Let op, als u waarden gebruikt die bevatten w de src kenmerk wordt genegeerd in browsers die srcset ondersteunen.
Als u een afbeelding moet vermelden die u kunt gebruiken attributie, bijvoorbeeld:
Als u de weergave van de plaatsaanduidingen die op uw pagina verschijnen wilt beheren terwijl afbeeldingen worden geladen, kunt u dit doen met CSS die is getarget op amp-img element, bijvoorbeeld:
amp-img achtergrondkleur: grijs;
In een AMP-pagina die u gebruikt
(Nogmaals, u kunt de volledige documentatie vinden voor
Zoals met src is vereist om de locatie van de video op te geven, en beide hoogte en breedte zijn vereist, zodat AMP de pagina tijdens het laden correct kan opmaken.
Een basisvoorbeeld met vereiste kenmerken kan zijn:
Als de video om een of andere reden niet wordt geladen of weergegeven, is het mogelijk om een fallback in te stellen door een a te nestelen Bijvoorbeeld: Video kan niet worden geladen. Controleer of uw browser HTML5-video ondersteunt. De Dit werkt op dezelfde manier als in een normale HTML5 Als voorbeeld: Video kan niet worden geladen. Controleer of uw browser HTML5-video ondersteunt. Voordat het afspelen van een video is gestart, wordt het eerste frame van de video standaard weergegeven. Als u echter wilt aanpassen wat wordt getoond, kunt u een afbeelding opgeven met behulp van het attribuut Bijvoorbeeld: Evenals wat we hierboven hebben besproken, zijn er een paar extra attributen die u kunt gebruiken met de Standaard worden video's niet automatisch afgespeeld. Als u dit wilt overschrijven, neemt u het kenmerk op Besturingselementen van een video worden niet weergegeven tenzij u het kenmerk toevoegt Als u een videoherhaling wilt maken, neemt u het kenmerk oneindig op Als u het geluid van een video wilt uitschakelen, voegt u het kenmerk toe AMP's Laten we even kijken naar wat iedereen doet. (Vind hier de volledige lay-outdocumenten: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md) Uw lay-outinstelling "ga naar" zou moeten zijn De mogelijkheid om dit kenmerk toe te voegen, is waarom u zich geen zorgen hoeft te maken over het garanderen van reactievermogen ondanks expliciete instellingen De Met behulp van een Met de Als je de CSS hebt toegepast De Dat omvat alle essentiële aspecten van het werken met AMP's gebruik AMP biedt een geconsolideerde, handsfree manier om mediazware sites te optimaliseren die zorgen voor een veel betere mobiele ervaring, terwijl tegelijkertijd de desktopbeleving verbetert. Raadpleeg de onderstaande links voor meer informatie.terugvallen.Meerdere bronnen toevoegen
element dus voor volledige details ga naar: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sourceEen "Poster" instellen
poster.Extra attributen
Automatisch afspelen
automatisch afspelen:controls
controls:Lus
lus:Gedempt
gedempt:Het kenmerk "layout"
lay-out ingesteld op een van de zes waarden, die ervoor zorgen dat het element zich anders gedraagt:
sympathiek
sympathiek in de meeste gevallen - gebruik dit als u niet zeker weet wat u moet kiezen. Hierdoor wordt het element uitgebreid tot de maximale breedte van het bovenliggende element, terwijl de hoogte-breedteverhouding behouden blijft.hoogte en breedte waarden op elementen.vullen
vullen instelling is bijna hetzelfde als sympathiek, het element wordt echter uitgebreid tot de maximale breedte en hoogte van de ouder, ongeacht de beeldverhouding.vast
vast lay-out houdt het element op de opgegeven hoogte en breedte, zonder de mogelijkheid om het formaat te wijzigen.vaste hoogte
vaste hoogte Als u een element instelt, wordt de breedte uitgerekt om in het bovenliggende element te passen, maar blijft de hoogte hetzelfde. flex-post
weergave: flex; naar de ouder van een element, kunt u de flex-post lay-outwaarde om alle beschikbare ruimte in het bovenliggende element te vullen. Als meerdere kinderen van dezelfde ouder de flex-post lay-out delen ze de ruimte op dezelfde manier.geen scherm
geen scherm instelling wordt gebruikt om een element te verbergen. Het doel is om toe te staan dat inhoud wordt weergegeven bij de actie van een gebruiker, bijvoorbeeld in combinatie met de Afsluiten
Gerelateerde Links:
