Premium Partner

Abend 21: 02.11.2016 - Site Optimization

CAS-FEE HSR Raperswil

CAS-FEE HSR Raperswil


Set of flashcards Details

Flashcards 12
Language Deutsch
Category Computer Science
Level University
Created / Updated 13.11.2016 / 02.01.2018
Licencing Not defined
Weblink
https://card2brain.ch/box/abend_21_02_11_2016_site_optimization
Embed
<iframe src="https://card2brain.ch/box/abend_21_02_11_2016_site_optimization/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>

Nenne drei Möglichkeiten die Performance einer Seite zu verbessern

  • Bilder optimieren: richtiges Bildformat, nur so gross wie  nötig
  • Anzahl Downloads vermindern -> JS und CSS Dateien zu jeweils einer oder wenigen Dateien "konkatenieren"
  • Für Icons anstatt Bilder Icon-Fonts verwenden
  • CSS und JS Dateien minifizieren
  • CSS und JS Dateien "Gzippen"
  • JS Bibliotheken aus CDN's beziehen 

Spielt es eine Rolle wo/zu welchem Zeitpunkt man CSS und JS Dateien auf der Seite einbindet?

Was ist mit „Critical CSS“ im Zusammenhang mit Performance-Optimierung einer Website gemeint?

„Kritisches CSS“ sind Styles, die das Rendering der Seite blockieren - dies ist in der Regel der „above-the-fold content". Für diesen initial sichtbaren Teil einer Website werden die benötigten CSS-Styles direkt inline in die HTML-Seite eingebunden. Die weiteren auf der Seite benötigten Styles werden später asynchron nachgeladen. Damit kann der Browser früher mit dem Rendering der Seite beginnen und sie baut sich für den User sichtbar schneller auf.

 

Gegeben ein Bild mit grossen farbigen Flächen mit 4-8 Farben. Welches Format verwendest du?

- SVG wenn die Benutzergruppe aktuelle Browser verwendet
- PNG mit optimierter Palette

Welcher Image Type steht für Animationen zur Verfügung?

GIF

Nachtrag: SVG ermöglicht auch Animationen: https://css-tricks.com/animating-svg-css/ 

Worauf sollte bei der Webentwicklung bezüglich Performance / Ressourcen besonders geschaut werden?

Fotos sind teilweise sehr gross und verursachen daher besonders schnell eine Performanceeinbusse.

Daher möglichst wenig Fotos verwenden und falls Fotos verwendet werden dann nur das Format JPEG.

Welches Bildformat ist das beste um ein Foto einer Landschaft online anzuzeigen?

Responsive Image

Welches Attribut verwendest du bei Responsive Images im img-Tag?