Abend 21: 02.11.2016 - Site Optimization

CAS-FEE HSR Raperswil

Question first
Answer first
Self-test

0.0 (0)

Study

Create or copy sets of flashcards

With an upgrade you can create or copy an unlimited number of sets and use many more additional features.

Set of flashcards Details

Flashcards	12
Language	Deutsch
Category	Computer Science
Level	University
Created / Updated	13.11.2016 / 02.01.2018
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>

Create or copy sets of flashcards

With an upgrade you can create or copy an unlimited number of sets and use many more additional features.

Upgrade

Card list

Log in to see all the cards.

SWITCHaai

Office 365

Edulog

Apple ID

Google

E-mail or username

Password

Forgotten your password?

Nenne drei Möglichkeiten die Performance einer Seite zu verbessern

Keyboard commands:

= turn,

= for-/backward,

= scroll

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.

Keyboard commands:

= turn,

= for-/backward,

= scroll

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?

Keyboard commands:

= turn,

= for-/backward,

= scroll

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

Keyboard commands:

= turn,

= for-/backward,

= scroll

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

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

Keyboard commands:

= turn,

= for-/backward,

= scroll

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?

Keyboard commands:

= turn,

= for-/backward,

= scroll

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

Keyboard commands:

= turn,

= for-/backward,

= scroll

GIF

PNG

JPEG

SVG

Responsive Image

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

pictureset

device-source

srcset

Keyboard commands:

= turn,

= for-/backward,

= scroll

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?

Keyboard commands:

= turn,

= for-/backward,

= scroll

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?

Keyboard commands:

= turn,

= for-/backward,

= scroll

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

Card list

Study