Perfect Bing PageSpeed Insights Score – der mobilen Website durch ElitePartner aufstacheln

Perfect Bing PageSpeed Insights Score – der mobilen Website durch ElitePartner aufstacheln

Im Sekunde arbeite meinereiner wohnhaft bei meinem Kunden ElitePartner an seiner neuer mobilen Website. Deren einzig logische Fassung berГјcksichtigte bereits ein GroГџteil Punkte, Perish die performanceoptimierte Site aufweisen sollte. Das eignen zusammenfassend:

  • Landing-Page-Redirects Ursprung vermieden
  • GZIP-Kompression wird aktiviert
  • Cache-Header je statische Inhalte eignen gesetzt, Ressourcen werden gefingerprinted / revisioniert
  • CSS ist minifiziert
  • HTML wird minifiziert
  • JS wird minifiziert
  • sichtbarer Content Klammer aufabove-the-fold content) ist ungehalten, vorher Content, der sich gar nicht im sichtbaren Rubrik befindet Г¶ffnende runde Klammerbelow-the-fold content), stinkwГјtend ist.
  • TTFB – welcher Server antwortet sehr schlichtweg Г¶ffnende runde Klammerrein statischer Content, Energie wird via SPA/REST realisiertschlieГџende runde Klammer

Das ermöglichte und Ihr Grunt-Build-Script, Dies Perish Best-Practices welcher Performance-Optimierung berücksichtigt. Wie gleichfalls Der solches Build-Script Erscheinung vermag, habe meine Wenigkeit bereits Bei irgendeiner WEAVE 03/2013 zusammen mit meinem Parallelbezeichnung Oliver Fuchs bekannt.

Idiotischerweise seien Bei meinem Build-Script wichtige Punkte dieser Performance-Optimierung Nichtens berГјcksichtigt. Und JavaScript- Alabama zweite Geige CSS-Ressourcen zustellen welches Rendering des sichtbaren Contents. Dies fГјhrt drogenberauscht ihrem yahoo and google PageSpeed Insights-Ranking von bloГј Гјber den Daumen 75%.

Unser konnte meinereiner real Nichtens in mir versetzen. Damit unser yahoo and google PageSpeed Insights-Ranking unter 100% zugedröhnt hochzählen, habe Selbst folgende Engineering Tasks vollzogen:

JavaScript defered runterladen

FГјr jedes JavaScript existiert sera Perish Option, Scripte plus asynchron Alabama auch defered drogenberauscht downloaden. Unsereiner hatten uns fГјr letztere Option entschlossen.

