Beiträge zu “Performance”

Jekyll: Bilder verzögert laden

Bilder auf einer Webseite sollten wenn möglich verzögert geladen werden, so die Empfehlung u.a. von Google. Ich habe das jetzt mal mit der Javascript Bibliothek lazysize ausprobiert und ich war überrascht wie einfach das geht.

Natürlich muss man die javascript Datei auf den Server kopieren und in die Seite einbinden

 vi  _layouts/default.html
  <script src="/js/lazysizes.min.js" async=""></script>

Dann gilt es die Bildertags richtig zu formatieren. Ich verwende das Plugin jekyll-picture-tag.rb das mir für die unterschiedlichen Grössen unterschiedliche Bilder erstellt und das html baut.

Dort ersetzte ich srcset durch data-srcset uns src durch data-src.

 <source data-srcset=\"#{instance[source][:generated_src]}\"#{media}>\n"
 <img data-src=\"#{instance['source_default'][:generated_src]}\" #{html_attr_string} > \n"

In der _config.yml gebe ich dann den Bildern noch die notwendige css Klasse mit auf den zuweisung

 picture:
 ....
 ----
       attr:
         class:  lazyload
         itemprop: image

Das Ergebnis ist beeindruckend und bringt besonders auf der Startseite oder Blogbeiträgen mit vielen Bildern einen spürbaren Geschwindigkeitsvorteil


20.12.18
Weitere Beiträge zu: Jekyll   Performance  

Weltweite Latenzzeiten einer Webseite

Die meisten glauben ja immer noch das die Geschwindigkeit und der Aufbau Ihrer Webseite egal sei da es ja überall schnelles Internet gibt. Welche Auswirkungen das habe kann habe ich hier mal aufgeschrieben.

Einer der wichtigsten Faktoren ist die Latenzzeit, also die Zeit die eine Information braucht um von A nach B zu kommen. Und die ist unabhängig von der Bandbreite.

Hier kann mal mal prüfen wie diese Zeiten für die eigene Webseite weltweit aussehen.

Z.B. für hagen-bauer.de

23.6.17
Weitere Beiträge zu: Performance   Webseiten  

Design for Performance

Für alle die mal in die Situation kommen einen Webauftritt neu aufsetzen zu müssen.

Eine sehr untechnische Einführung wie man den Aspekt der Schnelligkeit als wichtige Eigenschaft begreift und nicht als technische Begrenzung der Möglichkeiten.

10.12.16
Weitere Beiträge zu: Design   Performance   Web  

Dies ist ein privater Blog von Hagen Bauer- berufstätiger Vater, Ehemann, Naturliebhaber, Läufer, Zelter, technikverliebt.


Creative Commons License
This blog is licensed under a Creative Commons License