Wie sinnvoll und/oder notwendig sind Accelerated Mobile Pages (AMP)?

Accelerated Mobile Pages (AMP) sind speziell für mobile Geräte erstellte Webseiten. Basis ist ein speziell für die Erstellung von Webseiten für mobile Endgeräte entwickeltes Derivat von HTML. Das Open Source Projekt wurde unter Federführung von Google herausgebracht.

In diversen Artikeln habe ich Zahlen zu AMP gefunden, da wird von 10-40 mal schnelleres Laden gesprochen.

Geschwindigkeitsunterschiede?

Und ja meine AMP-Version wird in 0.79 Sekunden geladen!
Aber die nicht AMP-Version schafft es laut PageSpeed in 0.347 Sekunden.

Das wundert mich nicht! Ich habe nämlich eine Webseite zum Testen verwendet, die ich selbst gecodet habe. Auf dieser Webseite habe ich bereits bei der Erstellung bewußt auf diverse JS-Frameworks, wie Bootstrap, JQuery und Co. verzichtet.

Responsive Webdesign mit Bootstrap ist nämlich alles andere als schnell! Die einfache Umsetzung von Responsive Webdesign hat ihren Preis. Es wird eine Menge Ballast geladen. Dies wirkt sich selbstverständlich auf die Seitenladezeit negativ aus.

Beim Thema „Responsive Webdesign“ wird zu gern vergessen, dass Text schon immer „responsive“ darstellbar war. Ganz ohne JavaScript und Framworks und auch ganz ohne CSS und ineinandergeschachtelte html-Elemente bricht Text passend zur Größe des Bildschirmes um.

flexibler Design-Ansatz

Das starre Design, wie es in Druckmedien eingesetzt wird, ist für Webseiten ungeeignet.
Das Problem liegt meist nicht bei den Webentwicklern, sondern den Auftraggebern. Nicht selten habe ich davon gehört, dass sich Auftraggeber beschwert haben, weil die Webseite nicht Pixelgenau dem Entwurf in Word entsprochen hat. Aber das ist ein anderes Thema.

Browser-Cache und Google-Cache

Während der erste Aufruf einer Webseite immer etwas länger dauert, wird beim nächsten Besuch die Ladezeit kürzer. Die Ursache dafür liegt im Browser-Caching. Der Browser lädt die Inhalte beim ersten Laden in einen temporären Ordner und kann somit beim erneuten Aufruf der Seite die Inhalte schneller darstellen.

AMP-Seiten werden von Google gecached. Dadurch kann insbesondere bei der Verwendung von Fotos, Videos und Animationen Ladezeit gespart werden und das nicht erst beim erneuten Laden.

Bin ich schon zu alt für das Smartphone?

Ich gebe es zu ich bin kein Maus-Schupser. Als ich meine ersten Schritte am Computer versuchte, gab es noch keine Maus.

Lange Zeit, und auch heute noch, verwende ich lieber Tastatur-Kürzel, als mich durch die sich stetig ändernden Menüs zu navigieren.

Nun ist wohl auch die Zeit der Maus-Schupser vorbei. Heute wird gewischt was das Zeug hält.

Nein die IT-Branche ist nicht zusammengebrochen und die ITler müssen nicht als Putzfrau bzw. Putzmann arbeiten. Es wird auf dem Bildschirm gewischt. Es nennt sich zwar Touchscreen, aber bloßes Anfassen führt nicht unbedingt zu Erfolg.

Nun bin ich schon etwas älter als 17, und meine Finger sind wegen der Arthrose nicht mehr ganz so beweglich, wie ich bzw. das Smartphone es gerne hätte.
Nun habe ich ganz ohne fremde Hilfe das Mikrophon-Symbol gefunden. Ich habe keine Arthrose in der Zunge dennoch werden aus meinen Worten ganz neue Wortschöpfungen erfunden und so musste ich nach ein paar Minuten, inzwischen reichlich genervt, aufgeben.

Also noch einmal.

