So optimieren Sie die mobile Leistung

Die besten Designs bringen Ästhetik und Leistung in Einklang, indem sie von Anfang an mit Blick auf Mobilgeräte arbeiten. Von der Festlegung strenger Leistungsbudgets bis hin zur Implementierung client- und serverseitiger Optimierungstechniken teile ich die aktuellen Optimierungsprozesse für die mobile Leistung, die wir bei Cyber-Duck verwenden.

Werden Sie mobil

Die Leistung ist ein wichtiger Bestandteil der Benutzererfahrung, daher darf sie am Ende des Entwicklungsprozesses nicht nachträglich berücksichtigt werden. Es ist vorzuziehen , Projekte über eine mobilorientierte Struktur zu verwalten , in der Designer und Entwickler von Anfang an zusammenarbeiten.

Kollaborative Überprüfung

Überprüfen Sie für jedes Projekt den Design- und Entwicklungsumfang mit dem internen Team und definieren Sie Ziele für Key Performance Indicators (KPI). Dies sind die Meilensteinmetriken, die den Projekterfolg basierend auf den Geschäftszielen anzeigen. Aufgrund ihrer Bedeutung sollten leistungsbezogene Ziele hier erscheinen.

Unterzeichnen Sie wichtige Projektmeilensteine ​​(wie die künstlerische Leitung und Wireframes) nicht mit den Stakeholdern, bis das gesamte interne Team das Ergebnis überprüft hat. Ansonsten haben wir festgestellt, dass Entwickler während der Implementierung Designanpassungen anfordern können (um die Seitengröße zu reduzieren). Bei bereits genehmigten Entwürfen können Änderungen in diesem Stadium zu Komplikationen führen und weitere Runden von Kundengenehmigungen eröffnen. Wenn Entwickler von Anfang an involviert sind, können sie die benötigte Größe und Programmierleistung von Schnittstellen abschätzen und vermeiden.

Leistungsbudgets

Der beste Weg, um in die mobile Denkweise einzusteigen, ist das Festlegen und Einhalten eines strengen Leistungsbudgets : das Festlegen eines Ziels für die Geschwindigkeit und Größe der endgültigen Website. Wenn das Team auf ein klares Hochleistungsziel hinarbeitet, muss es sich entscheiden, ob es teure Funktionen wie Karussells implementieren möchte.

Spezifische Geschäftsziele und Benutzeranforderungen bestimmen, ob wir zahlenbasierte Leistungsbudgets festlegen. Beispielsweise zielte die Überarbeitung unserer eigenen Website darauf ab, die Ladezeiten auf allen Geräten drastisch zu verbessern und die mobilen Conversions zu steigern. Wir legen strenge Grenzen von nicht mehr als 40 HTTP-Anfragen oder 500 KB Daten für Mobilgeräte fest. Google Analytics-Daten können Aufschluss darüber geben, welche Ziele während der Überarbeitung ausgewählt werden sollten, da historische Interaktionen das Verhalten Ihrer Zielgruppe anzeigen.

Im Allgemeinen definieren wir Ziele für die Seitengröße mit einem Limit von 500 KB für mobile Homepages. Serveranfragen sind schwieriger vorherzusagen, daher ist es weniger wahrscheinlich, dass wir genaue Zahlen angeben. Diese groben Richtlinien entsprechen unseren Anforderungen für Kundenprojekte. Aber Daniel Mall hat einen großartigen praktischen Leitfaden für das Hinzufügen von Details zu Budgets: von der Gewichtung von HTML und CSS bis hin zu JavaScript, Bildern und Webfonts.

Optimierungstechniken

Auf Mobilgeräten wird die Ladegeschwindigkeit von Websites von client- und serverseitigen Faktoren bestimmt. Der Einsatz gezielter Optimierungstechniken, die diese beiden Faktoren berücksichtigen, kann Ihnen dabei helfen, die für Ihr Projekt festgelegten Leistungsbudgets einzuhalten.

Clientseitige Optimierung

Mit einer vielfältigen mobilen Landschaft – über 5.000 einzelne Smartphones im Jahr 2014 – haben Entwickler deutlich weniger Kontrolle über die individuelle Geräteleistung als über serverseitige Faktoren. Daher ist die clientseitige Optimierung von entscheidender Bedeutung. Die folgenden Techniken zielen darauf ab, die Verarbeitungszeit und den Stromverbrauch mobiler Geräte zum Laden von Websites zu reduzieren.

Code optimieren

Viele Entwickler tappen in die Falle, in jQuery zu schreiben, um eine Website zu betreiben. Aber so etwas gibt es nicht. Tatsächlich schreiben Sie in JavaScript, während Sie eine Bibliothek mit hilfreichen Verknüpfungen und Funktionen verwenden. Obwohl dies die Entwicklung beschleunigt – nützlich, wenn Sie ein Produkt schnell auf den Markt bringen müssen – kann es zu Leistungseinbußen kommen. Die jQuery-Bibliothek fügt Gewicht hinzu, und die Flexibilität von Plugins (und Funktionen) bedeutet, dass sie oft aufgebläht werden können.

Hier ist ein Beispiel, bei dem JavaScript und jQuery für dieselbe Funktion verwendet werden. Das Schreiben in einfachem JavaScript vermeidet das Ziehen einer weiteren externen Bibliothek in Ihre Anwendung und spart eine weitere wertvolle HTTP-Anfrage.

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

Sie können CSS- und JS-Dateien weiter optimieren, indem Sie Systeme wie Grunt oder Gulp oder Front-End-Compiler-Apps wie Prepos, Codekit oder Hammer verwenden. Diese reduzieren HTTP-Anforderungen und die Dateigröße, indem sie eine Vielzahl von Aufgaben ausführen: Verketten von Dateien, Kompilieren von Sass, Less oder CoffeeScript, Uglify JS (komprimiert JavaScript) und Minimieren/Komprimieren von Dateien für die Verwendung in der Produktion.

Priorisieren Sie Above The Fold

Google Pagespeed Insights (und ähnliche Tools) empfiehlt, die Ladegröße und -geschwindigkeit von Inhalten „above the fold“ zu priorisieren. Trennen Sie zuerst das CSS, das zum Rendern des sichtbaren Teils der Seite (above the fold) verwendet wird; Verzögern Sie das Laden der restlichen Stile, nachdem die Seite gerendert wurde.

Dies kann durch Hinzufügen des obersten CSS direkt in den Seitenkopf erfolgen. Beachten Sie jedoch, dass dies nicht wie der Rest der CSS-Datei zwischengespeichert wird und daher auf Schlüsselinhalte beschränkt werden muss. Eine Vielzahl von Tools kann Ihnen dabei helfen, das zu trennende CSS zu bestimmen, darunter Scott Jehls Critical CSS und Paul Kinlams Bookmarklet-Tool.

Bilder optimieren

In Anbetracht der derzeitigen Vorliebe für reichhaltiges Design ist es bedauerlich, dass Bilder oft die Ursache für eine große Seitengröße sind. Aber bildbasiertes Design ist immer noch möglich, wenn jedes vor und nach dem Export in das richtige Format optimiert und komprimiert wird. Stellen Sie immer sicher, dass Sie den richtigen Bildtyp verwenden. Fotos mit kräftigen Farben funktionieren besser als JPEG-Dateien, wohingegen flache Farbgrafiken in PNG8 vorliegen sollten. Farbverläufe und komplexere Symbole funktionieren am besten als PNG24/32 mit Alpha-Transparenz oder SVGs.

Photoshop und Fireworks können Ihnen dabei helfen, die Optimierungsstufen für verschiedene Bildbereiche anzupassen. Das bedeutet, dass das Hauptmotiv in hoher Qualität bleiben kann, während der Rest optimiert wird, um die Leistung zu steigern. Tools zur verlustfreien Bildkomprimierung wie ImageOptim und TinyPNG können das Beste aus der Dateigröße herausholen, ohne die Bildqualität zu beeinträchtigen.

Sie können auch das neue HTML5-Element <picture> und die Attribute srcset und size für Bilder verwenden. Diese beiden Ergänzungen der Sprache helfen Ihnen, responsive Bilder direkt im HTML zu definieren, sodass der Browser nur das Bild herunterlädt, das der gegebenen Bedingung entspricht.

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

Diese Technik sollte jedoch mit Bedacht eingesetzt werden. Nur wenige Browser unterstützen dies: Einige moderne Browser (wie Safari), Android-Browser und IE10/11 (und älter) tun dies nicht. Polyfill-Alternativen können dazu führen, dass diese Methode in älteren Browsern funktioniert, aber dies sind externe JavaScript-Bibliotheken, die separat geladen werden müssen und sich möglicherweise nicht lohnen, da andere Techniken verfügbar sind. Es lohnt sich, Ihre Zielgruppe und die verwendeten Technologien zu berücksichtigen, um zu sehen, ob das zusätzliche Gewicht der Polyfill erforderlich ist.

Daten-URLs sind eine letzte Option. Anstatt auf eine externe Bilddatei zu verlinken, können Bilddaten in einen base64- (oder ASCII-) codierten String konvertiert und direkt in die CSS- oder HTML-Datei eingebettet werden. Ein einfaches Online-Konvertierungstool ist verfügbar. Daten-URLs sind hilfreich, da sie HTTP-Anfragen sparen und kleine Dateien schneller übertragen können. Aber wie unten gezeigt, ist die Größe des eingebetteten Codes größer als die Verknüpfung mit externen Bildern. Die zusätzliche Länge kann die Wartung von HTML- und CSS-Dokumenten erschweren, und Bildänderungen müssen jedes Mal neu codiert und eingebettet werden.

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

Automatisieren Sie die CMS-Medienoptimierung

Die Anwendung der Asset-Optimierungstechniken aus dem vorherigen Abschnitt bedeutete, dass wir ein klassisches, bildgesteuertes Design für BAM wählen konnten, das es ihnen ermöglichte, neue Bauprojektfotografie zu präsentieren.

Aber wir mussten BAM auch die Freiheit geben, Inhalte zu aktualisieren, ohne dass wir jedes Bild optimieren mussten. Natürlich wäre keine Lösung so effektiv wie die manuelle Optimierung, aber wir haben es geschafft, einen angemessenen Grad an automatisierter Optimierung zu erreichen. Wir haben ihr bestehendes Sitefinity CMS neu konfiguriert, um Flexibilität zu schaffen. Standardoptionen wurden verwendet, um die Größe der Bilder automatisch zu ändern (und zu optimieren), passend zum Kontext jeder Webseite:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

Sitefinity kann auch die Größe von Bildern aus der URL mithilfe von URL-Parametern ändern, und ein noch schnelleres Rendern kann durch Zwischenspeichern des in der Größe geänderten Bildes mit der folgenden Option erreicht werden:

 /images/image-opt.jpg?size=480 

Die meisten CMS-Systeme ermöglichen ein gewisses Maß an Medienoptimierung. Sie können beispielsweise Medieneinstellungen definieren, um sicherzustellen, dass zukünftige Benutzer nur Bilder hinzufügen, die zu den Website-Vorlagen passen. Hier ist ein kurzes Beispiel aus WordPress.

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

Optimieren Sie Schriftarten und Symbole

Schriftarten sind ein wichtiger Teil der Benutzererfahrung und des Brandings einer Website oder Anwendung, haben aber möglicherweise nicht die erste Priorität für den Benutzer. Aus diesem Grund können Webfonts ein weiterer zu optimierender Faktor sein.

Durch das Verzögern des Ladens von Schriftarten zeigt der Browser die Kopie in der Schriftart an, mit der er anfangs verfügbar ist. Das bedeutet, dass der Benutzer den Inhalt immer zuerst bekommt. Das Laden von Schriftarten kann verschoben werden, indem der Teil des CSS, der mit den Schriftartdateien verknüpft ist, abgetrennt und geladen wird, nachdem der Rest der Seite gerendert wurde. Beachten Sie jedoch, dass der Text beim Laden des Webfonts kurz blinken kann, um sich zu ändern.

Ebenso sind Symbole ein weiterer zu optimierender Bereich, da es sich um kleine Dateien handelt, die häufig geladen werden müssen. Sie könnten auch erwägen, Schriftdateien für Symbole zu verwenden. Verwenden Sie einen Dienst wie Fontello, um eine Vielzahl von Symbolen auszuwählen, und generieren Sie eine Schriftartdatei, die auf Ihre Auswahl beschränkt ist. Mit dieser Technik können hochwertige Vektorsymbole für alle Bildschirmauflösungen mit geringer Leistungseinbuße erstellt werden.

Alternativ sind Bild-Sprites eine bekannte Option. Sie kombinieren Bilder in einer Datei (die nur eine Anforderung zum Laden verwendet) und zeigen nur den für das Design erforderlichen Teil an, indem sie die Hintergrundposition verwenden. Paul Stamatiou beschreibt, wie dies gemacht wird, und skizziert einige Einschränkungen.

Ladetechnologien

Die folgenden Techniken vermeiden, dass der gesamte Inhalt einer Website an mobile Browser gesendet wird. Stattdessen werden nur die genau benötigten Daten heruntergeladen , indem für jeden Haltepunkt optimiert wird. Die mobile Ladegeschwindigkeit war ein wichtiger Aspekt für die Website von Velocity Drive, die Trailer-Technologien bereitstellt. JavaScript-Bibliotheken müssen an allen Haltepunkten geladen werden, um Browserfunktionen zu testen und Störungen zu vermeiden. Aber wir haben die Assets für jeden Haltepunkt sorgfältig optimiert: Die Ladegröße der Homepage beträgt nur 323 KB auf Mobilgeräten und steigt auf 828 KB auf großen Desktops.

Gehen Sie mit bedingten Lazy-Loading-Techniken weiter, um die wahrgenommene Seitengeschwindigkeit zu erhöhen. Sie laden sichtbare Abschnitte stufenweise, wobei die wichtigsten Inhalte „above the fold“ platziert werden. Teure Elemente (wie Bilder), die am Ende der Seiten zu finden sind, werden nicht geladen, es sei denn, der Benutzer entscheidet sich dafür, durch den Inhalt zu scrollen. Diese Technik war der Schlüssel für den Abschnitt „Einblicke“ auf der Website von Niu Solutions, der sich mit ihren IT-Innovationen befasste. Wir haben ein kleines jQuery-Plugin namens jScroll verwendet, um weitere Artikel zu laden, während der Benutzer nach unten scrollt. Hier ist ein Beispiel dafür, wie wir dieses Plugin einrichten würden, für das lediglich der Link zu weiteren Inhalten erforderlich ist:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

Weitere Möglichkeiten bieten Preloading-Technologien. Sie können den nächsten Schritt des Benutzers antizipieren und sich darauf vorbereiten, indem sie die Seite laden, die sie wahrscheinlich als nächstes anzeigen, bevor sie dies tun, um eine schnellere Erfahrung zu ermöglichen. Das Erkennen der typischen Verkehrsstruktur ist jedoch einfacher, wenn eine bestehende Website überarbeitet wird, da Sie die Verhaltensflusstrichter in Google Analytics untersuchen können.

Verbessern Sie von einer Kernerfahrung

Die Responsive News der BBC beziehen sich auf die Idee, dem Benutzer die gewünschte Kernerfahrung zu geben, dann die Umgebung des Benutzers zu bewerten und die Erfahrung entsprechend zu verbessern . Ein einfaches Beispiel hierfür ist das anfängliche Laden von Bildern mit niedriger Auflösung und das anschließende Anzeigen von Bildern mit hoher Auflösung, abhängig von der Bandbreite des Benutzers.

Diese Idee ist Teil der progressiven Erweiterung, bei der Webtechnologien geschichtet werden, um das beste Erlebnis in allen Umgebungen zu bieten. Eine progressive Verbesserung kann auf einer Reihe verschiedener Faktoren beruhen. Dazu gehören die Technologie, auf die ein Benutzer Zugriff hat, wie Browser, Betriebssystem und Umgebung (z. B. Internetgeschwindigkeit). Definieren Sie hier einen grundlegenden Satz von Funktionen, die auf den am wenigsten leistungsfähigen Browsern funktionieren müssen, und fügen Sie erst weitere Komplexität hinzu, nachdem Sie getestet haben, ob Browser damit umgehen können.

Das Erkennen, ob der Browser HTML5- und CSS-Funktionen unterstützen kann, hilft uns, bedingten Code zu schreiben, um alle Eventualitäten abzudecken: Funktionen zu verbessern und hinzuzufügen, wenn sie unterstützt werden, und gleichzeitig sicher und einfach für Geräte und Browser zu bleiben, die dies nicht tun.

Funktionstests reduzieren

Das Einbinden von Bibliotheken zum Testen von Funktionen wie Modernizr oder has.js ist eine gängige, empfohlene Vorgehensweise. Aber zu viele Entwickler implementieren die gesamte Bibliothek; Sie testen alle Fähigkeiten, obwohl nur eine kleine Anzahl von Ergebnissen benötigt wird, um zu bestimmen, ob Funktionen hinzugefügt werden sollen.

Tim Kadlec berichtet über die Parsing- und Ausführungszeit derselben Bibliothek (minimiertes jQuery 2.1.1) für eine Reihe von Geräten. Dies zeigt, dass die Implementierung dieser Bibliotheken im Vergleich zum Desktop häufig höhere Kosten für die mobile Leistung (sogar zwischen alten und neuen Geräten) verursacht. Wir neigen dazu, die Bibliothek anzupassen und nur relevante Website-Funktionen zu testen . Dies spart Zeit und wertvolle mobile Rechenleistung.

Serverseitige Optimierung

Die Reaktionszeit des Servers ist ein Schlüsselfaktor für die Geschwindigkeit einer Website: Viele streben weniger als 200 ms an. Aber die Netzwerklatenz (die Verzögerung, wenn Daten zwischen dem Server und dem Gerät übertragen werden) ist der eigentliche Engpass für die mobile Leistung, wodurch mobile Benutzer langsamer werden.

Dies wird durch die Netzwerkgeschwindigkeit beeinflusst. Laut Ofcom betrugen die durchschnittlichen Download-Geschwindigkeiten in beliebten 3G- und 4G-Netzen in Großbritannien 6,1 Mbit/s und 15,1 Mbit/s. Einige interpretieren dies als klare Begrenzung der maximalen Website-Größe. Die Realität ist jedoch komplexer, da die Geschwindigkeit je nach Abdeckung und Umgebungskontext variiert. Benutzer stellen häufig eine Verbindung zu langsamem Edge (E) und GPRS her, wenn sie sich außerhalb der Reichweite befinden.

Es gibt eine Vielzahl von Techniken, um die Leistung serverseitiger Websites zu verbessern.

Caching, Prerendering und statische Inhalte

Dynamische Webseiten erfordern mehrere Datenbankabfragen, was wertvolle Zeit in Anspruch nimmt, um die Ausgabe zu verarbeiten und Daten zu formatieren und dann in browserlesbares HTML zu rendern. Es wird empfohlen, zuvor für dieses Gerät gerenderte Inhalte zwischenzuspeichern. Für wiederkehrende Besucher wird der Cache überprüft und nur Aktualisierungen gesendet, anstatt von Grund auf neu zu verarbeiten.

