Dies ist der zweite Teil des Artikels. Lesen Sie den ersten Teil hier.
Ich weiß, ich höre mich an wie ein Spielverderber, aber wollen wir nicht alle eine performantere Website? Ein beliebtes Spielzeug sind Timer und genau deren Einsatz sollten wir tunlichst reduzieren (wenn nicht gar vermeiden). Timer wecken die CPU. JavaScript Timer erweisen sich als guter Einstiegspunkt für uns Entwickler, um mit dem Optimieren zu beginnen.
Wir alle lieben es doch, wenn es blinkt und glitzert! Aber auch an dieser Stelle ist weniger oft mehr. Kontinuierlich animierte Inhalte, wie animierte GIFs und automatisch abspielende Videos ziehen fortwährend (oft unnötigen) Strom. Das kleine Spinner-GIF löst im Browser fortwährend Malerei aus, auch wenn wir es nicht sehen können.
Wenn wir Animationen benötigen, sollten wir nach Möglichkeit deklarative Animationen (CSS-Animations und -Transitions) verwenden. Der Browser kann diese wegoptimieren, wenn das animierte Element nicht sichtbar ist, und sie sind effizienter als skriptgesteuerte Animationen. Allerdings sind CSS-Animationen auch limitierter als ihre großen JavaScript-Pendants.
Wenn möglich, sollten wir es vermeiden, Eigenschaften zu animieren, die Layout- oder Paint-Events auslösen. Das bedeutet allerdings die Animationen auf opacity oder transform zu beschränken [1] – beides kann der Browser in hohem Maße optimieren [2].
Wenn es um die Nachhaltigkeit einer Website geht darf man sich gerne einmal in Verzicht üben bzw. die opulente Animation ein wenig reduzierter deklarativ mit CSS konstruieren.
.box { /* Animation verbinden */ animation-name: boxSlider; /* Dauer setzen */ animation-duration: 1300ms; /* Wiederholungsrate */ animation-iteration-count: infinite; /* ...ein hin und her */ animation-direction: alternate; } @keyframes boxSlider { 0% { transform: translate(0, 0); opacity: 0.3; } 25% { opacity: 0.9; } 50% { transform: translate(100px, 100px); opacity: 0.2; } 100% { transform: translate(30px, 30px); opacity: 0.8; } }
Auch das allseits beliebte Polling sollten wir vermeiden, wenn es darum geht, regelmäßige Aktualisierungen von einem Server zu erhalten. Wir sind im Jahre 2020 und dürfen Technologien wie WebSockets, Server-Sent Events oder Fetch mit einer dauerhaften Verbindung verwenden [3]! Eine Website die kontinuierlich am Arbeiten ist, auch wenn sie gerade im Leerlauf sein sollte, reagiert auch weniger auf Benutzerinteraktionen. Eine Minimierung der Hintergrundaktivität verbessert die Reaktionsfähigkeit und gleichzeitig die Akkulaufzeit – Win-Win [4]!
