Wir optimieren das Web mit Vitaly Friedman: Download-Geschwindigkeit, Speicher, CPU

    Dies ist der zweite Beitrag über alle möglichen Tricks in der Front-End-Entwicklung. Es befasst sich mit dem Problem der Optimierung der Site und ihrer Downloadgeschwindigkeit auf Geräten mit unzureichendem RAM und langsamer CPU.

    Eine separate Konversation über die Tools, die die Arbeit der Site und der damit verbundenen Anwendungen von Drittanbietern beschleunigen und überwachen. Außerdem eine Geschichte über die Funktionen des Layouts von E-Mail-Mailings, die Sie sehr überraschen wird.



    Das Material basiert auf dem Protokoll von Vitalys Bericht der Konferenz HolyJS 2018 Piter .

    Der erste Teil ist hier: Optimierung des Webs mit Vitaly Friedman - Komprimierung, Bilder, Schriftarten, HTTP / 2-Funktionen und Ressourcenhinweise .
    Der zweite Teil:



    Senf und langsame Geräte


    In diesem Teil geht es um Leistung. Wie kann man es erhöhen? Für eine Weile haben wir die Senf-Technik verwendet. Es geht darum, mit Hilfe eines Snippets herauszufinden, ob es sich um einen alten oder neuen Browser handelt. Abhängig davon wurde festgelegt, welches Skript und welche Stile geladen werden sollen, um sie nicht mit unnötiger Funktionalität zu laden.


    Beispielausschnitt für die Browserdefinition


    Dann wurde es möglich, die Sequenz aus querySelector, localStorage und addEventListener durch die API für den Sichtbarkeitsstatus zu ersetzen. Dies wurde im Wesentlichen in kleinen Projekten durchgeführt. Bei dieser Technik gab es jedoch ein Problem - dasselbe gilt für alle anderen Techniker, einschließlich derer, die Sie verwenden.

    Das Problem ist, dass wir, wenn wir einem neuen Browser schöne Stile geben wollen, nicht wissen, wie gut er sie zeichnen wird, da dies von dem Gerät abhängt, auf dem er ausgeführt wird. Tatsache ist, dass es Geräte aus dem Low-End-Segment gibt (zum Beispiel Motorola Moto G4), die über wenig RAM und einen schwachen Prozessor verfügen. Trotzdem haben sie einen neuen Browser installiert, der alle (oder fast alle) Technologien unterstützt, die wir haben.

    Daher ist es heute nicht mehr möglich, diese Technik zu verwenden.

    Im Anschluss an Google mit einer Moto G4 in der Tasche


    Warum sollte das responsive Layout nicht nur auf Geräten angezeigt werden, die es in Bezug auf die Hardwareressourcen "ziehen"? Hierfür können wir die Device Memory API verwenden. Wenn diese API nicht verfügbar ist, können Sie zum "Senf schneiden" zurückkehren.

    Und hier ist der Moto G4 selbst:


    In der folgenden Abbildung können Sie sehen, wo sich die Moto G4 in der Rangfolge der Telefone nach dem Zeitkriterium befindet, für das Javascript analysiert wird. Dies ist mittelmäßig - und es gibt viele solche Telefone. Im Vergleich zum Anführer der Bewertung benötigt dieses Telefon 16-mal mehr Zeit zum Analysieren.



    Wenn Sie sich die Daten auf den Websites von Mobiltelefonen ansehen, wird deutlich, dass die meiste Zeit für die Analyse von JS aufgewendet wird.


    Gelb zeigt die Seitenanalysezeit an.

    In der Tat ist dies ein sehr großes Problem. Um 1 Megabyte Skripte zu analysieren, dauert die Moto G4 35 Sekunden. In Anbetracht dessen, dass die Mehrheit der Websites nur 40% des gesamten Skripts der Website verwendet, können Sie versuchen, einen Ausweg aus dieser Situation zu finden, um die Analysezeit zu reduzieren. Google Mail hat beispielsweise den gesamten Code kommentiert und als Textvariable gesendet. Wenn dieser Code erforderlich war, wurde diese Variable eval ausgewertet.

    Google-Empfehlungen geben an, dass es ein sogenanntes Time to Interactive Budget gibt. In diesem Zeitraum warten die meisten Benutzer auf die Möglichkeit, mit der Website zu interagieren. Dies dauert nur 5 Sekunden. In Anbetracht dessen, dass 1,6 Sekunden für Netzwerkinteraktionen aufgewendet werden, haben wir nur noch 3,4 Sekunden - das heißt, wenn wir eine durchschnittliche Verbindungsgeschwindigkeit von 400 kbit / s verwenden, können wir in dieser Zeit maximal 170 KB Daten senden. Dies ist ein bisschen, um etwas zu senden, das sofort verwendet werden kann. Da dies Frameworks, Dienstprogramme, Critical Path, JS, CSS, HTML umfasst, ist ein solches Datenvolumen sehr, sehr klein.



    Wie passen Sie die Kernanwendung in 170 KB an? Google empfiehlt eine Vielzahl verschiedener Metriken, die Sie verwenden können. Sie unterteilen den Download in Stufen nach Zeit: Zeit bis zum ersten Byte (die Navigation beginnt) - bevor das erste Byte gesendet wird, malen Sie zuerst - bevor Sie das erste Bild laden, bevor die Website erscheint , erste sinnvolle Farbe - wenn fast alles für den Inhalt bereit ist, visuell bereit - vor dem Laden der gesamten Seite, Zeit bis zur Interaktion - bevor mit der Seite interaktiv kommuniziert werden kann - wenn die Seite vollständig bereit ist.



    Im Allgemeinen wird diese Metrik für jeden Standort speziell sein, sodass wir für unser Projekt auch eigene Messwerte erstellen müssen. Wie sieht also die optimale Leistung (Basislinie) heute aus?



    Das Bild zeigt, welche Aspekte und Ziele bei der Entwicklung eigener Metriken berücksichtigt werden müssen.

    Wie kann man die Downloadgeschwindigkeit erhöhen?


    Was ist nützlich im Kampf um die Bootzeit? Beispiel: Code-Coverage-Tool - zum Anzeigen der Coverage-Codeseite. Und es zeigt, wie viel Prozent des Codes nicht verwendet werden.  


    Sie können auch die JavaScript-Bundle-Überwachung verwenden. Wenn Sie dritte Bibliotheken verwenden, können Sie sie beispielsweise mithilfe von webpack-libs-optimizations aus der Laufzeitumgebung entfernen. Und natürlich müssen Sie GIF aufgeben. Wenn Sie das Video aufgeben können, da das Parsen des Video-Containers selbst auch sehr lange dauert. Wenn das Video nicht abgebrochen werden kann, verwenden Sie den img srcContainer < > zur Platzierung .

    Selbst wenn Sie auf der Seite responsive Bilder haben, können Sie den Responsive Image Breakpoints Generator verwenden. Es hilft, ein Bild aus dem hochgeladenen Bild oder einer Gruppe von Bildern für das responsive Layout zu generieren. Sie können angeben, wie viele Kilobyte Sie ein Bild mit Hilfe von Generatormotoren benötigen. Darüber hinaus generiert das Tool die Markierung selbst auf der Site.



    Wenn sich in Ihrem Bild ein wichtiger Teil befindet, z. B. ein Gesicht oder ein Objekt, wird das Zuschneiden so vorgenommen, wie Sie es benötigen, was sehr praktisch ist.

    Angenommen, Sie haben viele Bilder. Dann können Sie auf LazySizes zurückgreifen. Dies ist eine Bibliothek, die alles wie das vorherige Tool ausführt, jedoch nur mit JavaScript.



    Sie können sehen, wo die Zeit vergeht, zu der die Analyse erfolgt.
    Ein interessantes Werkzeug sind Prioritätshinweise - darin können Sie den Browser fragen, was für einen Download früher wichtig ist und was später.

    Aber was macht man mit kritischem CSS? Wenn Sie über einen guten Server und CDN verfügen, ist es nicht erforderlich, dass Browser versuchen, eine andere Verbindung zu öffnen, wenn es sich um HTTP / 1 handelt. Und wenn es sich um HTTP / 2 handelt, versuchen sie zu "erraten", welches CSS benötigt wird und welches nicht. Daher lohnt es sich zu testen, wie die Version mit kritischem CSS funktioniert und wie - wenn kritisches CSS als separate Datei als root gespeichert wird.  

    Guess.js


    Ja, wir haben ein Webpack, Bundling, Chunks. Was aber, wenn es ein Werkzeug gibt, das mithilfe von Vorhersagen und Algorithmen für maschinelles Lernen hilft, vorherzusagen, welche Abschnitte bei der nächsten Iteration der Benutzerinteraktion benötigt werden? Guess.js mit Hilfe von Predictive Analysis, basierend auf Google-Analytics-Daten, kann verstehen, welche nächste Aktion vom Benutzer ausgeführt wird, und kann genau den Code herunterladen, der für diese Interaktion erforderlich ist.

    Für das Webpack gibt es ein Guess-Plugin, das Sie ausprobieren können.



    All dies geschieht auf globaler Ebene: Es gibt immer mehr Dienste, die auf maschinellem Lernen und künstlicher Intelligenz basieren. Dies kann das Leben nicht nur der Benutzer, sondern auch der Entwickler verbessern. Ein solches Tool ist zum Beispiel in Airbnb: air / shots, einer Suchmaschine, die Designer und Entwickler dieser Firma verwenden können. Darin können Sie Komponenten anhand von Tags suchen, ihre Verbindungen anzeigen und die für das Projekt erforderlichen auswählen.

    Für Designer ein sehr eindrucksvolles Feature: Der Designer zeichnet eine Skizze auf Papier, bringt sie zur Kamera, und die erforderliche Schnittstelle wird automatisch aus vorgefertigten Komponenten dafür entworfen. Die Arbeit ist fast vollständig automatisiert.



    Noch ein Tipp: Wählen Sie den Entwicklungsrahmen sorgfältig aus. Angenommen, wir müssen die folgenden Dinge berücksichtigen: Netzwerkübertragung, Analyse / Kompilierung, Laufzeitkosten. Natürlich gibt es hierfür Tools, zum Beispiel können Sie testen, wie Ihre Anwendung in verschiedenen Datennetzen funktioniert: 2G, 3G, Wi-Fi.

    Das Problem ist, dass HTTP / 2 natürlich ein guter neuer Standard ist, aber es ist immer schneller als HTTP / 1 und zweitens ist es bei langsamen Verbindungen viel langsamer, insbesondere wenn es sich um ein mobiles Gerät handelt. Ein weiteres Problem ist der Server-Push: Wenn es einen Server-Push gibt, ist dies ein idealer Ersatz für kritisches CSS. In diesem Fall würde der Benutzer, der sich nach index.html erkundigt, dies im Anhang von critical.css erhalten. Sobald wir jedoch eine Seite vom Server anfordern, weiß der Server nicht immer, ob er sich bereits im Cache befindet.

    Deshalb wird ein Mechanismus namens Cache-Digest entwickelt: Wenn wir die Seite zum ersten Mal aufrufen, wird ein Server-Push ausgeführt, wenn kein Push ausgeführt wird - keine Wiederholung. Wenn dies nicht der erste Eintrag auf der Seite ist, wird der Server trotzdem pushen. Dies ist ein Problem, das Google mit QUIC behoben hat. Hierbei handelt es sich um ein Add-On über HTTP, das den Mechanismus nachdenklicher macht und anstelle des TCP-Protokolls TCP verwendet.



    QUIC hat viele interessante Dinge: bei schnellen Verbindungen schneller, bei 4G. Gleichzeitig ist es langsamer bei langsameren Verbindungen. Da es UDP verwendet, erfordert es im Falle von JavaScript außerdem viel CPU-Ressourcen. Dies zeigt das folgende Bild:



    Servicemitarbeiter


    Vielleicht können sie uns helfen? Nach den Statistiken zu urteilen, steigern sie die Leistung beim Caching spürbar. Die erste besteht darin, die Schriftarten zu optimieren, die zweite besteht darin, Service-Mitarbeiter einzustellen.



    Wie erstelle ich einen Servicemitarbeiter? Sie können den PWA Builder verwenden. Er generiert sogar ein Symbol und ein Manifest, damit Ihre Anwendung progressiver wird.



    Es gibt eine wunderbare Site PWA Stats, auf der verschiedene Geschichten und Fälle zur Arbeit mit PWA gesammelt werden.

    Skripte von Drittanbietern - ein Schritt zum Bösen?


    Ist es eine gute Idee, die Leistung zu verbessern, wenn Sie Skripts von Drittanbietern auf der Website installieren, die Skripts von der Seite geladen haben und das Gerät des Benutzers überlastet haben?


    Wir wissen nicht einmal, welche Daten diese Skripte sammeln. Sie können dynamische Ressourcen laden, die zwischen den Seitenladungen variieren können. Daher sind uns weder die Hosts noch die von Fremdanwendungen verwendeten Ressourcen unbekannt. Wenn wir sie in das Skript-Tag hochladen, erhalten sie Zugriff auf alle Informationen auf der Website.

    Um diese Informationen herauszufinden, gibt es das Request-Map-Tool.



    Es zeigt an, wo sich die Anforderungen befinden. Sie können die Ressourcen sehen, die diesen Anforderungen zugewiesen sind. Sie werden besonders überrascht sein, wenn sich herausstellt, dass ein Skript eines Drittanbieters die CPU des Geräts verwendet, um die Bitcoins für jemanden zu ermitteln. Überraschung!

    Chrome versucht, mit seinem eigenen Blocker schlechte Werbung zu blockieren. Basierend auf Koalitionsbestimmungen für bessere Werbung.

    Es gibt auch ein Phänomen wie die DSGVO - eine Vereinbarung über die Verarbeitung personenbezogener Daten. Sie besagt, dass sich Europäer unter Ihren Zuhörern der Vereinbarung über die Verarbeitung ihrer personenbezogenen Daten anschließen müssen, diese bei Bedarf löschen und die von Ihnen gespeicherten Cookies beschreiben müssen. Wenn ein Skript eines Drittanbieters gegen diese Vereinbarung verstößt und Probleme auftreten, werden Sie reagieren und haften.

    Wie können Sie also verstehen, was Skripte von Drittanbietern tun, wenn Sie sie nicht betrachten? Mit Tools zu deren Steuerung, z. B. mit requestmap.webperf.tools, können wir die Site und Skripts von Drittanbietern überprüfen. Sie können die Statistiken später nach ID anzeigen: requestmap.webperf.tools/render/[ID]

    Auf der folgenden Seite befindet sich ein Link zum Herunterladen einer CSV-Datei mit einem Bericht:



    Dann können Sie die Daten über das Terminal analysieren: Sie



    erhalten den Code, der in den Blockwebseitentest eingefügt werden muss, und misst dann den Leistungsunterschied zwischen der Anwendung mit Skripts von Drittanbietern und ohne diese. Der Unterschied wird offensichtlich sein. Dies bedeutet nicht, dass sie gelöscht werden müssen. Wir müssen nur verstehen, wie man sie optimiert.

    Wie üblich gibt es auch hierfür Werkzeuge. Sie können diese CSV-Datei in Excel einfügen und erhalten einen ziemlich detaillierten Überblick darüber, welche Drittanbieteranwendungen Sie haben, wie viel sie wiegen und wie viel sie geladen werden. Umso interessanter wird es sein, den Blackhole-Server und seine IP-Adresse auszuprobieren:



    Um herauszufinden, wie sich Ihre Anwendung für alle Drittanbieteranwendungen verhält, fügen Sie diese IP-Adresse in die hosts-Datei ein und sehen Sie, was mit Ihrer Anwendung passiert.



    Noch ein Tipp: Fügen Sie niemals Skripte von Drittanbietern über das Skript-Tag hinzu. Es ist besser, dies über einen iframe durchzuführen, da sie dann keinen Zugriff auf das DOM auf Ihrer Seite haben. Übrigens hat der iframe eine Sandbox-Eigenschaft, in der Sie angeben können, was das Skript auf der Seite genau kann und was nicht. Es wurde sogar die Safe-Frame-Spezifikation erstellt, in der das externe Skript von den Anwendungsdaten isoliert und deren Aktivitäten überwacht wird. Wenn Sie sich für dieses Thema interessieren, finden Sie Informationen dazu unter github, project safeframe.



    Verwenden Sie den Service Worker, um ein Skript eines Drittanbieters zu blockieren oder zu löschen, wenn es hängen bleibt.

    Mit Hilfe von Intersection Observer können Sie sehen, ob die Anzeige neben Viewport angezeigt wird. Auf diese Weise können Sie Anzeigenblöcke herunterladen, wenn der Benutzer eine Seite in der Nähe des Anzeigenblocks anzeigt. Der Abstand zum Anzeigenblock kann auch in Pixel angegeben werden.

    Diese Sie können Artikel lesen Denis Mishunova «You Now Mee Siehe: Wie das aufzuschieben, Lazy-Load und handeln Überschneidung der Observer», von Harry Roberts «Es ist die My (Dritte) Party, und ich of'll die weinen , wenn ich von Wollen die zu» , Yoav Weiss "Kontrolle über fremde Inhalte zurücknehmen".

    Responsive E-Mail


    Das Layout von E-Mail-Mails verfügt über eigene Funktionen und Regeln. Img-Tags auf Clients, ohne Bilder in Buchstaben anzuzeigen, müssen geändert werden, sodass die Attribute alt und andere schwarze Magie verwendet werden.



    Für das normale Layout von Buchstaben werden Table-Header-Group, Table-Footer-Group und andere Tabellenattribute verwendet. Was aber, wenn Sie etwas Neues wünschen, wie z. B. Medienabfragen: Sie werden in einigen Browsern unterstützt, aber bei mobilen Versionen von E-Mail-Clients ist das noch schlimmer. Was ist zu benutzen:


    Hier ist ein Beispiel für eine solche Magie:


    Was ist der Gesamtwert der Boxklasse? Abhängig von der Situation laut der Spezifikation lauten wir wie folgt: Wenn der Breitenwert größer als die maximale Breite ist, hat die maximale Breite Priorität.

    Wenn min-width jedoch größer als width oder max-width ist, wird min-width angewendet.

    Dies kann verwendet werden, wenn Medienabfragen nicht unterstützt werden. Hier ein Beispiel: Wie mache ich zwei von vier Spalten auf einem Handy? Antwort:



    Grob gesagt, der Breitenwert bestimmt, ob max oder min-width gewinnen wird. Dies ist ein wunderschöner Hack!

    Wie erstelle ich einen interaktiven Brief? Fügen Sie dort beispielsweise Live-Twitter-Feed hinzu. Ja das ist möglich! Es gibt ein Bild mit allen Tweets, die alle 2 Sekunden auf dem Server generiert werden. Wir animieren es einfach und das war's. Soviel zur Lösung.

    Wie erstelle ich eine interaktive E-Mail, in der Sie die gesamte Bestellung und Produktauswahl durchführen können? Schauen Sie sich das Bild an und Sie werden alles verstehen:



    Die Logik, die an das Etikett gebunden ist, überprüft und eingegeben. Eine ziemlich lange Kette wird sich herausstellen, aber es ist trotzdem möglich. Hier ist ein Beispiel mit der Statistik der verwendeten Elemente. Bitte beachten Sie, dass der Preis auch durch den Zähler und die Inkremente berücksichtigt wird:



    Es scheint, Fiktion, es stellt sich heraus, durch E-Mail können Sie eine Person zum Kauf führen. Aber nicht alles ist so einfach, E-Mail hat Einschränkungen bei der Anzahl der Zeichen (12000), Unterstützung für: markiert und die Größe des Buchstabens ist auf 102 KB beschränkt.

    Trotzdem sind dies die wichtigsten Trends im heutigen Marketing. Dies ist in den Grafiken zu sehen:



    Daher hat Google AMP erstellt. Es ist erforderlich, automatisch die erforderliche Markierung im Brief zu generieren, die Ihren Wünschen entspricht.

    Variable Schriftarten


    Laurence Penney einen nützlichen Bericht zu diesem Thema gemacht, sollten Sie einen Blick darauf werfen .

    Hier ist ein Kommentar von Hakon Wium Lie, einer von denen, die die Schriftartspezifikation verfasst haben:


    Das klingt wie folgt: „Einer der Gründe, warum wir uns entschieden haben, in der Zukunft dreistellige Zahlen (in der Spezifikation für den Wert der Schriftstärke) zur Unterstützung von Zwischenwerten zu verwenden. Und die Zukunft ist schon gekommen. “

    Ein sehr großes Problem mit Schriftarten in Asien: Angesichts der Gesamtanzahl der Hieroglyphen und ihrer verschiedenen Stile. Das Laden verschiedener Schriftarten für Hieroglyphen kann zu einem großen Leistungsproblem werden. Glücklicherweise verfügen wir nun über interpolierte Zeichensätze, für die Sie nur einen der dreistelligen Werte angeben können, über den die Person, die die Spezifikation geschrieben hat, sprach.



    Es ist ausreichend, wenn der Designer zwei Zeichenkonturen erstellt - sehr dick für einen Wert von 1000 und sehr dünn für einen Wert von 1. Alle anderen Stile werden bei Bedarf automatisch erstellt. Dies gilt jedoch nicht nur für die Breitenachse, sondern auch für die Höhe.



    Eine weitere Überraschung: Wir können Äxte ohne großen Aufwand selbst erstellen. Um dies in CSS zu verwenden, benötigen Sie die Eigenschaft font-Variation-Einstellungen. Es legt Werte für übergeordnete Eigenschaften fest, z. B. Schriftartstärke, Schriftartstreckung usw.



    Hier ist ein Beispiel für das Festlegen der gewünschten Schrift durch den Schriftdesigner:



    Und was ist, wenn dies nicht irgendwo unterstützt wird? Sie müssen ein Schriftformat verwenden, das Rollback für ältere Browserversionen übernehmen und über das reagierende Verhalten nachdenken. Legen Sie die Werte für verschiedene Bildschirme richtig fest. Daher verwenden wir das WOFF2-Format für Schriftarten, es ist progressiver. Bei älteren Versionen wählt der Browser die Schriftart selbst aus, was jedoch zu einer mangelnden Kontrolle über den Stil führt.

    Wir fassen zusammen


    Zusammenfassend können wir sagen, dass die Spezifikationen viel schneller als zuvor akzeptiert werden. Es dauert zwei Monate und es gibt neue Standards, Ansätze, Anwendungen. Dies ist jedoch normal, und es sollte ein Grund sein, sich weiterzuentwickeln.

    Wenn Ihnen der Bericht gefällt, passen Sie auf: Ein neues HolyJS wird am 24. und 25. November in Moskau stattfinden , und es wird dort auch viele interessante Dinge geben. Bereits bekannte Informationen zum Programm - auf der Website und Tickets können dort erworben werden.

    Jetzt auch beliebt: