Neues Contao-Modul gegen kumulative Layoutverschiebung bei Bildern veröffentlicht
Wird eine Website aufgerufen, werden alle benötigten Daten vom Server angefordert. Darunter die HTML-Seite sowie die zugehörigen CSS-, Javascript-Dateien und Schriften. Multimedia Inhalte wie Bilder und Videos haben dabei die größte Datenmenge. Damit der User nicht lange warten muss, bis er den Inhalt der Seite erfassen kann, werden z. B. Bilder dynamisch nachgeladen. Generell entsteht beim Laden der Bilder ein Problem: Die Seite springt.
Das Problem beim Laden von Bilder auf der Website
Jeder kennt das Problem: Man ruft eine Seite am Smartphone auf, möchte einen Button klicken und plötzlich erscheinen Bilder und der Button ist verschwunden. Erst beim nach unten scrollen findet man den gewünschten Button wieder. Diesen Effekt nennt man auch kumulative Layoutverschiebung. Google bewertet seit einiger Zeit diesen Punkt in seiner Pagespeed-Analyse und auch im SEO-Ranking.
Das Webteam von SowieSo hat hierfür eine Lösung speziell für Bilder entwickelt, um dem Phänomen bequem entgegenzuwirken. Das Content-Management-System Contao bietet bereits Bildgrößen oder auch besser bekannt als "Repsonsive Images" an, um die Auflösung und Dateigröße von Bilddateien im responsiven Webdesign zu minimieren. Auf diese Funktionalität baut das contao-image-styling-bundle auf.
Die Lösung: contao-image-styling-bundle
Für jedes Bild wird anhand der Breite und Höhe die Proportion errechnet und ein CSS-Code generiert. Das Styling spart den Platz für das Bild auf der Seite aus, bis dieses vollständig vom Server heruntergeladen wurde.
Code wird vom Bundle automatisch für jedes Bild generiert
/* Code wird vom Bundle automatisch für jedes Bild generiert */
@media only screen and (min-width:768px){
.image_container_350_element_type::before{
padding-top: 74.29%
}
.image_container_350_element_type{
width: 385px
}
}
@media only screen and (max-width:767px){
.image_container_350_element_type::before{
padding-top: 74.24%
}
.image_container_350_element_type{
width: 295px
}
}Zusätzliches CSS Styling
Folgende CSS-Zeilen müssen manuell in das eigene Projekt hinzugefügt werden. Das Styling sorgt dafür, dass der Browser das geladene Image ohne das Layout zu verschieben in den Platzhalter setzt. Hierbei kann bei Verwendung von lazy-loading Lösungen auch ein Fade-In Effekt hinzugefügt werden.
.image_container {
display: block;
position: relative;
max-width: 100%;
}
.image_container::before{
content: "";
display: block;
}
.image_container img {
width: 100%;
height: auto;
display: block;
position: absolute;
top: 0;
left: 0;
}Große Flexibilität bei Anpassungen
Der große Vorteil bei diesem Bundle ist, dass der Code dynamisch anhand der in Contao eingestellten Bildgrößen pro Bild erzeugt wird. Somit können hinterlegte Bilder je nach Endgerät unterschiedliche Proportionen haben (z. B. Desktop: 1920x1080px, Mobil 767x767px) und trotzdem wird die Layoutverschiebung beim Anzeigen verhindert. Zusätzlich entfällt die manuelle Anpassung im CSS-Code bei Änderungen an den Responsive-Image-Einstellungen im Backend.