Abend 21: 02.11.2016 - Site Optimization

CAS-FEE HSR Raperswil

D'abord la question
D'abord la réponse
Autotest

0.0 (0)

Etudier

Créer ou copier des fichiers d'apprentissage

Avec un upgrade tu peux créer ou copier des fichiers d'apprentissage sans limite et utiliser de nombreuses fonctions supplémentaires.

Upgrader

Fichier Détails

Cartes-fiches	12
Langue	Deutsch
Catégorie	Informatique
Niveau	Université
Crée / Actualisé	13.11.2016 / 02.01.2018
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>

Créer ou copier des fichiers d'apprentissage

Avec un upgrade tu peux créer ou copier des fichiers d'apprentissage sans limite et utiliser de nombreuses fonctions supplémentaires.

Upgrader

Liste des carte

D'abord la question
D'abord la réponse
Autotest

Étudier

Connecte-toi pour voir toutes les cartes.

SWITCHaai

Office 365

Edulog

Apple ID

Google

E-mail ou nom d'utilisateur

Mot de passe

Mot de passe oublié?

Inscription

Nenne drei Möglichkeiten die Performance einer Seite zu verbessern

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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.

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

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

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

GIF

PNG

JPEG

SVG

Responsive Image

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

pictureset

device-source

srcset

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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?

Commandes clavier:

= tourner,

= avant/arrière,

= faire défiler

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

Liste des carte

D'abord la question
D'abord la réponse
Autotest

Étudier