Nun ist da eine Nachricht aufgeploppt, vermutlich von Google, dass ich meine geänderte Telefon-Nummer bestätigen möchte.
Ich bin nicht aus Dummsdorf, ich klicke nicht auf jeden Link und melde mich mit meinem Passwort an, um mich später zu wundern, warum mein Rechner nun nicht mehr funktioniert.

Auf dem Laptop oder Desktop-Computer wird bei Aufruf des Links zumindest noch die URL angezeigt, d.h. hier kann ich prüfen, ob ich die richtige Seite aufrufe. Auf dem Smartphone sehe ich dazu nichts. Ich verzichte auf die Anpassung der Telefon-Nummer und versuche mich zu erinnern, was ich eigentlich machen wollte.

Egal, ich trinke erst mal einen Kaffee. Anschließend setzte ich mich an meinen immer noch Windows7 – Laptop und fühle mich etwas älter als sonst.

Interessante und nützliche Erweiterungen für WordPress – Sicherheit

Safety first – Sicherheit zuerst

Open Source Systeme erlauben nicht nur dem wohlwollendem Programmierer die Weiterentwicklung, sie geben auch potentiellen Hackern die Möglichkeit Schwachstellen auszuspionieren, um diese dann auszunutzen.

WordPress-Erweiterung: WP-Serber

In meinem Serverlogs gibt es ausreichend Hinweise darauf, dass WordPress-Blogs mehrmals täglich angegriffen werden.
Dabei wird z.B. versucht sich als Admin anzumelden. Je komplexer das Passwort, desto sicherer ist eine Webseite. Allerdings ist bei einer unbegrenzten Anzahl von Anmeldeversuchen die Gefahr groß, dass das Passwort doch geknackt wird.

Abhilfe bietet das WordPress-Plugin: WP-Serber. Der „Wachhund“ prüft unter anderem, ob ein Loginuser existiert, je nach Einstellungen, kann die zugehörige IP bei nicht existierendem User sofort gesperrt werden.

Bei existierenden Usern kann die Anzahl Fehlversuche und die Sperrzeit vorgegeben werden. Darüber hinaus kann bei wiederholten Anmeldeversuchen mit ungültigen Passwörtern die Sperrzeit verlängert werden.

Auf der Projektseite von wordpress.org kann man das Plugin herunterladen. Die Installation innerhalb von WordPress ist ebenfalls möglich.
Weitere Informationen auf: https://de.wordpress.org/plugins/wp-cerber/.

WordPress-Erweiterung: Anti-Spam Biene

Kommentar-Spam ist nicht nur ärgerlich, er kostet auch unnötig Zeit, denn zwischen all dem Müll könnte sich ein echter Kommentar verstecken. Das Plugin antispam-bee ist kostenlos und werbefrei! Darüberhinaus kommt das Plugin ohne Captcha aus! Für mich das Plugin meiner Wahl, wenn es um die Vermeidung von Kommentar-Spam geht.

Antispam Bee


Weitere Informationen auf: https://de.wordpress.org/plugins/antispam-bee/.

Tipp: niemals Login-Namen auf der Webseite anzeigen

Angeklebte Kopfzeile

Zur Erreichung einer intuitiven Bedienbarkeit der Webseiten kann es hilfreich sein, bestimmte Elemente im angezeigten Bereich zu fixieren. Dabei geht allerdings ein Teil des verfügbaren Anzeigebereiches für den Inhalt verloren.

Je nach Größe des Kofbereiches und der darin enthaltenen Elemente, wie z.B. Logo, Seitenname, Menü, Service- oder Hilfebuttons, kann beim Herunterscrollen der Seite der Kopfbereich so verkleinert werden, dass zumindest die wichtigsten Bedienelemente vorhanden sind.

Diese Technik bezeichnet man auch als „sticky header“. Sticky header bedeutet auf deutsch: angeklebte Kopfzeile.

