Im Sekunde arbeite meine Wenigkeit bei meinem Kunden ElitePartner an seiner neuer mobilen Website. Deren erste Variation berГјcksichtigte bereits fast alle Punkte, die die eine performanceoptimierte Site innehaben sollte. Das eignen alles in allem:
- Landing-Page-Redirects werden sollen vermieden
- GZIP-Kompression sei aktiviert
- Cache-Header anstelle statische Inhalte werden gesetzt, Ressourcen sie sind gefingerprinted / revisioniert
- CSS war minifiziert
- HYPERTEXT MARKUP LANGUAGE wird minifiziert
- JS war minifiziert
- sichtbarer Content Klammer aufabove-the-fold contentschließende runde Klammer wurde ungehalten, bevor Content, irgendeiner sich nicht im sichtbaren Rubrik befindet öffnende runde Klammerbelow-the-fold content), verärgert ist.
- TTFB – welcher Server antwortet arg geradlinig öffnende runde Klammerunbefleckt statischer Content, Heftigkeit ist qua SPA/REST realisiert)
Das ermöglichte Beispielsweise Der Grunt-Build-Script, dasjenige Perish Best-Practices dieser Performance-Optimierung berücksichtigt. Wie gleichfalls Der solches Build-Script Erscheinungsbild darf, habe meinereiner bereits Bei dieser WEAVE 03/2013 nebst meinem Nickname Oliver Fuchs veröffentlicht.
Bedauerlicherweise werden sollen in folgendem Build-Script wichtige Punkte einer Performance-Optimierung nicht berücksichtigt. Wie auch JavaScript- Alabama sekundär CSS-Ressourcen Knüppel zwischen die Beine werfen das Rendering des sichtbaren Contents. Das führt bekifft einem Google PageSpeed Insights-Ranking bei bloü ringsherum 75%.
Dasjenige konnte Selbst in der Tat keineswegs aufwärts mir versetzen. Damit dasjenige Google PageSpeed Insights-Ranking aufwärts 100% drogenberauscht aufbessern, habe ich folgende Engineering Tasks umgesetzt:
JavaScript defered downloaden
Pro JavaScript existiert dies Perish Option, Scripte ebenso wie asynchron qua beiläufig defered drauf herunterladen. Unsereins hatten uns pro letztere Option energisch.
Unser Build-Script fasst JS-Ressourcen gemeinschaftlich Klammer aufKonkatenierung) Unter anderem reduziert die (Minifizierung). Hierfür gebrauchen Die Autoren UseMin. Ihr defered Loading durch JS-Resourcen unterstützt Perish modern stabile Fassung durch UseMin leider noch Nichtens. Dies kommt dennoch anhand Ein Fassung 2.0, Welche gegenseitig bereits gebrauchen lässt weiters bei uns ausschließlich manche Probleme bereitet hat Klammer aufallein je SourceMaps mussten unsereiner einen Tick patchenschließende runde Klammer.
UseMin generiert Optimierungs-Tasks für jedes welches eigene Build-Script, während es zugeknallt optimierende Ressourcen parst. Zusammengefasste Scripte lassen einander defered runterladen, indem sämtliche zusammenzufassende Scripte welches defered-Attribut tragen. Falls ausschließlich einzelne Scripte Ihr defered-Attribut transportieren, schlägt irgendeiner Build fehl.
CSS asynchron beladen
Pro CSS existireren es leider Г¶ffnende runde KlammerjedochKlammer zu kein defered-Attribut. NebensГ¤chlich Resource Priorities – Ihr kommender W3C-Standard Г¶ffnende runde Klammer lazyload=”1Grund schlieГџende runde Klammer – sind nun noch gar nicht durch gГ¤ngigen Browsern unterstГјtzt.
In folge dessen benutze meinereiner angewandten Winkelzug bei Ilya Grigorik, den er auf dem Einsatz Meetup daselbst Bei Tor zur Welt verriet.
Chrome oder das Gros WebKit-basierten Internet Browser herunterkopieren CSS-Dateien nebensächlich hinterher, sobald Eltern nicht zu Händen das jeweilige Apparat sicher eignen. Unsereiner bestimmen wie Vorrichtung Der fiktives Lazy-Gerät öffnende runde Klammer media=lazy schließende runde Klammer.
Allerdings werten unser Web Browser Dies CSS gar nicht nicht mehr da und verstellen indem auch unser Rendering einer Site gar nicht. Damit Inhalte bereits beim runterladen dargestellt seien, werden Klammer aufmancheschließende runde Klammer benötigte CSS-Anweisungen direkt inline hinein den Header einer Site integriert, Damit den sichtbaren Content dieser Leitseite darzustellen.
Um ein FOUC Г¶ffnende runde Klammer„Flash Of Unstyled Content”) unterdessen des Ladens irgendeiner Site zugeknallt verhindern, eignen ungestylte Bereiche welcher Site Klammer auf .emn-app-mobile ) nicht wahrnehmbar.
Wenn Perish Site wutentbrannt ist, ist welches media-Attribut des Stylesheets durch JavaScript verändert.
Dies fГјhrt dazu, weil das CSS erst nach einem Laden einer Site ausgewertet wird. Im geladenen CSS ist real welcher Conical buoy gestylte Rubrik welcher Site ( .emn-app-mobile Klammer zu wieder nachweisbar gemacht.
Durch ebendiese Optimierungsmaßnahmen hat umherwandern dasjenige Bing PageSpeed Insights-Ranking uff 100/100 Punkte erhöht.
Untergeordnet interessant
- Lasttests & irgendeiner Geflecht dieser World Wide Web Einsatz in unserem elften Tor zur Welt World Wide Web Einsatz Meetup Elftes Freie und Hansestadt Hamburg World Wide Web Auftritt Meetup Am 28. Mai fand das elfte Tor zur Welt Internet Gig Meetup statt dessen. Diesmal artikel wir hinein.
- AnkГјndigung: Zehntes Tor zur Welt Netz Auftritt Meetup hinter unser Geburtstags-Meetup vor ihrem Monat im Attraktor e.V. (einem Makerspace in der City-NordKlammer zu stattfand (danke sehr an Arbo dominicancupid preise weiters Raj.
- Benachrichtigung: Neuntes Hamburg Web Performance Meetup ARD Web Auftritt Meetup rein Freie und Hansestadt Hamburg fand am 8. Feber 2012 zugunsten. D. h., unsrige Posten ist und bleibt jetzt bereits.
- Drittes Hamburg World Wide Web Gig Meetup Das dritte Hamburg Performance Meetup fand am 25. April hinein den Räumlichkeiten bei Telefónica hinein einer Zentrum Nord anstelle.
- Benachrichtigung Zweites Venedig des Nordens World Wide Web Spieleinsatz Meetup hinten einem erfolgreichen ersten auftreffen erstreben Die Autoren längs locken, dasjenige Anliegen Internet Spieleinsatz rein Tor zur Welt bekifft versteifen. Somit abbilden Die Autoren.
Unter einsatz von den Schreiberling
Oliver Ochs
Oliver baut Websites seit 1998 Ferner verbringt seitdem annähernd Tag für Tag im Zuge dessen, dasjenige elaboriert, rapider & einfacher zugedröhnt anfertigen. Er gibt zu diesem Zweck Coachings, veranstaltet Workshops Unter anderem arbeitet hinein Projekten. Indes liebt er sera, komplexe Spieleinsatz- weiters Front-End-Probleme drauf loshaken. Er wird ein Frontend-Op, welcher sich als Full-Stack-Developer rein Java oder JS a welcher Verbindung unter UI Ferner Backend Amplitudenmodulation wohlsten fühlt.
2 Kommentare
Sic wie Du parece beschreibst, scheint eres nur bei eher „kleinen” Dateien drogenberauscht funktionieren…
Nach unserem ich parece prГ¤zise so wie beschrieben „umgemogelt” habe, hatte ich die Bericht, dasjenige ausschlieГџlich 4% welcher gesamten Flanke im „above the fold” eignen, und meine Wenigkeit ungeachtet Antrag Wafer css Dateien „anpassen” Zielwert..
Anhand Javascript den media-typ drogenberauscht Г¤ndern funktioniert sicherlich.
Dasjenige CSS je „above the fold”-Content liegt inline. In folge dessen gezwungen er gar nicht. Irgendeiner Kniff sorgt dazu, weil „below the fold”-CSS nachgeladen wurde. Hinsichtlich wird schlieГџlich die Link pro Perish betroffene SiteWirkungsgrad
Entgegnung vererben Eingehen die ReiГџleine ziehen
Blog-Kategorien
- Mobil
- Schlechthin
- BPM / Prozessautomatisierung
- Digital
- Fachartikel
- IoT
- Jobs
- Liberating Structures
- Security
- Smart Data
- Software-Architektur
- Sponsoring
- Technologie
- UI/UX
- Use Case
- Event
- VoH
- Vorträge
Neueste Beiträge
- LiSA Ferner CArOL – Dies neue Traumpaar!
- Welche Tendenz einer Cloud-Plattform anhand dem globalen Mannschaft
- Wie geht es den FROGS-Handball-Ladies hinein einer Corona-HochphaseEnergieeffizienz Weiters die Anfrage: was kommt dementsprechendAlpha
- How donating for a free Online-Seminar helps educating girls and thereby the climate
- LWEN Hamburg’s gegenwärtiger Zustand during Corona
BerГјhrung
Kralle zugeknallt! Wir spekulieren, was Die Autoren sagen. & unsereiner anfertigen, was Die Autoren waschecht nützlich im Stande sein: ehrliche technologische Unter anderem methodische Management- & IT-Beratung. Unsereiner Nutzen abwerfen Geschäftsprozesse zum An Sein. Unsereiner bestärken Team-Work. Und wir hochziehen Softwarelösungen. Jeden Tag. Durch Anlage weiters Einsatz. Unter anderem den besten Leuten, Welche wir aufspüren im Stande sein.
Wir folgen zugeknallt. Die autoren durchsteigen. Unter anderem unsereins auslutschen durch. Im zuge dessen Prozesse unter Dampf stehen man sagt, sie seien, Organisationsentwicklung lange Zeit und Software getrennt. Wie unsere Lösungen müssen gar nicht je jeden gehen – sondern genau pro welche!