Abend 21: 02.11.2016 - Site Optimization

CAS-FEE HSR Raperswil

Frage zuerst
Antwort zuerst
Selbsttest

0.0 (0)

Lernen

Lernkarteien erstellen oder kopieren

Mit einem Upgrade kannst du unlimitiert Lernkarteien erstellen oder kopieren und viele Zusatzfunktionen mehr nutzen.

Kartei Details

Karten	12
Sprache	Deutsch
Kategorie	Informatik
Stufe	Universität
Erstellt / Aktualisiert	13.11.2016 / 02.01.2018
Weblink	https://card2brain.ch/box/abend_21_02_11_2016_site_optimization
Einbinden	<iframe src="https://card2brain.ch/box/abend_21_02_11_2016_site_optimization/embed" width="780" height="150" scrolling="no" frameborder="0"></iframe>

Lernkarteien erstellen oder kopieren

Mit einem Upgrade kannst du unlimitiert Lernkarteien erstellen oder kopieren und viele Zusatzfunktionen mehr nutzen.

Upgrade

Kartenliste

Frage zuerst
Antwort zuerst
Selbsttest

Lernen

Melde dich an, um alle Karten zu sehen.

SWITCHaai

Office 365

Edulog

Apple ID

Google

E-Mail oder Benutzername

Passwort

Passwort vergessen?

Registrieren

Nenne drei Möglichkeiten die Performance einer Seite zu verbessern

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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?

Ja, es spielt eine Rolle.

CSS Dateien sollten im Header eingebunden werden, da der Browser erst rendern kann, wenn er alle CSS Dateien geladen hat.

JS Dateien sollten am Ende vor dem Body-Tag eingebunden werden, weil der Browser auch ohne JS Files mit rendern beginnen kann. Werden die JS Files ebenfalls im Header geladen, verzögert sich das Rendern bis der Browser alle nötigen JS Files geladen hat.

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

Ja, es spielt eine Rolle.

CSS Dateien sollten im Header eingebunden werden, da der Browser erst rendern kann, wenn er alle CSS Dateien geladen hat.

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

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

„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?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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

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

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

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?

GIF

PNG

JPEG

SVG

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

GIF

PNG

JPEG

SVG

Responsive Image

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

pictureset

device-source

srcset

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

pictureset

device-source

srcset

Sprites

Eine Webseite benötigt viele kleine Icons z.B. Länderflaggen. Welches Vorgehen empfiehlt sich hier, damit die Performance der Seite optimiert werden kann?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

Sprites. Es wird ein grosses Bild mit sämtlichen Icons erstellt. Anschliessend wird via CSS das Bild entsprechend platziert, so dass das jeweilige Icon angezeigt wird.
Dadurch viele Requests eingespart, da nur ein Bild mit den Sprites geladen werden muss.

Was ist lazy loading?

Tastatur-Befehle:

= drehen,

= vor-/rückwärts,

= scrollen

Lazy Loading, wörtlich „faules Laden“ wird dazu verwendet um Content erst dann zu laden, wenn wirklich angezeigt werden muss. So werden z.B. Bilder erst geladen, wenn sie im sichtbaren Bereich des Browser-Fensters (viewport) sind.

Was sind die Vorteile eines CDN's?

Performance
Verfügbarkeit
Informationsgewinnung (Web Analyse Möglichkeit)

https://gtmetrix.com/why-use-a-cdn.html

Wie kann man die Performance einer Website messen?

Es gibt verschiedene Anbieter, die Lösungen dazu anbieten:

Google PageSpeed Insights
Webpagetest.org

1 / 12

Kartenliste

Frage zuerst
Antwort zuerst
Selbsttest

Lernen