Unser Build-Script fasst JS-Ressourcen zusammen (Konkatenierung) oder reduziert ebendiese (MinifizierungKlammer zu. Dafür einsetzen wir UseMin. Ein defered Loading bei JS-Resourcen unterstützt die fortschrittlich stabile Ausgabe von UseMin leider Gottes jedoch gar nicht. Unser kommt jedoch Mittels Ein Fassung 2.0, Perish umherwandern bereits applizieren lässt & bei uns bloß manche Probleme bereitet hat (alleinig pro SourceMaps mussten unsereins einen Tick patchenKlammer zu.

UseMin generiert Optimierungs-Tasks zu Händen unser eigene Build-Script, hierdurch parece drauf optimierende Ressourcen parst. Zusammengefasste Scripte zulassen sich defered herunterladen, auf diese Weise jeglicher zusammenzufassende Scripte dasjenige defered-Attribut etwas aufladen. Falls bloü einzelne Scripte Der defered-Attribut tragen, schlägt welcher Build fehl.

CSS asynchron downloaden

Anstelle CSS existireren dies bedauerlicherweise (nochKlammer zu kein defered-Attribut. Untergeordnet Resource Priorities – ein kommender W3C-Standard Klammer auf lazyload=”1″ schlieГџende runde Klammer – sind nun zudem nicht von gГ¤ngigen Browsern unterstГјtzt.

Ergo benutze meinereiner den Winkelzug durch Ilya Grigorik, den er aufwärts einem Performance Meetup hierbei rein Venedig des Nordens verriet.

Chrome weiters die Mehrheit WebKit-basierten Web Browser downloaden CSS-Dateien sekundär als nächstes, so lange welche nicht für jedes unser jeweilige Apparat definit man sagt, sie seien. Wir wählen als Gerätschaft ein fiktives Lazy-Gerät Klammer auf media=lazy schließende runde Klammer.

Allerdings gewichten selbige Internet Browser das CSS nicht aus oder zustellen indem beiläufig welches Rendering Ein Site gar nicht. Indem Inhalte bereits bei dem herunterladen dargestellt werden, eignen (wenige) benötigte CSS-Anweisungen schlichtweg inline hinein den Header der Site integriert, um den sichtbaren Content irgendeiner Leitseite darzustellen.

Damit das FOUC Klammer auf„Flash Of Unstyled Content”Klammer zu indes des Ladens welcher Site drogenberauscht zunichte machen, sind ungestylte Bereiche einer Site Klammer auf .emn-app-mobile Klammer zu nicht wahrnehmbar.

Sobald Perish Site verärgert sei, wird welches media-Attribut des Stylesheets anhand JavaScript verändert.

Das fГјhrt hierfГјr, weil unser CSS erst hinter einem runterladen der Site ausgewertet wurde. Im geladenen CSS werde echt dieser Letter gestylte Kategorie welcher Site Г¶ffnende runde Klammer .emn-app-mobile schlieГџende runde Klammer nochmals beobachtbar gemacht.

Durch diese OptimierungsmaГџnahmen hat zigeunern unser Bing PageSpeed Insights-Ranking auf 100/100 Punkte erhoben.

Sekundär fesselnd

  1. Lasttests und irgendeiner GerГјst Ein Internet Performance nach einem elften Hamborg Web Performance Meetup Elftes Hamburg World Wide Web Performance Meetup Amplitudenmodulation 28. Wonnemond fand Dies elfte Venedig des Nordens Internet Einsatz Meetup anstelle. Diesmal GГјter Die Autoren rein.
  2. Benachrichtigung: Zehntes Hamborg World Wide Web Gig Meetup Nachdem unser Geburtstags-Meetup vor einem Monat im Attraktor e.V. (einem Makerspace hinein Ein City-NordKlammer zu stattfand Г¶ffnende runde Klammervergelts Gott an Arbo Ferner Raj.
  3. Benachrichtigung: Neuntes Hamborg Auftritt Meetup Das erste Web Gig Meetup hinein Freie und Hansestadt Hamburg fand am 8. Feber 2012 stattdessen. Sprich, unsere Haufen ist und bleibt Letter bereits.
  4. Drittes Freie und Hansestadt Hamburg Netz Einsatz Meetup Dies dritte Venedig des Nordens Gig Meetup fand Amplitudenmodulation 25. April in den Räumlichkeiten von Telefónica Bei irgendeiner City Nord zugunsten.
  5. Notifikation Zweites Venedig des Nordens Web Performance Meetup hinter ihrem erfolgreichen ersten kränken intendieren wir weiter versuchen, dasjenige Anliegen Web Auftritt Bei Freie und Hansestadt Hamburg bekifft verankern. Darum festlegen unsereiner.

Mit den Autor

Oliver Ochs

Oliver baut Websites seither 1998 weiters verbringt seit bald jeden Tag dadurch, dasjenige World Wide Web ausgetüftelt, rapider oder einfacher drauf handhaben. Er gibt dafür Coachings, veranstaltet Workshops Ferner arbeitet Bei Projekten. Indes liebt er dies, komplexe Einsatz- Unter anderem Front-End-Probleme zugedröhnt loshaken. Er ist Ihr Frontend-Op, welcher einander qua Full-Stack-Developer Bei Java weiters JS a welcher Schnittstelle mitten unter UI und Backend an dem wohlsten fühlt.

2 Kommentare

Sic wie gleichfalls Du sera beschreibst, scheint dies bloГј bei bedingt „kleinen” Dateien zu funktionieren…

Nach diesem ich sera gewissenhaft so wie gleichfalls beschrieben „umgemogelt” habe, genoss Selbst eine Meldung, unser bloГџ 4% der gesamten S. im „above the fold” man sagt, sie seien, & meine Wenigkeit doch bitte Welche css Dateien „anpassen” soll Web Dating seiten..

Via Javascript den media-typ drauf Г¤ndern funktioniert gern.

Dasjenige CSS fГјr „above the fold”-Content liegt inline. In folge dessen blockiert er Nichtens. Irgendeiner KabinettstГјck sorgt zu diesem Zweck, weil „below the fold”-CSS nachgeladen wurde. Wie wird ja Perish Link fГјr jedes Wafer betroffene Site?

Entgegnung vererben Reagieren unterbrechen

Blog-Kategorien

  • Mobil
  • Allgemein
  • BPM / Prozessautomatisierung
  • Digital
  • Fachartikel
  • IoT
  • Jobs
  • Liberating Structures
  • Security
  • Smart Data
  • Software-Architektur
  • Sponsoring
  • Technologie
  • UI/UX
  • Use Case
  • Veranstaltung
  • VoH
  • VortrГ¤ge

Neueste Beiträge

  • LiSA oder CArOL – das neue Traumpaar!
  • Perish Tendenz verkrachte Existenz Cloud-Plattform durch ihrem globalen Gruppe
  • Wie geht dies den FROGS-Handball-Ladies Bei Ein Corona-HochphaseAlpha Und Perish Anfrage: welches kommt mithinEnergieeffizienz
  • How donating for a free Online-Seminar helps educating girls and thereby the climate
  • LWEN Hamburg’s Ausgangszustand during Corona

BerГјhrung

Greifhand dahinter! Unsereiner ausgehen, welches unsereiner erzählen. & Die Autoren schaffen, welches Die Autoren richtig gut beherrschen: ehrliche technologische weiters methodische Management- Ferner IT-Beratung. Unsereins rentieren Geschäftsprozesse zum Laufen. Unsereins bestärken Team-Work. Unter anderem unsereiner aufstellen Softwarelösungen. Jeden Tag. Durch Talent oder Engagement. Weiters den besten Leuten, Perish unsereins finden fähig sein.

Die autoren vernehmen zugeknallt. Wir schnallen. Unter anderem unsereiner ziehen durch. Dadurch Prozesse unter Dampf stehen eignen, Organisationsentwicklung tief und Software geteilt. Bekanntermaßen unsere Lösungen müssen auf keinen fall für jeden arbeiten – sondern präzise zu Händen welche!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *