Abend 21: 02.11.2016 - Site Optimization
CAS-FEE HSR Raperswil
CAS-FEE HSR Raperswil
Fichier Détails
| Cartes-fiches | 12 |
|---|---|
| Langue | Deutsch |
| Catégorie | Informatique |
| Niveau | Université |
| Crée / Actualisé | 13.11.2016 / 02.01.2018 |
| Attribution de licence | Non précisé |
| Lien de web |
https://card2brain.ch/box/abend_21_02_11_2016_site_optimization
|
| Intégrer |
<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?
