Perfect Google PageSpeed Insights Score – der mobilen Website durch ElitePartner voranbringen

Im Augenblick arbeite ich bei meinem Kunden ElitePartner an seiner neuer mobilen Website. Deren gute Variation berГјcksichtigte bereits fast alle Punkte, die die performanceoptimierte Site aufweisen sollte. Dies man sagt, sie seien alles in allem:

• Landing-Page-Redirects Anfang vermieden
• GZIP-Kompression sei aktiviert
• Cache-Header fГјr jedes statische Inhalte sie sind gesetzt, Ressourcen sind gefingerprinted / revisioniert
• CSS sei minifiziert
• HYPERTEXT MARKUP LANGUAGE wird minifiziert
• JS ist minifiziert
• sichtbarer Content Г¶ffnende runde Klammerabove-the-fold content) ist stinkwГјtend, im Vorhinein Content, welcher gegenseitig Nichtens im sichtbaren Kategorie befindet Г¶ffnende runde Klammerbelow-the-fold content), stinkwГјtend ist.
• TTFB – Ein Server antwortet jede Menge schnell Г¶ffnende runde Klammergepflegt statischer Content, Dynamik ist unter Zuhilfenahme von SPA/REST realisiertschlieГџende runde Klammer

Das ermöglichte weiterhin Ihr Grunt-Build-Script, das Wafer Best-Practices Ein Performance-Optimierung berücksichtigt. Wie das solches Build-Script Anschein kann, habe Selbst bereits Bei dieser WEAVE 03/2013 darunter meinem Deckname Oliver Fuchs veröffentlicht.

Idiotischerweise werden hinein folgendem Build-Script wichtige Punkte https://datingseitenliste.de/sdc-test/ welcher Performance-Optimierung gar nicht berГјcksichtigt. Sowohl JavaScript- qua zweite Geige CSS-Ressourcen KnГјppel zwischen die Beine werfen dasjenige Rendering des sichtbaren Contents. Dies fГјhrt drauf dem search engine PageSpeed Insights-Ranking bei bloГј rund 75%.

Unser konnte ich natГјrlich Nichtens nach mir versetzen. Damit Dies yahoo and google PageSpeed Insights-Ranking in 100% drauf aufbessern, habe Selbst folgende Engineering Tasks vollzogen:

JavaScript defered beladen

Pro JavaScript existireren es die Option, Scripte ebenso wie asynchron denn beiläufig defered bekifft herunterladen. Unsereins haben uns anstelle letztere Chance bestimmt.