Für die Umsetzung allein mit CSS-Styles unter Verwendung von position: sticky [1] ist eswohl noch zu früh. Über die Webseite Kann ich das verwenden? (caniuse.com) kann man prüfen, inwieweit neue Techniken bereits umgesetzt sind und bei wieviel Prozent der potentielle Besucher und Kunden diese Technik bereits unterstützt wird.

Aktuell beträgt der Wert nur 18.67 %!

Zuwenig, um darauf eine Lösung für eine produktive Seite aufzubauen.

Die Umsetzung erfolgt somit mit Css3 und JavaScript.

Im Sinne einer schnellen Seitenladezeit ist es nicht immer sinnvoll ganze Frameworks zu laden, um z.B. eine Css-Klasse oder eine Css-Style anzupassen. Es funktioniert auch mit purem JavaScript!

Allerdings ist der Programmieraufwand bei den verschiedenen Frameworks durchaus geringer und wenn diese ohnehin geladen werden, weil sie an anderer Stelle gebraucht werden, spricht nichts dagegen diese auch zu verwenden.

(function($)
{
$(window).scroll(function () {
if ($(this).scrollTop() > 1) {
$('#overcard').addClass('sticky');
} else {
$('#overcard').removeClass('sticky');
}
});

})(jQuery);

 

Quellen:

  1. maddesignsde – Css3 Position Sticky Artikel vom 16.05.2014
  2. callmenick.com – js css-Klassen

Responsive Webdesign – aber nicht so!

Nachdem Designer Webseiten in Druckformate gezwängt haben und anschließend feststellen mussten, dass nun die Anzeige auf einigen Bildschirmen nicht mehr gut aussieht, soll „Responsive Webdesign“ alles richten.

Dank der vielen Frameworks ist dies auch kein Problem. Die Webseite bekommt den Twitter-Bootstrap übergestülpt, ein paar Anpassungen am CSS und in JavaScript, fertig!

In einigen Fällen sieht es auch so aus, als könnte es funktionieren, aber die Stoplersteine liegen im Verborgenem.

 

positiver erster Eindruck
Eine Webseite hat ca. 3 Sekunden um zu überzeugen: Eins – Zwei – Drei – Chance vorbei!
Die Besucher wollen schnelle Informationen. Wenn innerhalb der ersten Sekunden nicht das Gesuchte angezeigt wird, ist der Besucher schnell wieder weg.

Das Laden der JavaScript-Bibliotheken und umfangreicher CSS-Style-Definitionen kann je nach Gerät und Anbindung an Internet mehrere Sekunden benötigen.

Da hilft es auch wenig, dass der Besucher beim 2. Besuch die Seite schneller angezeigt bekommt, wenn diese Dateien vom Browser gecacht werden.

Wenn die schönen Designelemente in den ersten Sekunden noch gar nicht vorhanden sind, können Sie den neuen Besucher nicht überzeugen.

 

Intuitive Bedienbarkeit
Die intuitive Bedienbarkeit ist Voraussetzung für jede Webseite, unabhängig davon, ob diese „responsive“ gestaltet werden soll oder nicht.

Dafür ist es wichtig, dass weiterführende Links und Buttons als solche erkannt werden.

 

Download-Volumen
Bei getakteten Verbindungen, ist das Download-Volumen ein wichtiger Aspekt. Je nach Tarif wird das Surfen teurer oder die Übertragungsgeschwindigkeit nach Erreichen der Obergrenze gedrosselt.

In beiden Fällen ist es ärgerlich, wenn das Volumen für unnötigen Ballast verbraucht wird.

Dies gilt im Übrigen auch für Werbung. Wer unbedingt ungefragt Werbung einblendet, der sollte zumindest so fair sein, dass er nicht unnötig viel Volumen verbraucht. Es muss nicht gleich das ganze Werbevideo aufgedrängt werden, ein Vorschaubild mit entsprechendem Text reicht durchaus.

Es ist also sinnvoll bereits auf dem Server zu unterscheiden, ob z.B. hochauflösende Grafiken benötigt werden.
Leider gibt es dafür vom W3C und den Browserherstellern keine geeigneten Vorgaben.