Viele wählen auch JavaScript-Vorlagenbibliotheken wie Handlebars und Moustache, um Webinhalte zu verarbeiten. Das Parsen und Ausführen von JavaScript ist jedoch leistungs- und zeitaufwändig. Mobilgeräte können diese Vorlagenbibliotheken nicht so schnell verarbeiten wie Desktop-Computer und belasten ihre Verarbeitungsressourcen. Das vollständige Rendern von Seiten auf dem Server ist viel schneller. Twitter hat sich bereits 2012 für diesen Ansatz entschieden und den Wert in seinem Blog erklärt.

Kürzlich hat unser leitender Frontend-Entwickler die Grenzen dieser Technik für sein persönliches Portfolio erweitert. Es wurde mit dem dateibasierten Statamic CMS erstellt, das gerade html_cache-Unterstützung hinzugefügt hat. Nach der Implementierung reduzierte diese Funktion die durchschnittliche Ladezeit aller Seiten von etwa 1,8 Sekunden auf 225 Millisekunden.

Browser-Caching

Die granulare Optimierung kann das Laden von Websites optimieren, indem die regelmäßige Übertragung von Dateien verhindert wird, von denen Sie wissen, dass sie nicht oft aktualisiert werden. Verwenden Sie einen Server-Handler (wie eine .htaccess -Datei), um den Browser anzuweisen , welche Art von Inhalt gespeichert werden soll und wie lange Kopien aufbewahrt werden sollen. So können Sie Browser-Caching auf dem Apache-Server implementieren:

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

Content-Delivery-Netzwerke (CDNs)

Sie können das Laden von Assets verbessern, indem Sie neben Ihrem üblichen Hosting-Service ein CDN wie CloudFlare verwenden. Hier werden statische Inhalte (wie Bilder, Schriftarten und CSS) auf einem Netzwerk globaler Server gespeichert. Jedes Mal, wenn ein Benutzer diesen Inhalt anfordert, erkennt das CDN seinen Standort und stellt Assets vom nächstgelegenen Server bereit, wodurch die Latenz reduziert wird. Es erhöht die Geschwindigkeit, indem es dem Hauptserver ermöglicht, sich auf die Bereitstellung der Anwendung zu konzentrieren, anstatt statische Dateien bereitzustellen.

Verwenden Sie ein dediziertes CDN, um die Ladegeschwindigkeit von Websites mit vielen Assets zu verbessern , obwohl dies Kosten verursacht. Abgesehen von der Ersteinrichtung erfordert CloudFlare keine manuelle Konfiguration; Der Cache wird für Sie erstellt und aktualisiert, basierend auf dem historischen Datenverkehr und den am besten zu bedienenden Assets. Implementieren Sie dies jedoch mit Blick auf zukünftiges unabhängiges Content-Management: Stellen Sie sicher, dass alle von einem CMS hochgeladenen Assets auch transparent über das CDN bereitgestellt werden.

Ein CDN war die beste Wahl für unsere Eurofighter Typhoon-Website, da beeindruckende hochauflösende Fotografien von Verteidigungsflugzeugen ein entscheidendes Merkmal waren, um ihre Fähigkeiten zu demonstrieren. Berichten zufolge hat CloudFlare in den letzten 30 Tagen 76 % der Anfragen und 48 % der Bandbreite eingespart und damit die Geschwindigkeit der bildlastigen Website erhöht.

Testen

Es gibt keinen Ersatz für Tests während der gesamten Produktion. Versuchen Sie, verschiedene Tools zum Testen laufender Arbeiten zu verwenden, indem Sie die mobile Erfahrung simulieren und potenzielle Leistungsprobleme diagnostizieren.

Behalten Sie während der Produktion immer die Zahlen im Auge: von der Sicherstellung, dass Design-Assets ordnungsgemäß generiert und exportiert werden, bis hin zur Überprüfung der Größe der Auslagerungsdatei und der Anzahl der HTTP-Anforderungen über die Entwicklertools in Ihrem Browser. Hier erhalten Sie auf der Registerkarte Netzwerk einen vollständigen Überblick über die geladenen Ressourcen, die Gesamtdateigröße und die Renderzeit:

Beachten Sie die blauen und roten vertikalen Linien rechts neben der Zeitachse im Chrome Inspector oben. Diese repräsentieren DOM Ready- bzw. Page Load-Ereignisse. Am unteren Rand des Fensters werden die Anzahl der HTTP-Anforderungen und die Gesamtdateigröße angezeigt, die am aktuellen Haltepunkt geladen wurden.

Weitere Tools sind:

• WebPagetest bietet eine Vielzahl von Optionen zum Testen von Live-URLs: von der Auswahl eines beliebigen Standorts auf der ganzen Welt bis hin zur Gestaltung spezifischer 3G- und 4G-Verbindungsgeschwindigkeiten und Latenzzeiten. Über die Filmstreifenansicht und das Video können Sie sogar erleben, wie die Website für diese Benutzer geladen wird.
• Googles Pagespeed Insights ist ein visuelleres, einführendes Tool zur Analyse der Seitengeschwindigkeit. Es teilt die Ergebnisse in Desktop oder Mobile auf und schlägt Techniken vor, um gezielte Bereiche Ihrer Website zu verbessern: Ressourcen zum Cachen oder Bilder zum Optimieren angeben.

Testen Sie auf echten Geräten

Aber verlassen Sie sich nicht nur auf Simulatoren. Wir testen Projekte auch während der gesamten Produktion auf einer Vielzahl echter mobiler Geräte.

Erstellen Sie Ihr eigenes Gerätelabor oder verwenden Sie OpenDeviceLabs. Machen Sie sich im Idealfall ein Bild von der realen Benutzererfahrung, indem Sie das leistungsstarke WLAN im Büro meiden. Erstellen Sie eine Testsite auf einem Webserver (idealerweise derselbe wie der Live-Server), auf den Sie von außerhalb des Büronetzwerks zugreifen können. Testen Sie dann unterwegs in typischen Umgebungen wie einem überfüllten Café oder Hotel über eine Netzwerkverbindung.

Zusammenfassung der mobilen Leistung

Zielen Sie vor allem darauf ab, eine Website zu erstellen, die Ästhetik und Leistung auf Mobilgeräten in Einklang bringt und echte Konversionsmetriken erzielt. Ein kollaborativer, iterativer Leistungsoptimierungsprozess hilft Ihnen dabei, dies zu erreichen.

Ermutigen Sie das interne Team von Beginn des Projekts an, in einer mobilen Denkweise zusammenzuarbeiten, indem Sie ein strenges Leistungsbudget festlegen . Bauen Sie ein Verständnis der client- und serverseitigen Faktoren auf, die die Websiteleistung auf Mobilgeräten bestimmen. Dann können Sie das gesetzte Ziel erreichen, indem Sie eine Mischung aus den von mir beschriebenen gezielten Optimierungstechniken implementieren. Natürlich gibt es in einigen Fällen immer noch einen Kompromiss zwischen einem auffälligen Design, hoher Leistung und Sicherheit. Ein kollaboratives Design- und Entwicklungsteam kann entscheiden, was für das Unternehmen am besten ist, indem es sich mit den relevanten Projektmanagern und Stakeholdern abspricht.

Unser Optimierungsprojekt für ein globales Technologieberatungsunternehmen zeigt, wie diese Techniken kombiniert werden können, um die Ladegeschwindigkeit und -größe erheblich zu verbessern. Das Projekt umfasste unter anderem das Zwischenspeichern von Vorlagen und Seiten, das Optimieren von Assets und Schriftarten und das Reduzieren von Funktionstests. Bisher haben Tests gezeigt, dass die Render- und Gesamtladezeit von fast 4 Sekunden vor Beginn der Arbeit auf weniger als 1,4 Sekunden verkürzt wurde. Ebenso wurde die Dateigröße von über 3 MB auf 1 MB reduziert.

Weiterführende Literatur zu SmashingMag:

• Frontend-Performance-Checkliste 2017
• Vorbereitung auf HTTP/2
• Alles, was Sie über AMP wissen müssen
• Die (nicht so) geheimen Kräfte des mobilen Browsers