Unser Build-Script fasst JS-Ressourcen zugleich öffnende runde KlammerKonkatenierung) Unter anderem eng gepackt diese (Minifizierungschließende runde Klammer. Hierfür einsetzen unsereins UseMin. Ein defered Loading durch JS-Resourcen unterstützt Welche fortschrittlich stabile Ausgabe bei UseMin blöderweise noch gar nicht. Dies kommt dennoch Mittels Ein Version 2.0, Wafer einander bereits applizieren lässt Ferner wohnhaft bei uns allein manche Probleme bereitet hat (allein anstelle SourceMaps mussten unsereiner einen Tick patchenschließende runde Klammer.

UseMin generiert Optimierungs-Tasks für Dies eigene Build-Script, auf diese Weise eres bekifft optimierende Ressourcen parst. Zusammengefasste Scripte lizenzieren zigeunern defered downloaden, während jeglicher zusammenzufassende Scripte Dies defered-Attribut anhaben. Falls ausschließlich einzelne Scripte das defered-Attribut anhaben, schlägt Ein Build fehl.

CSS asynchron herunterladen

Pro CSS gibt dies blГ¶derweise (jedochKlammer zu kein defered-Attribut. Auch Resource Priorities – das kommender W3C-Standard Г¶ffnende runde Klammer lazyload=”1Grund schlieГџende runde Klammer – werden sollen noch keineswegs von gГ¤ngigen Browsern unterstГјtzt.

Somit benutze ich den Trick durch Ilya Grigorik, den er nach dem Web Gig Meetup daselbst hinein Hamburg verriet.

Chrome weiters fast alle WebKit-basierten Web Browser laden CSS-Dateien nebensächlich sodann, Sofern sie Nichtens pro dasjenige jeweilige Gerät bestimmt seien. Unsereins wählen Alabama Laufwerk Der fiktives Lazy-Gerät öffnende runde Klammer media=lazy Klammer zu.

Allerdings befinden unser Browser dasjenige CSS gar nicht aus oder versperren dadurch auch welches Rendering irgendeiner Site keineswegs. Dadurch Inhalte bereits bei dem downloaden dargestellt seien, sind öffnende runde KlammerwenigeKlammer zu benötigte CSS-Anweisungen direkt inline in den Header irgendeiner Site integriert, um den sichtbaren Content Ein Homepage darzustellen.

Um Ihr FOUC Klammer auf„Flash Of Unstyled Content”) unterdessen des Ladens welcher Site bekifft verunmГ¶glichen, sie sind ungestylte Bereiche welcher Site Klammer auf .emn-app-mobile schlieГџende runde Klammer nicht erkennbar.

Sobald Perish Site stinkig war, ist unser media-Attribut des Stylesheets via JavaScript verändert.

Das fГјhrt dazu, dass welches CSS erst nachdem dem Laden der Site ausgewertet wird. Im geladenen CSS werde wahrlich welcher Religious gestylte Cluster irgendeiner Site Г¶ffnende runde Klammer .emn-app-mobile Klammer zu wieder beobachtbar gemacht.

Durch selbige Optimierungsmaßnahmen hat umherwandern das search engine PageSpeed Insights-Ranking aufwärts 100/100 Punkte erhöht.

Untergeordnet schlagkräftig

1. Lasttests weiters dieser Beschaffenheit irgendeiner Auftritt nach Mark elften Tor zur Welt World Wide Web Performance Meetup Elftes Hamborg Netz Einsatz Meetup Am 28. Wonnemond fand dasjenige elfte Hamburg Performance Meetup statt dessen. Diesmal artikel Die Autoren in.
2. Bekanntgabe: Zehntes Tor zur Welt Einsatz Meetup hinten unser Geburtstags-Meetup vor dem Monat im Attraktor e.V. (einem Makerspace in einer City-Nord) stattfand Г¶ffnende runde Klammerdanke an Arbo Unter anderem Raj.
3. Notifikation: Neuntes Hamburg Web Gig Meetup Das erste Performance Meetup Bei Tor zur Welt fand an dem 8. zweiter Monat des Jahres 2012 anstelle. Daraus ergibt sich, unsrige Gesellschaftsschicht war jetzt bereits.
4. Drittes Tor zur Welt Performance Meetup Dies dritte Hamborg Netz Gig Meetup fand Amplitudenmodulation 25. April hinein den Räumlichkeiten durch Telefónica rein einer Stadtmitte Nord statt.
5. Offenlegung Zweites Hamborg Internet Einsatz Meetup nachdem ihrem erfolgreichen ersten beleidigen beabsichtigen wir entlang verleiten, Dies Fragestellung World Wide Web Auftritt in Hamburg bekifft befestigen. In folge dessen planen Die Autoren.

Гњber den Schreiberling

Oliver Ochs

Oliver baut Websites seitdem 1998 Unter anderem verbringt seither kaum tagtäglich im Zuge dessen, das World Wide Web von hoher Kunstfertigkeit, wesentlich schneller und einfacher drogenberauscht schaffen. Er existireren dazu Coachings, veranstaltet Workshops und arbeitet rein Projekten. Unterdessen liebt er parece, komplexe Performance- & Front-End-Probleme drogenberauscht losmachen. Er ist ein Frontend-Op, irgendeiner umherwandern wanneer Full-Stack-Developer in Java und JS a der Interface zusammen mit UI und Backend an dem wohlsten fühlt.

2 Kommentare

Sic wie Du es beschreibst, scheint sera bloГј wohnhaft bei verhГ¤ltnismäßig „kleinen” Dateien drauf funktionieren…

Nachdem einem meinereiner sera genau auf diese Weise wie beschrieben „umgemogelt” habe, hatte meinereiner folgende Depesche, unser allein 4% einer gesamten FlГјgel im „above the fold” man sagt, sie seien, und meinereiner dennoch bitte Wafer css Dateien „anpassen” Plansoll..

Mit Javascript den media-typ drauf verwandeln funktioniert bereitwillig.

Dies CSS fГјr „above the fold”-Content liegt inline. Somit verspannt er gar nicht. Irgendeiner List sorgt hierfГјr, weil „below the fold”-CSS nachgeladen wurde. Genau so wie war schlieГџlich die Link anstelle die betroffene SiteEnergieeffizienz

Auskunft vererben Antworten abbrechen

Blog-Kategorien

• Mobil
• Verallgemeinernd
• 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 Unter anderem CArOL – das neue Traumpaar!
• Die Richtung der Cloud-Plattform mit ihrem globalen Team
• Hinsichtlich geht sera den FROGS-Handball-Ladies in einer Corona-Hochphase? Weiters Wafer Fragestellung: was kommt demgemäß?
• How donating for a free Online-Seminar helps educating girls and thereby the climate
• LWEN Hamburg’s status quo during Corona

Umgang

Hand zugedröhnt! Wir einbilden, was unsereins erzählen. Weiters unsereiner schaffen, welches wir vollumfänglich nützlich beherrschen: ehrliche technologische weiters methodische Management- Ferner IT-Beratung. Wir einfahren Geschäftsprozesse zum An Sein. Die autoren bekräftigen Team-Work. Oder Die Autoren konstruieren Softwarelösungen. Pro Tag. Anhand Talent und Hingabe. Unter anderem den besten Leuten, die unsereins finden vermögen.

Die autoren folgen bekifft. Unsereiner einsehen. Und wir zutzeln durch. Dadurch Prozesse mobil sind, Organisationsentwicklung lange weiters Software getrennt. Ja unsre Lösungen zu tun sein gar nicht pro jeden gehen – sondern genau pro Diese!