Was ist AMP für Entwickler? - Guru 2.0
Was ist AMP für Entwickler?

Was ist AMP für Entwickler?

Einsamer Herbst in Paris, Bild: microble.eu

Einsamer Herbst in Paris, Bild: microble.eu

Im ersten Teil zu AMP – Accelerated Mobile Pages haben wir uns mal angeschaut, was das eigentlich so ist. Und ist der Blog wirklich schneller damit? Heute schauen wir uns den AMP Entwickler an. Was musst Du wissen  bzw. können um das Maximum aus AMP herauszuholen. Vielleicht willst du ja das AMP-Plugin von Automattic einsetzen und noch ein wenig von Hand eingreifen.

Sind Blogs mit AMP wirklich schneller?

Wenn man dem Chrome PlugIn glauben darf, dann ja! Ich habe den ersten Teil dieser Artikelreihe im Original gemessen.

Ladezeiten einer klassischen WordPress Seite

Ladezeiten einer klassischen WordPress Seite

Ich weiß es ist nicht prickelnd aber die Ladezeit beträgt rund 7 Sekunden. Ja bis alles geladen und vollständig angezeigt ist. Aber Du kannst ja schon viel früher zu lesen beginnen. Ist also gar nicht so schlimm. Aber dieselbe Seite als AMP-Version aufgerufen liefert ein ganz anderes Bild.

Ladezeiten einer AMP-WordPress Seite

Ladezeiten einer AMP-WordPress Seite

Die Seite wird fast um die Hälfte schneller geladen. Du siehst das AMP-Ding bringt schon was. Wenn wir jetzt die eigentliche Zeit vergleichen, nämlich klassisch mit 3,2 Sekunden und als AMP-Version 0,7 Sekunden ist das schon ein Grund sich damit zu beschäftigen.

AMP Entwickler brauchen CSS, JS und HTML

Um Accelerated Mobile Pages einzusetzen brauchst Du ein paar Regeln. Ja und die sind auch ziemlich streng. Halte dich daran und es klappt oder lass es. Da gibt es jetzt kein grau, sondern nur schwarz oder weiß, hü oder hott. Aber keine Interpretation. Das kann jetzt ziemlich blöd sein, denn du musst das schon programmieren (oder dem AMP-PlugIn überlassen). Und noch dazu widersprechen die Regeln oft dem, was du seit Jahren schon machst.

Ein ziemlich drastisches Beispiel ist CSS. Für AMP ist jedes externe Verlinken ganz, ganz böse. Daher schreiben wir jetzt wieder alle CSS inline. Also als style-Element innerhalb des head-Elements. Hat eigentlich einen ganz einfachen Grund. Denn jede verlinkte Datei (CSS, JavaScript oder auch Grafik) erzeugte eine erneute Serveranfrage. Und das mit allem drum herum: DNS kontaktieren, Namen auflösen, Header übermitteln und so fort. Da ist der ganze Overhead einfach mit dabei und das macht die Seite langsam. Und wir wollen ja pfeilschnelle Seiten für die Smartphones mit der langsamen Leitung. Daher alles rein in die HTML-Seite.

Und dann darf das Stylesheet nicht größer als 50KByte sein. Also wenn du Bootstrap einsetzt hat es sich schon erledigt. Denn da sind in der Mini-Super-komprimierten Version schon 121KByte auf der Waage. Das 2,5 fache des erlaubten. Also am besten ein eigenes kleines Stylesheet und das sehr effizient einsetzen.

Das ist jetzt ein guter Zeitpunkt die Hausaufgaben zu machen und endlich ordentlich und sauber in CSS einzusteigen. Ein gutes Beispiel ist zum Beispiel der Einsatz von CSS-Selektoren.

Schaut gut aus und legt das Box-Modell für alle HTML-Elemente fest und nicht nur für eine Gruppe. Damit hast du schon viel gewonnen. Aber es geht noch besser.

Nochmal 6 Zeichen eingespart. Ist ja nicht so viel. Aber bei rund 50.000 Zeichen ist jedes einzelne, eingesparte wichtig.

Bei HTML sind auch ein paar Elemente verboten. Lass am besten die Finger von base, frame, embed und ähnlichen. Es sind meistens die “Leistungsfresser” die verboten sind. Das ist wie mit den Webfonts. Du kannst sie ruhig weiterverwenden. Wenn sie von Google oder Fonts.com sind. Irgendwie klar. Ist ja ein Projekt von unserer geliebten Suchmaschine. Also denk daran, stell gleich mal auf //fonts.googleapis.com oder //fast.fonts.net um. Und keine anderen CDNs oder gar eigene WebFonts.

Wenn du es ganz genau wissen willst, lies am besten die HTML Spezifikation für Accelerated Mobile Pages. Das sollte jeder AMP Entwickler gleich mal in deine Lesezeichen aufnehmen.

Aber das wirklich große Ding ist: Kein eigenes JavaScript in den AMP-Seiten! Jetzt hast du dich als Entwickler daran gewohnt deine Menüs und dein responsives Design mit JavaScript umzusetzen. Als AMP Entwickler hat dich jetzt dein Glück verlassen. Aus. Ende. Einfach kein eigenes JavaScript mehr. Du musst dir jetzt andere Wege suchen. Aber darum bist du ja EntwicklerIn, denn wir sind da sehr kreativ. Und außerdem gibt es noch die AMP-eigenen Elemente, welche du einsetzen kannst. Und…

AMP-Elemente

Da sind in der Spezifikation einige neue HTML-Elemente enthalten. Bei den meisten handelt es sich um Elemente mit der Zielrichtung auf Medien. Alle haben auch ein Präfix: amp- Dadurch kannst du Standard-Elemente nachbilden, welche normalerweise nur mit JavaScript gemeinsam laufen. Das sind dann Elemente wie amp-img, amp-video, amp-audio und amp-iframe, welche ihre HTML-Elemente ersetzen. Aber wenn du hier auch mehr wissen willst, und das willst du sicher, dann schau am Besten in die Spezifikation für die HTML-Elemente.

Aber das ist noch nicht alles. Denn es gibt ein paar “soziale” Elemente (ich habe mal nicht alle aufgezählt, du willst ja auch auf der AMP-Seite noch was entdecken) wie amp-ad, amp-analytics, amp-pinterest, amp-twitter und amp-youtube. Damit kannst du beliebte Inhalte von Dritt-Anbietern ganz leicht einbinden. Und zu guter Letzt hast du noch eine Handvoll Multimedia-Elemente wie amp-lightbox, amp-carousel und amp-anim.

Diese Elemente unterstützen dich als AMP Entwickler für hochoptimierten Code. Wie Du ja weißt, gibt es drei Säulen: Regeln, AMP-Elemente und ein Validator. Und genau da kannst du jetzt super ansetzen um für beide Arten, klassisch und AMP, schnellen Code zu schreiben.

Mal schauen was daraus wird. Aber du kannst dich schon jetzt daran beteiligen. Probier das PlugIn aus und berichte in den Kommentaren hier auf der Seite über deine Erfahrungen.

 

Es wurde ein Kommentar zu diesem Beitrag geschrieben.

Blogheim.at Logo
Diese Website verwendet Cookies - nähere Informationen dazu finden Sie in unserer „Datenschutzerklärung“. Klicken Sie auf „Ich stimme zu“, um Cookies zu akzeptieren und unsere Webseite zu besuchen, oder klicken Sie auf „Cookie-Einstellungen“, um Ihre Cookies selbst zu verwalten.