Im Sekunde arbeite meinereiner wohnhaft bei meinem Kunden ElitePartner an seiner neuer mobilen Website. Deren einzig logische Veränderung berücksichtigte bereits ein Großteil Punkte, Wafer folgende performanceoptimierte Site zeigen sollte. Dies sind zusammenfassend:
- Landing-Page-Redirects Ursprung vermieden
- GZIP-Kompression war aktiviert
- Cache-Header anstelle statische Inhalte werden gesetzt, Ressourcen man sagt, sie seien gefingerprinted / revisioniert
- CSS ist und bleibt minifiziert
- HTML ist und bleibt minifiziert
- JS sei minifiziert
- sichtbarer Content (above-the-fold contentschlieГџende runde Klammer werde stinkig, im Vorhinein Content, irgendeiner zigeunern keineswegs im sichtbaren Bezirk befindet (below-the-fold contentKlammer zu, geladen werde.
- TTFB – der Server antwortet erheblich schnell öffnende runde Klammerrein statischer Content, Dynamik werde unter Einsatz von SPA/REST realisiert)
Dies ermöglichte und Der Grunt-Build-Script, welches Wafer Best-Practices dieser Performance-Optimierung berücksichtigt. Entsprechend Ihr solches Build-Script Schein konnte, habe meine Wenigkeit bereits in Ein WEAVE 03/2013 darunter meinem Tarnname Oliver Fuchs veröffentlicht.
Unglücklicherweise werden hinein meinem Build-Script wichtige Punkte welcher Performance-Optimierung Nichtens berücksichtigt. Wie JavaScript- als sekundär CSS-Ressourcen Knüppel zwischen die Beine werfen welches Rendering des sichtbaren Contents. Das führt zugeknallt dem Bing PageSpeed Insights-Ranking von bloü vielleicht 75%.
Dasjenige konnte meine Wenigkeit echt gar nicht auf mir sitzen lassen. Damit unser Google PageSpeed Insights-Ranking unter 100% zugeknallt steigern, habe ich folgende Engineering Tasks vollzogen:
JavaScript defered downloaden
Anstelle JavaScript gibt eres Perish Gunst der Stunde, Scripte wie asynchron als nebensächlich defered drogenberauscht downloaden. Unsereiner besitzen uns für jedes letztere Gunst der Stunde energisch.
Unser Build-Script fasst JS-Ressourcen gruppenweise (Konkatenierungschließende runde Klammer weiters verkleinert unser Klammer aufMinifizierung). Dazu applizieren wir UseMin. Ein defered Loading durch JS-Resourcen unterstützt Welche heutig stabile Ausgabe durch UseMin leider Gottes jedoch auf keinen fall. Welches kommt gleichwohl anhand dieser Variation 2.0, Perish gegenseitig bereits zum Einsatz bringen lässt weiters wohnhaft bei uns ausschließlich wenige Probleme bereitet hat öffnende runde Klammerallein anstelle SourceMaps mussten unsereiner bisserl patchen).
UseMin generiert Optimierungs-Tasks pro das eigene Build-Script, damit eres zugedröhnt optimierende Ressourcen parst. Zusammengefasste Scripte lizenzieren gegenseitig defered herunterladen, während die Gesamtheit zusammenzufassende Scripte welches defered-Attribut etwas aufladen. Falls bloß einzelne Scripte Ihr defered-Attribut schleppen, schlägt einer Build fehl.
CSS asynchron herunterladen
Je CSS existiert dies bedauerlicherweise Klammer aufnochKlammer zu kein defered-Attribut. Untergeordnet Resource Priorities – Ihr kommender W3C-Standard Г¶ffnende runde Klammer lazyload=”1Grund Klammer zu – sind nun fetisch preise jedoch keineswegs von gГ¤ngigen Browsern unterstГјtzt.
Ergo benutze ich diesseitigen Trick von Ilya Grigorik, den er nach ihrem Web Gig Meetup hierbei rein Hamborg verriet.
Chrome Ferner fast alle WebKit-basierten Internet Browser downloaden CSS-Dateien untergeordnet sodann, so lange Eltern nicht anstelle das jeweilige Laufwerk bestimmt werden. Unsereins wählen wanneer Vorrichtung Der fiktives Lazy-Gerät öffnende runde Klammer media=lazy ).
Allerdings würdigen nachfolgende Web Browser das CSS nicht aus oder versperren damit zweite Geige welches Rendering Ein Site Nichtens. Indem Inhalte bereits beim Laden dargestellt Ursprung, sind (einige) benötigte CSS-Anweisungen einfach inline in den Header welcher Site integriert, um den sichtbaren Content welcher Homepage darzustellen.
Damit das FOUC Klammer auf„Flash Of Unstyled Content”Klammer zu solange des Ladens irgendeiner Site bekifft verunmГ¶glichen, sie sind ungestylte Bereiche Ein Site Klammer auf .emn-app-mobile ) unerkennbar.
Sowie Welche Site ungehalten wird, wurde das media-Attribut des Stylesheets über JavaScript verändert.
Dies fГјhrt hierfГјr, dass dasjenige CSS erst hinten unserem runterladen einer Site ausgewertet ist. Im geladenen CSS wird natГјrlich der jetzt gestylte Kategorie Ein Site Klammer auf .emn-app-mobile Klammer zu nochmals sichtbar gemacht.
Durch die OptimierungsmaГџnahmen hat gegenseitig dasjenige Google PageSpeed Insights-Ranking in 100/100 Punkte erhoben.
Beiläufig fesselnd
- Lasttests oder der Geflecht Ein World Wide Web Spieleinsatz aufwärts unserem elften Tor zur Welt Web Einsatz Meetup Elftes Venedig des Nordens Spieleinsatz Meetup Am 28. Fünfter monat des jahres fand das elfte Freie und Hansestadt Hamburg World Wide Web Spieleinsatz Meetup zugunsten. Diesmal artikel wir Bei.
- Offenlegung: Zehntes Tor zur Welt Gig Meetup hinter unser Geburtstags-Meetup vor dem Monat im Attraktor e.V. (einem Makerspace in einer City-Nord) stattfand Г¶ffnende runde Klammerdanke sehr an Arbo und Raj.
- Benachrichtigung: Neuntes Tor zur Welt Performance Meetup Das erste Netz Einsatz Meetup Bei Freie und Hansestadt Hamburg fand Amplitudenmodulation 8. Hornung 2012 sondern. Das bedeutet, unsere Gruppe wird jetzt bereits.
- Drittes Freie und Hansestadt Hamburg World Wide Web Spieleinsatz Meetup dasjenige dritte Hamborg Web Spieleinsatz Meetup fand an dem 25. April hinein den Räumlichkeiten bei Telefónica rein der Stadtzentrum Nord sondern.
- Notifikation Zweites Hamburg Web Auftritt Meetup nachdem einem erfolgreichen ersten kränken intendieren Die Autoren weiter abschmecken, welches Thema Internet Performance in Hamburg drauf abstützen. In folge dessen entwerfen unsereins.
Гњber den Autor
Oliver Ochs
Oliver baut Websites seit dieser Zeit 1998 & verbringt seither bald Tag fГјr Tag damit, dasjenige Netz von hoher Kunstfertigkeit, schneller weiters einfacher bekifft machen. Er existiert zu diesem Zweck Coachings, veranstaltet Workshops Unter anderem arbeitet in Projekten. Indes liebt er sera, komplexe Einsatz- und Front-End-Probleme zu gehen lassen. Er ist ein Frontend-Op, dieser einander wanneer Full-Stack-Developer Bei Java Ferner JS an irgendeiner Interface zwischen UI und Backend Amplitudenmodulation wohlsten fГјhlt.
2 Kommentare
Sic wie Du sera beschreibst, scheint parece alleinig bei verhГ¤ltnismäßig „kleinen” Dateien zugedrГ¶hnt funktionieren…
Nach dem meine Wenigkeit es exakt so sehr wie gleichfalls beschrieben „umgemogelt” habe, genoss meine Wenigkeit folgende Report, dasjenige bloГџ 4% irgendeiner gesamten Flanke im „above the fold” man sagt, sie seien, & meinereiner nur Bittgesuch Welche css Dateien „anpassen” Plansoll..
Anhand Javascript den media-typ drauf wechseln funktioniert sicher.
Dasjenige CSS fГјr „above the fold”-Content liegt inline. Infolgedessen krampfhaft er Nichtens. Dieser List sorgt dafГјr, weil „below the fold”-CSS nachgeladen wird. Wie gleichfalls ist und bleibt bekanntermaГџen Perish Link zu HГ¤nden Perish betroffene SiteEta
Entgegnung hinterlassen Antworten schmeiГџen
Blog-Kategorien
- Unter Dampf Stehen
- Allgemein
- BPM / Prozessautomatisierung
- Digital
- Fachartikel
- IoT
- Jobs
- Liberating Structures
- Security
- Smart Data
- Software-Architektur
- Sponsoring
- Technologie
- UI/UX
- Use Case
- Darbietung
- VoH
- Vorträge
Neueste Beiträge
- LiSA oder CArOL – Dies neue Traumpaar!
- Die Entwicklung der Cloud-Plattform mit dem globalen Team
- Wie gleichfalls geht eres den FROGS-Handball-Ladies Bei einer Corona-HochphaseWirkungsgrad Unter anderem Welche Frage: welches kommt demgemäßEta
- How donating for a free Online-Seminar helps educating girls and thereby the climate
- LWEN Hamburg’s gegenwärtiger Zustand during Corona
Verhältnis
Greifhand stoned! Unsereiner glauben, welches unsereiner schildern. Weiters Die Autoren handhaben, welches unsereins durchweg mehr als im Stande sein: ehrliche technologische oder methodische Management- und IT-Beratung. Unsereiner rentieren Geschäftsprozesse zum Laufen. Unsereiner laben Team-Work. Oder unsereins errichten Softwarelösungen. Tag Für Tag. Bei Talent weiters Tatendrang. & den besten Leuten, Perish wir aufstöbern fähig sein.
Wir gehorchen zugedröhnt. Unsereins durchsteigen. Und wir zutzeln durch. Dadurch Prozesse unter Dampf stehen werden, Organisationsentwicklung tief und Software abgesondert. Wie unsre Lösungen zu tun sein Nichtens anstelle jeden gehen – sondern exakt anstelle Die Kunden!