Wo wir sind, ist vorne, Folge 33. Heute geht es um Geschwindigkeit.
Herzlich willkommen bei Wo wir sind, ist vorne. Frontend-Fakten-Frotzeleien.
Der Late-Night-Frontend-Talkshow rund um Webdesign und Entwicklung.
Es reden sich um Head und Kragen, HTML-Fundamentalist Moritz Gießmann und JavaScript-Jungleur Konstantin Groß.
Heute zu Gast, Working-Draft-Co-Host und Performance-Papst, Christian Schäfer.
Hey, herzlich willkommen.
Ja, vielen Dank für die Anwahrung und für die tolle Ansage.
Stimmkräftige Unterstützung, nachdem meine Stimme so ein bisschen gerade am Absaufen ist.
Ja, mal gucken, wie lange ich heute durchhalte.
Aber schön, dass wir haben ja ...
Was?
Geiles Intro.
Also so insgesamt auch.
Ja, Performance-Papst, das hat mir eine Stimme geflüstert.
Der Moritz hat mir das geflüstert, dass man dich in gewissen Kreisen so wohl nennt.
Ich habe gehört, dass man das sagt, dass es Leute gibt, die das sagen.
Der Peter sagt das immer.
Genau, der Peter sagt das immer.
Es ist insofern was dran, als dass das tatsächlich so ein Ding ist, mit dem ich mich gern beschäftige.
Definitiv.
Also da habt ihr dann jetzt nicht so den ganz Falschen.
Ihr seid dem Peter nicht auf den Leim gegangen.
Aufwerber, auch lustig.
Ja, so, was, hier kann ich gar nichts mehr anfangen.
Nö, ja, mit Autos schnell fahren, das kenne ich.
Ja.
Genau.
Habt ihr denn alle ein Kaltgetränk bereit?
Ja.
Jawohl.
So.
Ich habe eins, das mir der Konstantin vorbeigebracht hat.
Aber das habe ich leider nicht das.
Trinkst du Malzbier oder was ist das für eine komische Flasche da?
Das hier?
Nee, nee, ich erzähle es gleich, was es ist.
Okay, also ich habe von Konstantin ein Warsteiner Brewers Gold.
Es ist eine 0,5er Flasche, das heißt, ihr habt heute noch viel Spaß mit mir.
Wie viel Prozent hat es?
5,2.
Okay, das ist im Vergleich zu den belgischen Bieren eher so zurückhaltend.
Aber es ist schon, also 5,2er halber Liter.
Viel Spaß wünsche ich euch.
5,2 habe ich auch, aber nur 0,3.
Also 3,3.
Konstantin müsste das warm trinken wahrscheinlich.
Warm trinken?
Ach so, für die Stimme.
Ja, jetzt ist es zu spät.
Mit Milch, das habe ich gehört, das ist ganz gut.
Und Honig.
Warmes Bier mit Milch und Honig.
Wow, ich glaube, also eher so Brechmittel, oder?
Was?
Bevor du es ausprobiert hast, kannst du nicht wissen, ob das vielleicht gut ist.
Nee, ich habe mir aus dem Urlaub was mitgebracht.
Ich war ja so im Wally Day, also mit Laptop am Arbeiten, aber so an der Ostsee ein bisschen
mal Tapetenwechsel.
Und da habe ich mir von einem heimischen, lokalen Brauerei, Klüvers heißt die Brauerei, habe
ich mir ein Heimatbier geholt.
Made in Holstein.
Handmade in Holstein.
Mal gespannt, was du sagst.
Sieht auch gut aus.
Was hast du denn dabei?
Ich habe von der Firma Stauder aus Essen das Bierchen.
Bierchen.
Sehr gut.
Das finde ich ganz, das ist hier, man sieht es, da steht es drauf, hopfig, fruchtig, ehrlich.
Ehrlich?
Und das mit dem Ehrlich weiß ich nicht, aber hopfig und fruchtig ist es definitiv.
Kannst du gleich berichten, ob es ehrlich schmeckt.
Ja.
Alles habe ich vergessen, ich habe auch noch was hier drauf stehen, Naturtrüb- und Bernsteinfarben.
Ich weiß nicht, ob ich in meiner Lichtsituation Bernsteinfarben nachvollziehen kann.
Die Flasche hat auf jeden Fall die richtige Farbe.
Bei mir ist malzig und vollmundig.
Okay, also gut.
Aber, oh, ich glaube, ich muss das irgendwie nochmal auf den Kopf stellen.
Ich sehe da schon, das hat irgendwie sowas.
Ja, meins Flock auch.
Es hat so einen Satz auf dem Boden.
Gut, dass ich mal geguckt habe.
Also.
Aber es ist braunes Glas auch bei euch.
Das ist ja immer so ein Qualitätsmerkmal, ne?
Ja, ich habe mal gehört, dass das Grüne und irgendwie wegen Sonneneinstrahlung wäre irgendwie ganz wichtig, ne?
Ja.
So.
Deswegen schmeckt der Heineken auch nicht.
Oh, bei dir kommt es schon.
Ich habe es extra geschüttelt, bevor ich es dir gebracht habe.
Nein, Quatsch.
Nee, ich habe es ja eben auf den Kopf gedreht nochmal.
Ach so, ja, das war vielleicht nicht ganz so, ja.
Wie ich ja irgendwie den Satz ein bisschen verteilen kann.
Ja, dann, schlossen wir mal an.
Ja, zum Wohl.
Na, weiß.
Schön so remote.
Jeder klopft mit irgendwas anderem.
Was?
Das darfst du nicht sagen.
Du machst jetzt das Bild kaputt.
So, aber?
Oh ja.
Das kann man trinken.
Ja, also malzig und vollmundig würde ich so unterschreiben, ja.
Ja, ich muss sagen, meinst du, das ist okay, schmeckt ein bisschen flach.
Also es hat jetzt nicht so, nicht so irgendwie so einen speziellen Geschmack, der irgendwie raussticht.
Vielleicht muss man es auch so im Glas drin.
Also meinst du es auf jeden Fall fruchtig.
Fruchtig.
Aber alleine schon, dass es ein Bier gibt, das Bierchen heißt, finde ich wahnsinnig sympathisch, ehrlich gesagt.
Müssen wir uns auch mal holen.
Und die Flasche sieht auch so putzig aus.
Also es ist echt, gefällt mir.
Ja.
Nee, die ist cool.
Müssen wir vielleicht mal, wenn wir mal in der Gegend sind, auch mal mitnehmen.
Okay.
Ich glaube, dann können wir tatsächlich schon zu unserem Bier gehören.
Ja, Wahnsinn.
Gut, dann machen wir direkt weiter.
Ja, ich darf den Anfang machen heute.
Und ich bin über einen Artikel gestolpert.
Der Titel war irgendwie so RIP, Copy and Paste from Stack Overflow.
Und es ging um versteckten, quasi trojanischen Code, der sich in Code-Snippets verstecken kann.
Und zwar gab es da eine Forschungsarbeit irgendwie an der Universität von Cambridge.
Und die haben da ihre Ergebnisse veröffentlicht auf einer eigenen Seite.
Trojan?
Nee, wie heißt das?
Trojan.
Trojansource.codes.
Und haben da auch ein Git-Repository zu angelegt mit Code-Beispielen.
Und zwar kann man mit UTF-8-Steuerzeichen Strings so manipulieren,
dass sie beim Code-Highlighting dann entweder Kommentare wie Code aussehen lassen
oder Code als Kommentare darstellen.
Und das sorgt eben dafür, dass du, also ein Beispiel war irgendwie,
da ist eine Abfrage von wegen, ist Admin oder nicht?
Und das sieht so aus, ja gut, die Abfrage ist ja drin.
Und dann ist das alles schön sicher.
Und in Wirklichkeit ist die aber auskommentiert und ist gar nicht da.
Und jeder User kriegt dann quasi ab in Rechte.
Und das halt natürlich gerade bei Open-Source, wo jemand was contributet.
Also nicht nur irgendwie Copy und Paste, sondern vielleicht macht jemand auch eine Contribution,
stellt einen Commit, einen Pull-Request und dann ist das da drin.
Du guckst drüber, so Code-Review, ja, sieht in Ordnung aus.
Ja, und dann schleust du dir halt irgendwelchen trojanischen Code da ein.
Allerdings muss man sagen, dass das GitHub da auch einen entsprechenden Warnhinweis anzeigt,
wenn solche Zeichen irgendwo im Code drin sind.
Die wissen auch warum.
Und in VS Code habe ich es dann ausprobiert.
VS Code zeigt also auch solche UTF-8-Zeichen zum Glück richtig an.
Aber ich weiß jetzt nicht, wie das zum Beispiel bei Stack Overflow ist.
Das habe ich jetzt noch nicht ausprobiert.
Oder generell halt bei irgendwelchen anderen Tools, die das vielleicht nicht berücksichtigen.
Und was ich auch noch verlinke in den Shownotes, ist eine Extension für VS Code,
die sich Gremlins-Tracker nennt.
Als Gremlins bezeichnet man wohl so diese versteckten Steuerzeichen,
mit denen man irgendwie Unsinn treiben kann.
Und da erscheint dann, wenn sowas vorkommt in der Zeile und VS Code es vielleicht übersieht,
erscheint so ein Gremlin-Gesicht vor der Zeilennummer.
Sodass man das dann sehen kann, dass da was ist, was da nicht hingehört.
Genau.
Krasse Geschichte.
Ja.
Mal wieder sehr kreativ irgendwie die Technologien ausgenutzt.
Das finde ich immer großartig.
Es ist wohl auch gar nicht so neu.
Also das geht wohl schon erstaunlich lange.
Und in dem Artikel hat er dann auch irgendwie ein Programm quasi geschrieben,
irgendwie mit .NET, das quasi deine Festplatte durchsucht nach Code,
wo das der Fall ist, wo das drin vorkommt.
Und weil es ja sein kann, dass man das schon längst auf der Platte
oder in irgendwelchen Projekten hat und bisher noch nicht gemerkt hat,
weil GitHub das noch nicht angemerkt hat früher mal oder so.
Ja.
Also ist vielleicht gar nicht so doof, das mal zu machen, dass man seinen Code so durchsucht.
Vielleicht muss ich das mal über mein Naiv-Script-Projekt laufen lassen,
wo ich mal versucht habe, alle Node-Module zu installieren.
Mal gucken, ob da was drin ist.
Ja, also ich finde es immer großartig.
Also auf der einen Seite muss man natürlich echt aufpassen,
aber solche Ideen, ich bin immer begeistert davon,
auf was für Ideen die Leute kommen.
Also ich habe gerade den Artikel auch mal aufgemacht.
Das ist echt, ja.
Und der Gremlin-Tracker, der hat auch ein lustiges Icon.
Das ist tatsächlich, es sieht echt fies aus in Faustcode,
habe ich mir gerade mal angeschaut.
Also da weiß man schon, da ist irgendwas wirklich schlimm,
weil normalerweise hast du in dieser Zeile neben den Zeilennummern
oder in der Spalte neben den Zeilennummern
maximal irgendwie so Breakpoints oder sowas.
Und da guckt dich dann so ein kleiner Gremlin an.
Das übersieht man nicht.
Nee, auf keinen Fall.
Habe ich tatsächlich nicht installiert.
Sollte ich vielleicht mal tun.
Habe ich jetzt vorhin mal gemacht, ja.
Ich kopiere ja ständig, also es ist ja meine Arbeit.
Du machst ja quasi nichts anderes.
Du kannst ja eigentlich gar nicht programmieren.
Das hat auch ein ehemaliger Azubi von meiner alten Firma immer gesagt,
ja, programmieren ist doch nur Copy-Paste.
Full-Stack-Overflow.
Full-Stack-Overflow, das ist gut.
Also vielleicht habe ich es schon wieder vergessen,
aber ich glaube, das habe ich noch nicht gehört.
Das ist Full-Stack-Overflow-Developer.
Sehr gut.
Ja, sind wir doch alle.
Also ich mache das gelegentlich schon, wenn man mal so ein, also,
ich meine, ich versuche natürlich auch das Beispiel zu verstehen,
so klassische, wie löst man denn das jetzt besonders elegant irgendwie in JavaScript?
Da kopiere ich mir auch was von Stack-Overflow, also bekenne ich mich schuldigen.
Ja, genau.
Das, was man jede Woche irgendwie einmal googelt.
Ja, aber da könnte ich noch mal auf ein ehemaliges,
ich glaube, es war mal ein Geilteil in dieser Sendung,
relativ am Anfang, 1loc.dev, one-line-of-code.dev,
auch so elegante Einzeiter für so kleine Helfer-Geschichten irgendwie gesammelt werden.
Genau.
Bist du schon durch?
Das war es schon von mir, ja.
Okay, also mit dem Thema, genau.
Ich habe nur was ganz Kleines.
Ich habe mal wieder was getwittert,
was für ein bisschen mehr Aufmerksamkeit gesorgt hat, als ich gedacht hätte.
Ich habe nämlich irgendwie so,
als ob die Woche nicht schon voll genug gewesen wäre.
Letzte Woche fiel mir am Sonntagabend noch ein,
wie wäre es denn, wenn ich jetzt noch irgendwie
meine Arbeitskraft umsonst anbiete für irgendwelche Leute?
Und habe gedacht, na ja,
wie könnte man denn mit den Fähigkeiten,
die man so sammelt in der IT,
irgendwie so ein bisschen was für die Welt tun?
Also habe ich gedacht, na ja, ich frage jetzt mal,
ob Leute irgendwie NGOs, kleine NGOs,
die irgendwie so die Welt ein bisschen besser machen wollen,
also irgendwie so im Bereich Klima, Nachhaltigkeit,
Gesundheit, Bildung und so weiter,
wie man denen helfen könnte.
Und dann dachte ich, na ja,
ich könnte ja Accessibility Audits für die anbieten.
Einfach so, weil das mache ich ja sowieso auch im Job und so.
Und das wäre vielleicht irgendwie nett,
wenn deren Apps oder Seiten irgendwie ein bisschen zugänglicher werden.
Ja, turns out irgendwie stand jetzt 19 Retreats.
Das ist für mich viel.
40 Likes, das ist irgendwie was passiert.
Allerdings haben sich, also viele Leute fanden die Idee gut, offenbar,
aber es hat sich kaum jemand gemeldet mit, ey, guck dir doch mal das an.
Oder hier, ich habe hier was oder so.
Also ich will jetzt nicht sagen, überschüttet mich jetzt mit Arbeit,
aber so ein paar Ideen da noch,
falls ihr irgendwie so kleine Non-Government-Organisations kennt,
die irgendwie so in den Bereichen tätig sind,
die ich jetzt gerade erwähnt habe,
dann gerne mal mir irgendwie schreiben, her damit.
Und dann gucke ich mir das an
und dann kann man da mal einen kleinen Audit machen.
Also ich kann da auch nicht zu viel versprechen.
Ich gehe da jetzt nicht extrem in die Tiefe
und Rechtssicherheit gibt es da dann von mir auch nicht.
Aber so mal grob drüber gucken und so ein paar Anmerkungen machen,
das kann ich auf jeden Fall dann machen.
Genau, also so ein kleiner Appell,
falls ihr da irgendwas habt, gerne mal melden, gerne mal was schicken.
Das ist doch mal ein Angebot.
Ja, finde ich auch.
Schön.
Ist gut, ne?
Ja, finde ich auf jeden Fall super cool.
Genau, ich habe auch noch einen Retro-Punkt mitgebracht.
Und zwar, ihr hattet euch ja in der letzten Folge
den State of CSS vorgeknöpft und seid da so durchgegangen.
Und bei einer Geschichte da,
ich glaube, die habt ihr einfach so relativ kurz nur erwähnt,
um dann weiter von dannen zu ziehen.
Und zwar die Ad-Property-Rule,
und die in der Tat zu diesem Houdini-Universum gehört.
Und das war ja so für euch so,
ja, ist irgendein Houdini-Ding, danke, tschüss.
Habt ihr an sich auch recht mit.
Ich glaube tatsächlich auch, dass Houdini so cool,
dass eigentlich so Klang vom Konzept her irgendwie
dead in the water liegt
und wahrscheinlich auch irgendwie, dass es nichts mehr gibt.
Aber diese Property-Rule, die ist halt cool,
weil man auf einmal in der Lage ist,
Custom-Properties einen Typ zuzuweisen.
Und damit, also sobald der Browser eben den Typ hat,
ähnlich wie bei anderen typisierten Sprachen,
so öffnen sich neue Möglichkeiten.
Und der Browser kann eben dann zum Beispiel
die Custom-Property weich animieren.
Also wenn das jetzt irgendwie Längeneinheiten sind
oder Farben, was er sonst nicht könnte,
denn sonst ist eine Custom-Property einfach nur ein dummer String.
Und die kann man ja, die kann man ja nicht animieren.
Also ich kann, das geht einfach nicht.
Die können nur umspringen, sozusagen ruckartig.
Genau, und damit kann man halt ein paar ganz coole so Sachen treiben.
Unter anderem kann man auch damit bauen,
ein Seal- und ein Floor-Methode für CSS und auch Modulo und so Zeugs.
Weil du nämlich zum Beispiel sagen kannst,
dass das Ganzzahlen sind.
Und dann definierst du bei einer anderen Property eben,
dass sie eine Float-Property ist.
Und dadurch, dass die eine Ganzzahlen ist,
rundet der Browser die automatisch.
Und damit kannst du dann hingehen
und bekommst so quasi frei Haus
diese mathematischen Methoden,
die du sonst nicht zur Verfügung hast.
Genau, aber so für den Normalo ist natürlich,
oder die Normalo ist spannender,
dass man so Dinge animieren kann.
So vielleicht noch ein ganz cooles Ding,
was man damit animieren könnte,
ist die Zoom-Property.
Ich weiß nicht, ob ihr die noch kennt,
so aus alten Zeiten.
Die kommt ja so aus dem IE.
Genau, die ist ja eigentlich so,
eigentlich arbeitet die ja so wie Transform Scale.
Das, ja, mit dem einen Unterschied,
dass eben der Platz freigegeben wird,
wenn ein Element eben klein geschrumpft wird.
Also das ist bei Transform anders.
Da bleibt ja quasi der ursprüngliche Abdruck
stehen.
Und damit kann man irgendwie sowas machen,
wie Menüs eben auffahren,
indem man Zoom animiert von 0 bis 1.
Weil man weiß dann,
also bei Max Heid und so,
da muss man ja quasi vorsichtshalber
mal über das Ziel hinaus schießend animieren.
Aber bei Zoom funktioniert das dann
wirklich auf den Punkt genau.
Das war ganz cool.
Ich hatte Zoom schon total vergessen.
Ja, total verdrängt.
Ich habe es gestern wieder entdeckt bei CSS Battles,
weil das schön kurz ist.
Das war kürzer als Scale.
Aber das ist echt,
das muss ich mir echt nochmal angucken.
Ich wusste gar nicht,
dass das,
da waren mir gar nicht bewusst,
dass es das noch gibt.
Ich kannte auch diesen Unterschied nicht.
Also, dass es den Platz freigibt,
das war mir jetzt auch völlig neu.
Also, schon wieder in einer Retro
so viel Neues gelernt.
Genau, Firefox kann es aber nicht.
Also, da, genau.
Der muss dann halt graceful degradieren.
Naja, gut.
Ich meine,
wenn es jetzt um eine Animation hauptsächlich geht,
dann ist das vielleicht nicht so wild.
Kommt drauf an.
Ich weiß auch nicht,
Firefox verliert ja auch immer mehr Marktanteil,
was irgendwie auch ein bisschen schade ist.
Aber ich gehöre auch zu denen,
die dazu beitragen.
Ja, ist auch sehr schade.
Also, es ist ja wirklich unfassbar gering,
der Anteil.
Ja, die waren mal so stark.
Ja.
Genau, also, ich erinnere mich noch an Zahlen von,
die ich mal hatte,
von einem großen deutschen Internetportal,
wo Firefox eine Weile lang
wirklich über 50 Prozent hatte.
Ich weiß nicht genau,
vielleicht sogar auch 60.
Ich will jetzt nicht lügen.
Aber deutlich über 50.
Also, war deutlich der stärkste Browser.
Und ich habe jetzt die aktuellen Zahlen
davon nicht mehr.
Aber alles, was ich so mitkriege,
ist, naja,
stürzt ab ins Bodenlose,
ist irgendwie bald schon komplett irrelevant.
Und das ist eigentlich total schade,
weil, wenn man am Ende irgendwie
nur noch eine Engine auf dem Markt hat,
oder sagen wir mal so 1,5 Engines,
WebKit würde ich jetzt nicht so ganz als,
und blinkt,
das ist irgendwie noch schon so ein bisschen verwandt.
Ja, ich glaube, es ist schon gut für den Markt,
wenn es irgendwie ein bisschen Konkurrenz gibt.
Ja, auf jeden Fall.
Zumal die ja auch viel Pionierarbeit da gemacht haben.
Also, wenn ich mir überlege,
was für einen geilen Grid-Editor die da hatten,
noch vor lange vor allen anderen und so.
Na ja, Editor nicht,
aber die Grid-Dev-Tools,
mit denen du das super visualisieren konntest und so.
Das war schon echt,
ja, die haben viel gute Sachen gemacht.
Und ich habe ein bisschen Sorge um Mozilla.
Ich habe jetzt hier immer gerade in die Statistiken eines,
zufälligerweise habe ich Zugriff auf die Statistiken
eines großen deutschen Newsportals,
da haben wir 5% Firefox.
Okay.
Und wie viel Chrome?
Knapp 42.
Ah, ist gar nicht so viel.
Ich hätte jetzt irgendwie mit 70 gerechnet oder so.
Ja, also es gibt noch 30% Safari.
Ich glaube, das deutet einfach darauf hin,
dass dieses Nachrichtenportal
sehr viel von mobilen Usern auch gesorgt wird.
Das ist viel.
Ja.
Genau, Samsung Internet ist da tatsächlich auch auf Platz 3
dann mit knapp 7%.
Gut.
Es gibt noch einen Retro-Punkt.
Ich habe auch nochmal so einen Rückgriff auf was,
was wir schon mal hier besprochen haben.
Und zwar Folge 28 bei den CSS-Eigenschaften.
Da ging es auch um Subgrid.
Und es tut sich da jetzt tatsächlich im Chromium was.
Und zwar bin ich da als Watcher auf so einem Ticket
und kriege da immer so ein Digest quasi,
wo dann so Commits gesammelt reingepostet werden.
Und da hat sich jetzt gerade diese Woche
hat sich da unglaublich viel getan.
Also ich habe irgendwie alle zwei Tage
habe ich eine Mail bekommen, wo sich was getan hat.
Und ich bin auch noch bei ein paar anderen Tickets als Watcher.
Da hat sich seit Monaten oder Jahren nichts getan.
Deswegen ist das echt.
Also man merkt, da tut sich gerade was.
Und was mir da auch aufgefallen ist,
wenn man sich das anschaut, wer die Commits gemacht hat,
dann waren das jetzt, zumindest diese Woche in dem Fall,
ausschließlich Microsoft-Mitarbeiter.
Und das finde ich cool zu sehen,
dass Microsoft da wirklich mit dieser Übernahme von Chromium
als Edge wirklich auch was zurückgibt.
Und da Upstream eben dafür sorgt,
dass neue Features reinkommen,
die vielleicht sonst noch länger auf der Strecke geblieben wären.
Also das fand ich ziemlich cool zu sehen.
Ja, mehr habe ich dazu auch gar nichts zu sagen.
Ah, ja dann.
Da können wir ja weitermachen.
Jawohl.
Die Property der Woche.
Ja, es ist heute was ganz Einfaches,
was ihr aber wahrscheinlich leider noch nicht einsetzen könnt,
weil es noch nicht so weit ist.
Aber ich fand es auf jeden Fall eine spannende Geschichte.
Und zwar die Property der Woche ist Input Security,
ist Teil des CSS Basic User Interface Module Level 4.
Da gibt es auch ein Working Draft.
Schon, ich glaube, das ist tatsächlich Working Draft-Status,
passenderweise natürlich.
Ja, nee, Editors Draft steht da an der Seite.
Ich weiß nicht genau, ob es da einen Unterschied gibt.
Genau, und es geht um Passwörter, Passwortfelder,
Passworteingabefelder.
Und es gibt ja verschiedene Methoden derzeit,
wie man darin das Passwort anzeigen kann.
Also so nach dem Motto, ich trage mein Passwort ein,
dann will ich aber noch mal gucken,
habe ich mich auch nicht vertippt.
Also gibt es da oft irgendwie so einen Knopf,
so ein Auge-Icon oder diverse andere Möglichkeiten,
um es dann anzeigen zu können.
Und derzeit wird das halt meistens gemacht mit,
naja, man schaltet das, fällt dann halt um in Input-Type-Text,
damit man irgendwie das Passwort sehen kann.
Jetzt gibt es offenbar seit einer Weile schon irgendwie
so eine Webkit-Eigenschaft, Webkit-Text-Security,
die sowas umschalten kann, wo man dann festlegen kann,
ist die Security da, nein, oder wie soll das denn aussehen?
Da gibt es auch so einen komischen Wert Square,
dann werden so irgendwie Quadrate angezeigt,
ist auch irgendwie fancy.
Input-Security soll das Ganze jetzt standardisieren
und der Standardwert wäre Auto,
sodass quasi der Browser entscheidet
und Input-Security-None würde das dann ausschalten.
Das heißt, ich muss jetzt nicht mehr irgendwie
den Type von dem Input-Feld ändern,
um das Passwort anzuzeigen,
sondern ich kann es mit CSS tatsächlich machen.
Die Motivation dahinter, wenn ich das richtig verstanden habe,
war, dass viele Seiten tatsächlich offenbar
ihre Passwort-Felder standardmäßig als Text,
anzeigen, warum auch, das habe ich jetzt auch noch nie gesehen.
Also wenn man es standardmäßig als Text und das dann aber Software,
die da drauf aufbaut, also irgendwie ein Passwort-Manager oder sowas,
der das Passwort reinpasten will, das nicht kann,
weil der sucht halt ein Passwort-Feld und findet keins
und in den Text-Feld will der nicht.
Und das hat auch einen guten Grund, dass er das nicht macht.
und die sind jetzt auf dem Weg da eine Security-Lösung dafür zu finden.
Und es ist wirklich so simpel, mehr gibt es dazu eigentlich auch gar nicht zu sagen.
Input-Security-None zeigt das Passwort an,
Input-Security-Auto wird es wieder verbergen.
Ist aber, glaube ich, noch in keinem Browser richtig eingebaut.
Ich habe es auch auf Can I Use nicht gefunden.
Also es ist ganz frisch,
beziehungsweise die Diskussion auf GitHub ist von 2018, April.
Aber irgendwie hat es sich noch nicht so richtig durchgesetzt,
ist noch nicht so richtig weit gekommen.
Interessant fand ich bei diesem Issue,
dass da auch ein kompletter Chat-Log aus der Diskussion darüber irgendwie mit drin ist.
Und da kann man nachlesen, was die da irgendwie gesprochen haben.
Ja, lassen Sie, wie nennen wir es denn?
Und wie die da am Ende drauf gekommen sind.
Finde ich eigentlich ziemlich cool und transparent,
dass man das komplett nachlesen kann.
Genau, also Links kommen in die Shownotes.
Also Editor's Draft.
Es gibt noch einen schönen CSS-Tricks-Artikel zum Thema.
Was für Methoden gibt es denn, um Inputs zu revealen?
Und eben auch dieses GitHub-Issue, wo die Diskussion drin stattfindet.
Genau.
Jo, Property fertig.
Property fertig.
Mir ist wieder aufgefallen, das ist letztes Mal auch schon,
wir haben den Gast noch gar nicht richtig vorgestellt.
Aber vielleicht machen wir das auch wieder am Anfang des Themas einfach,
als Teil des Themas.
Und machen zum Aufwärmen direkt wieder unser Entscheide-Dich.
Sollen wir das so machen?
Ja, klar, machen wir ja.
Gut.
WWSIV. Entscheide-Dich.
Ah, die Spannung steigt, das Herz klopft.
Ja, willst du nochmal kurz erklären nochmal, genau?
Ja, kurz nochmal die Regeln.
Also es kommen jetzt eine Menge, ich glaube etwas um die 40,
ich habe jetzt nicht ganz genau gezählt, entweder oder Fragen,
wo unser Gast, der Shep, sehr, sehr schnell möglichst antworten muss,
wofür er sich entscheidet.
Aber auch keine Erklärung, wir können gerne im Anschluss irgendwie,
wenn es noch Klärungsbedarf gibt, darüber reden.
Aber in der Runde geht es jetzt wirklich um schnelles Denken,
nicht das langsame Denken für alle, die das Buch auch gelesen haben.
Wir wollen ein bestimmtes Gehirnareal in deinem Kopf ansprechen
und deswegen müssen wir da jetzt ganz schnell zackig durch.
Du darfst dann viermal, darfst du weitersagen
und die anderen, da nerve ich dich einfach so lange,
bis du uns eine Antwort gibst.
Wenn du nochmal weitersagst,
dann haben wir jetzt den Buzzer, den der Freddy vermisst hat.
Und genau.
Oder wenn du einfach was sagst, was keine Antworten ist, dann.
Genau, Konstantin.
Naja, das können wir nicht entscheiden, was eine Antwort ist.
Naja, eins von beidem muss eine Antwort sein.
Wenn was anderes kommt, dann ist, äh, zählt nicht.
Dann muss man nicht so streng sein.
Wir haben jetzt sogar ein Soundbett für drunter.
Nein, nein, der Witz ist, wenn keine richtige Antwort kommt,
stelle ich die Frage so lange, bis die Antwort kommt.
Okay, alles klar.
So ist das bei einem anderen Podcast und ich finde das eigentlich ganz gut,
weil es ist dann sehr nervig, wenn man das zum dritten Mal hört,
kurz nacheinander, irgendwann hat man keinen Bock mehr an Antworten.
Alles klar.
Genau, also, Konstantin, du zählst die weiters.
Und machst dann gegebenenfalls den Buzzer.
Okay.
Ich glaube vier.
Ja, ich sag jetzt einfach mal vier.
Genau.
Gut, dann fangen wir ganz einfach an.
Los geht's.
Also, los geht's.
Katze oder Hund?
Katze.
Die Musik?
Weiter, weiter, weiter.
Oh Gott.
Ich bin überrascht.
Moment.
Spotify oder Apple Music?
Spotify.
Papier oder E-Book?
Papier.
Besitzen oder Streamen?
Streamen.
Im Team oder alleine?
Im Team.
Agil oder mir doch egal?
Mir doch egal.
Scrum oder Kanban?
Kanban.
Dark Mode oder Light Mode?
Light Mode.
Die Musik macht mich fertig.
RGB oder Hex?
RGB.
RGBA oder HSLA?
RGBA.
UX oder CLI?
UX.
Design oder Performance?
Performance.
Pixel oder Vektor?
Pixel.
Mate oder Eistee?
Eistee.
Pepsi oder Coke?
Coke.
Coke Zero oder Coke Light?
Coke Zero.
Google oder Facebook?
Google.
YouTube oder Vimeo?
YouTube.
WhatsApp oder Signal?
Signal.
Signal oder Threema?
Signal.
Chrome oder Firefox?
Chrome.
Chrome oder Edge?
Chrome.
Safari oder Firefox?
Firefox.
Firefox oder Lynx?
Firefox.
Safari oder IE6?
IE6.
Nano oder VI?
VI.
E-Mex oder VI?
VI.
Passwort oder SSH-Key?
Ähm, Passwort.
Luke oder Han?
Han.
Jeder nimmt Han.
Schokolade oder Vanille?
Vanille.
Vanille oder Framework?
Vanille.
Vanille oder TypeScript?
Vanille.
TypeScript oder CoffeeScript?
TypeScript.
Angular oder React?
React.
React oder Vue?
Oh, das wird echt lang.
Vue oder Svelte?
Svelte.
SPA oder SSR?
SSR.
Gemütlich oder schnell?
Gemütlich.
Caching oder Preloading?
Caching.
Performance Budget oder Budget Performance?
Performance Budget.
Head oder Body?
Head.
Synchron oder Asynchron?
Asynchron.
JavaScript oder kein JavaScript?
Kein JavaScript.
JavaScript oder Java?
JavaScript.
PHP oder Perl?
PHP.
Ich überspringe ein paar.
Mac OS oder Linux?
Puh, Mac OS.
Steve oder Linus?
Steve.
Gates oder Barmer?
Gates.
Zuckerberg oder Bezos?
Bezos.
Bezos oder Trump?
Bezos.
Okay, gut.
Das ist geschafft.
Kein einziges Mal weiter.
Die Musik hat nicht der ganze Bier gemacht.
Die müssen wir nächstes Mal ein bisschen leiser machen.
Ich dachte, das ist zu einfach.
Wir müssen noch mehr rausbringen.
Wirklich, das ist so ein richtig, wer mit Millionär-Vibe.
Sehr gut.
Ziel erreicht.
Wow.
Ich glaube, wir müssen auch ein bisschen kürzen.
Wir müssen, wir können schnell.
Ja, ich glaube auch, das weiß tatsächlich viel.
Das war tatsächlich viel.
Beschleunigen einfach ein bisschen.
Genau.
Machst einfach, äh, machst einfach ein bisschen Chipmunk-Stimmen draus.
Genau.
Gut.
So, dann kommen wir zu ...
Zu.
Hier ist WWS IV mit dem Tagesthema.
Ja, Mensch, das Tagesthema, das ist eigentlich der Shep, aber auch Performance.
Und wir fangen mal mit dir an, weil jetzt haben wir so ein bisschen Entweder-Oder gespielt.
Woran arbeitest du gerade?
Eigentlich an gar nichts so furchtbar spektakulärem, einem Online-Shop.
Also an einem Online-Shop wirklich mit im Frontend.
Und der ist klassisch aufgebaut.
Wir haben ja eben die, äh, die Fragerunde gehabt, wo du auch gefragt hast nach SPA oder SSR, also Server-Side Rendering.
Das habe ich ja auch geantwortet, ähm, weil ich einfach, also vielleicht auch,
durch, einfach durch die Umstände so in dem Bereich eigentlich, äh, mehr immer schon unterwegs war und auch nach wie vor bin als, äh, mit SPAs.
Also die habe ich durchaus auch gebaut, ähm, ähm, auch mit verschiedenen Frameworks, wie man ja bei den Framework-Fragen vielleicht auch rausgehört hat.
Ähm, ähm, genau.
Und die sind auch, äh, cool.
Ähm, aber am Ende, vielleicht auch, weil ich so ein Performance-Nazi bin, ähm, ist Server-Side Rendering einfach so für mich das, das einzig wahre.
Genau.
Und ansonsten, ähm, unterstütze ich auch immer noch ein bisschen die Rheinische Post.
Das ist diese große Nachrichtenseite, wo ich vorhin die, äh, die Firefox-Statistik rausgefischt hatte.
Genau, ähm, die, äh, bei denen habe ich, äh, stark mitgewirkt zuvor.
Und, äh, seit Anfang 2020 bin ich da sozusagen, äh, äh, nur noch so begleite ich die nur noch, äh, bin da zum Gebrainpicktwerden von, äh, von meinen Nachfolgern, die da sind und, äh, auch zum, zum Beraten und, und unter anderem bei Performance-Fragen.
Das ist rp-online.de?
Genau.
Also ich habe da gerade mal drauf rumgeklickt von der Nachrichtenseite, äh, wirklich sehr schnell.
Also hat mich jetzt gerade überrascht.
Also ich, ich hätte jetzt so mit ein bisschen Bedenkzeit von der Seite, also ich meine, da ist ja auch wirklich viel Content drauf auf so einer Seite, ähm, ist aber echt flott so zacki-zacki hin und her geklickt.
Erstaunlich.
Also, äh, klappt doch, die ist schon ganz gut geworden.
Ja.
Also da gibt's noch so ein paar, äh, Dinge, die man, äh, besser machen könnte, die aber, die sich, äh, nicht mehr mit Frontend, äh, Know-how irgendwie da rausquetschen lassen.
Dickere Server.
Ja.
Zum Beispiel, das, das, äh, hilft ja angeblich immer, nein, das stimmt nicht, ähm, bei manchen Sachen muss man dann doch, äh, sich ein bisschen anstrengen mit dem Frontend.
Genau, äh, cool.
Okay, ähm, dann, äh, wollte ich noch fragen, äh, wie sieht denn dein Setup gerade aus? Also was für einen Rechner hast du? Monitore, Gadgets, Tooling?
So, musst du auch nicht alles beantworten, sondern was dir jetzt halt so einfällt, was so vor dir steht, womit du arbeitest.
Genau, also, äh, vielleicht, äh, passend zu, äh, zu, äh, äh, zu der Tatsache, dass ich eben gegen den, äh, ähm, SPA-Strom schwimme, schwimme ich auch, was meine Plattform angeht, gegen den Strom.
Also ich bin immer schon Windows-User gewesen, aber du bist das auch, ne, Konstantin, oder?
Genau, Windows-User, ja. Hatten das schon öfter mal drüber, ja.
Also wir sind ja so die Paradiesvögel, die dann auf so Konferenzen ihre, äh, ihre nicht silbernen Rechner aufklappen, wobei meiner ist auch silbern.
Ja.
Also.
Genau, ähm, ich, äh, bin ein großer Fan der Dell-XPS-Serie, ähm, und da halt die 13-Zoller, die finde ich super, ähm, und hab mich auch so, sagen wir mal, wieder runtergehungert von zwei Monitoren auf einen externen Monitor,
auf, äh, viel Arbeit nur noch auf dem 13-Zoll-Display, ähm, genau, und das, das geht auch, ähm, Hintergrund ist einfach der, dass, dass ich, äh, auch aufgrund von Familie und so, dann, da ist man, da arbeitet man, wo man gerade irgendwie einen Sitzplatz findet, äh, drin oder draußen, ähm, und dann, äh, jammert man sonst einfach die ganze Zeit nur rum, wenn man dann wieder, ja, ohne meine tolle super Maus mit optischer Abtastung und, oder mein, äh, Curved Monitor kann ich nicht
arbeiten, so kann ich nicht arbeiten, so, dieses Problem, das hat man ja dann dauernd, und, ähm, das hab ich halt eben nicht mehr.
Genau, ansonsten.
Sehr gut Related dazu gerade, weil ich ja zwangsweise gerade immer noch am Laptop unterwegs bin, aber mir ging's jetzt genauso mit diesem Arbeitsurlaub, war das halt echt einfach so, ich hatte alles dabei, alles war eingerichtet, weil ich sowieso an der Kiste sitz und ich hab das Ding eingepackt, hab's dort ausgepackt und hab dort weitergearbeitet, also.
Die Wahrheit ist, es ist nicht zwangsweise, es ist selbst gewählt.
Selbst verschuldet, ja.
Das will er nur nicht, das will er nur nicht wahrhaben.
Ja, ja, ja, das haben wir im Stream schon breit getreten, das müssen wir nicht ja auch noch.
Ja, das müssen wir öfter mal, das muss, ich, ich trete so lange breit, dass sich was tut, das muss ein bisschen wehtun.
Bald, ganz bald.
Ja, ja, das spüren den Finger in den Mund gelegt.
Seit dem Dreivierteljahr.
Ja, naja, also, genau, dein Desktop-Rechen ist kaputt, ne, so war das.
Ja, genau, schon viel zu lange, aber ich hab mich jetzt echt dran gewöhnt, also es geht, wie du sagst, es geht und ich vermisse jetzt auch die Monitore jetzt nicht unbedingt, also klar, manchmal denke ich schon, wenn ich das jetzt noch hier rüberschieben könnte, also so einer mehr wäre schon ganz gut, ich könnte die auch einfach anschließen, aber ist ja halt auch so eine Geschichte.
Ich würde auch mal im Laptop gehen.
Ja, es gibt ja diese rare Momente, wo ich dann auch tatsächlich meinen externen Bildschirm dran habe, so wie jetzt, also jetzt hab ich hier meine Stichworte hier für die Sendung auf dem einen Screen und euch hier per Video auf dem großen, das ist natürlich dann, das genießt man dann tatsächlich auch mal, sowas zu haben, aber genau, das lass dich nicht einreißen, sonst fang ich das Jammern wieder an.
Genau, und sonst bin ich ein JetBrains-Mensch, einfach, ich bin halt auch so jemand, ich hab keine Lust, mir dauernd irgendwie neue Tools drauf zu schaffen, nur weil die gerade gehypt werden, wenn die dann gut abgehacken sind, dann mach ich das schon mal, aber ich hab da keine Zeit für, also da muss man natürlich immer aufpassen, dass man den Moment findet, wo das irgendwie Käse ist und man das dann doch tun sollte.
Ja, aber das ist einfach, das ist genauso, wenn ich jetzt ein Mac hätte, ich könnte mir jetzt ein M1 Mac holen und die sind ja Bombe, alles cool und Mac ist auch super, ich hab nichts gegen Macs, aber bis ich dann da alles wieder zusammen hab, das dauert dann so lange, da bin ich einfach, da lieg ich wie so ein Schildkröte auf meinem Rücken für ein paar Wochen und da hab ich einfach keine Lust drauf, auf die Phase.
Wenn's reicht.
Ja, ich hab die Transition jetzt gerade hinter mir oder bin noch drin und ich such immer noch, hab ja vor kurzem irgendwie auch mal drüber getwittert, bestimmte Zeichen auf der Tastatur, weil sie einfach nicht drauf sind und man sich die neuen Shortcuts merken muss, dass da knabber ich immer noch dran seit einem Jahr jetzt, also, der kann ich schon verstehen, wenn man sagt, ich will lieber in dem bleiben, wo ich bin und da bin ich schnell und wieso sollte ich denn was Neues lernen? Funktioniert doch, kann ich absolut nachvollziehen.
Ja. Außer wenn ich mit Konstantin drüber rede, da bin ich strenger.
Ja, ja, ja, ich wollte gerade sagen, Mensch, klingst du entspannt.
Das ist, äh, das kommt auf den Klienten an, mit dem ich rede.
Ja, das ist das Leben, äh.
Wollte ja, dass der Chef nochmal kommt, der muss mal nett sein.
So, so, so, so ist das.
Ja, auf jeden Fall.
Nee, aber es ist ja alles auch besser geworden unter Windows, also das war ja mal echt nicht cool und selbst da, also mit den richtigen Tools, ähm, ausgerüstet,
ist, geht das auch problemlos, äh, das sind einfach so, so Dinge, die man wissen muss und wenn man die dann einmal weiß, dann macht man es halt immer wieder, ähm, genau, aber jetzt, äh, so, es gibt ja immer mehr, äh, Entwickler-Support auch für die Windows-Plattform wieder, auch dank Microsoft und so, das ist schon ganz cool.
Was ich allerdings bei den, bei den Macs, also wo ich da super neidisch bin, das hätte ich auch gerne, ist, äh, einfach seinen Rechner auf einen anderen draufklonen.
Also das verstehe ich nicht, warum das bei Windows so ein Problem ist.
Ist, ja, ich weiß es gar nicht genau.
Ist das, ich hab das noch nie versucht unter Windows.
Also du meinst jetzt wirklich sowas wie, äh, ich nehm jetzt die Festplatte und schraub so woanders rein und dann läuft es so ungefähr oder meinst du jetzt mit Time Machine diese Backups?
Das würde noch sogar gehen.
Nee, also du kannst ja auch so zwei Macs einfach mit so einem Thunderbolt-Kabel oder früher Firewire oder so zusammenstöpseln und dann, äh, sagst du einfach hier, äh, spiel alles auf die neue Kiste rüber.
Das wusste ich gar nicht, dass das geht.
Ha, gut zu wissen, wenn ich dann mal, jetzt um, wenn ich mir den neuen, das neue MacBook Pro kaufe, nein, mach ich wahrscheinlich nicht, aber.
Du kannst ja sogar, äh, dein, äh, ein Mac als externe Festplatte an dem anderen Mac benutzen.
Also du, damit, du kannst quasi dein, ein Mac vom anderen Mac booten.
Das geht sogar wohl auch.
Das muss ich jetzt gleich dann im Anschluss mal ausprobieren.
Die Kabel hab ich dafür da.
Das ist ja, ich hoffe, ich mach da nichts kaputt, aber, um Gottes Willen.
Ich hab, ich hab hier zwei Macs stehen, also, äh, ich könnte das jetzt mal, könntest du mal machen.
Aber ich, nee, ich hab ein bisschen, ich hab ein bisschen Angst davor, ehrlich gesagt, weil ich bei beiden nicht will, dass irgendwas kaputt geht.
Das wär bei beiden echt blöd.
Weil dann, ich würde sagen, ich hab nicht noch einen Dritten.
Wir rufen einfach eure Hörer dazu auf, das auszuprobieren und zu berichten, oder?
Das ist gut, ja.
Genau, ich finde, das Risiko sollte man woanders hinschieben. Probiert das doch mal aus.
Schreibt es in die Kommentare.
Oder, wenn ihr nix schreibt, dann wissen wir, dass es schiefgegangen ist.
Stimmt.
Schreibt, während ihr das macht, in die Kommentare.
Und wenn die abbrechen zwischendrin, dann ...
Genau, vorher, genau, vorher.
Und dann sagen, wenn ich jetzt nicht nochmal schreibe, dann ist es schiefgegangen.
Ja, mega.
Genau, das finde ich gut.
Dann kommen auch ein paar mehr Kommentare zusammen.
So eine Todmann-Todfrau-Schaltung in den Kommentaren.
Genau, perfekt.
Auf PC gibt's übrigens den Lapplink-PC-Mover, Konstantin, falls du das mal irgendwann machen musst.
Der ist so immer mein letzter Rettungsanker.
Muss man zwar immer 50 Euro blechen.
Ach, jedes Mal bei jeder Nutzung.
Ja, ja.
Ja gut, aber das ist auch Schlauch wert, ja.
Genau.
Ja, und ansonsten, wenn ich nicht irgendwie ... Also ich habe so eine leichte Tendenz zum Fullstacken.
Also ich kann PHP und MySQL und so, aber ich verrate es keinem und möchte damit auch nicht belästigt werden.
Aber im Zweifelsfall öffne ich dann auch mal so die untere Etage, Tür und fummel da drin rum.
Genau, und ja, wenn ich dann noch ein bisschen Zeit habe, dann bin ich auch an einem Podcast beteiligt.
Genau.
Wir haben uns ja schon öfters mal krossreferenziert.
Hört rein, Working Draft, sehr guter deutscher Web-Developer-Podcast.
Gibt's schon viel länger als uns und haut eine Sendung pro Woche raus, konstant seit vielen Jahren.
Viel, viel regelmäßiger als wir.
Großen Respekt davor, das finde ich echt stark.
Das schaffen wir nicht.
Ich meine gut, wir sind auch in Anführungsstrichen nur zu zweit, aber ich glaube, wenn wir jetzt noch zwei von uns hätten, wären wir trotzdem genauso unstet, weil wir halt ...
Oh je, das wäre ja noch schlimmer.
Weil wir so unsuverlässige Typen sind.
Ihr macht alle zwei Wochen, oder?
Planmäßig, ja, aber es klappt auch nicht immer.
Planmäßig, ja, es klappt nicht immer.
Also wir haben manchmal, ich meine, wenn dann einer krank ist, dann müssen wir irgendwie gucken.
Wir produzieren halt auch nicht vor.
Also ich glaube, das habt ihr auf jeden Fall schon mal gemacht.
Ich meine, mich zu erinnern, dass irgendwie schon mal gesagt wurde, ja, Aufnahme.
Und da dachte ich so, hm, aber das, was ihr jetzt veröffentlicht habt, das war ja gar nicht das, worüber ihr gesprochen habt.
Ja, manchmal sind wir tatsächlich, also das war dann zu einer Zeit, wo wir irgendwie mit dem Postproduktion irgendwie nicht hinterherkamen.
Dann hatten wir halt so quasi ein größeres Backlog noch an aufgenommenen Folgen, die wir dann weggearbeitet haben.
Aber dann passiert halt auch schon mal sowas, dass dann irgendwie alle keinen Bock, krank, irgendwelche faulen Ausreden, was weiß ich.
Und dann weiß man ja, dass, oh, wir haben ja einen Backlog, ja, dann müssen wir heute keine Sendung aufnehmen, so.
Und dann, so arbeitet man das Backlog dann wieder ab, bis dann irgendwann man keine faulen Ausreden mehr hat, weil das Backlog eben nicht mehr existiert.
Und man dann leerlaufen würde, wenn man das jetzt noch einmal machen würde.
Genau, aber wir machen nicht so tatsächlich, dass wir machen, machen jetzt nicht, dass wir irgendwie an einem Tag acht Folgen aufnehmen und die dann irgendwie dann nach und nach releasen oder so.
Das ist dann, das ist schon so, dass wir uns eigentlich auch einmal die Woche nur zusammen, sag mal, telefonieren.
Genau, ja, gut.
Haben wir auch noch über Working Draft gesprochen, sehr gut.
Genau, wir hatten jetzt gerade dein Setup.
Ich glaube, wenn du jetzt da nichts mehr hast hinzuzufügen, also ich habe jetzt da keine weiteren Fragen.
Das ist so, ich kann es mir jetzt ungefähr ganz gut vorstellen.
Dann können wir mal noch über, bevor wir mit Performance anfangen, hätte ich noch eine Frage, genau, zu DOM-Tree-Map.
Das ist nämlich ein Plugin, was du gebaut hast, was ich echt sehr nützlich finde.
Und da würde mich interessieren, wie du drauf gekommen bist, das zu bauen und wie man sowas baut.
Ich habe noch nie ein Browser-Plugin gebaut.
Vielleicht erzähl dir kurz, was das macht, weil ich kenne es nicht.
Ah, ja, dann fang doch mal damit an.
Und vielleicht auch der ein oder andere Hörer oder Hörerin auch nicht.
Ja, also das hat auch einen Bezug zu Performance, nämlich zu der Render-Performance des Browsers.
Ihr kennt das vielleicht, dass ihr so ein Lighthouse-Audit macht und dann sagt er euch, ihr habt viel zu viele DOM-Notes auf der Seite.
Das habe ich heute gemacht und wir haben viel zu viele DOM-Notes auf unserer Seite, Konstantin, wollte ich dir noch sagen, nämlich über tausend auf der Startseite.
Aha.
Genau, und ich glaube, dass der Lighthouse gibt einem dann ja noch so gütigerweise so einen Hinweis, wo quasi die Stelle ist, wo der DOM-Baum sozusagen am tiefsten runtergeht, sozusagen der Marianengraben der Webseite.
Sehr gut.
Aber das alleine ist halt so okay.
Und ich hätte halt gerne ein bisschen mehr Unterstützung seitens des Browsers gehabt, dass ich eben sozusagen explorativ meinen DOM sozusagen durchstreifen kann und er mir dann anzeigt, guck mal, hier ist ein hoher Berg und da ist ein hoher Berg und so.
Also da, also da musst du gucken gehen, da kannst du, findest du viele DOM-Notes und HTML-Elemente, da kannst du mit der Schippe aufräumen gehen und in der anderen Ecke da, wo halt eine Ebene ist, nicht.
Und genau, ich hatte dann irgendwann die, ich glaube, die Chrome-DevTools-Menschen oder die von verschiedenen Browsern angepingt, unter anderem auch, glaube ich, Microsoft, weil die momentan, wir haben es ja eben schon einmal gehört, sind die so ein bisschen, sagen wir mal, offener für so Vorschläge.
Und ich hatte auch den Entwickler des Polypain-Browsers gefragt, ich weiß nicht, ob ihr den kennt, das ist so ein, also auf Chromium basierter Browser, der extra für eben Frontend-Entwicklung gedacht ist mit, du kannst verschiedene View-Prows.
Ich habe mich jetzt gerade so kurz zum ersten Mal gehört, dass es den gibt in dem Accessibility-Workshop mit Manuel Matusowitsch, hat er das erwähnt und da habe ich mir auch gedacht, den muss ich mir mal angucken.
Ich glaube, das ist ein echt interessantes Ding.
Genau.
Kostet allerdings, glaube ich, Geld, ne?
Genau, der kostet Geld.
Aber der ist, also dafür braucht man einen großen Monitor tatsächlich, weil man kann da eben sehr viele View-Ports nebeneinander aufmachen.
Also ich finde den gut und auch der Mensch, der den entwickelt ist, super und macht, haut out down, neue Releases raus.
Jedenfalls, den hatte ich auch angeschrieben und dann irgendwie haben die alle gesagt, so ja, interessant und so, müssen wir mal gucken, könnte ich mal versuchen reinzuhacken und dachte ich, ja, kann ich aber auch selber als Plugin vielleicht mal bauen.
Und dann habe ich mich eben damit beschäftigt, wie baut man überhaupt Browser-Erweiterung und tatsächlich ist das gar nicht so gut dokumentiert, wie man das vielleicht erwarten würde, insbesondere für große Browser wie Chrome.
Und es gibt auch verschiedene Versionen dieser Browser-Extension API, die nennt man das, ich glaube, Manifest, nennen die das einfach nur.
Und die, es gibt eine, die ältere ist halt Callback-basiert und die neuere ist Promise-basiert und die neuere benutzt auch Serviceworker.
Und dann habe ich eben die neuere genommen und das war auch in Ordnung.
Ich habe dann irgendwann in so GitHub-Repos, glaube ich, von Eddie Osmani so ein paar Schnipsel gefunden, die ich mir klauen konnte, wo ich dann irgendwie Hinweise bekomme, wie, jetzt hat jemand ein neues Element selektiert.
Oder, und dann gehst du halt hin und injectest quasi ein Script in die eigentliche Seite, die dann die Dom-Notes da abklappert, dir das zurückmeldet.
Und dann kannst du das eben rendern mit so einem D3-JS-Ding, habe ich das, rendere ich dann quasi so eine Tree-Map.
Genau, und das war dann okay.
Und dann wollte ich das Ganze, dann dachte ich, ja, hier, ich, ich werde Firefox jetzt nicht auch noch bashen.
Ich portiere das natürlich zu Firefox auch noch rüber.
Und da stellte ich dann fest, ah, okay, Firefox unterstützt, also die unterstützen so quasi dieselben Dinge, Pi mal Daumen, aber Firefox unterstützt halt nur V2.
Also die Callback-basierte Geschichte.
Und dann musste ich das alles eben nochmal rückportieren.
Genau, und jetzt haben sie gerade den V3-Support sozusagen öffentlich gemacht.
Und die Chrome-Leute haben auch gesagt, dass sie V2 abschalten wollen.
Das heißt, jetzt müsste ich eigentlich demnächst hingehen und das wieder, wieder sozusagen in die Moderne zurückportieren.
Genau, aber der Quelltext liegt auch auf GitHub.
Also da könnt ihr reingucken.
Und da ist es relativ trivial.
Also es ist jetzt gar nicht so viel.
Das Problem ist wirklich einfach, dass es undokumentiert ist und dass man einfach lange vielleicht auf Stack Overflow zum Beispiel suchen muss, um so seine Hinweise zusammen zu puzzeln.
Und dann aber teilweise auch veraltete Sachen dann wiederfindet, die dann halt doch nicht mehr so funktionieren, weil irgendeine Browser-AP dann abgeschaltet wurde.
Weil ich habe nämlich auch schon zweimal den Versuch gewagt, eine Extension zu entwickeln, so für interne Zwecke was.
Und genau das gleiche Problem, ja.
Erstens, mit welcher Version mache ich es jetzt?
Und dann wieder ewig gesucht und dann alte Sachen gefunden und genau so eingefügt, aber es funktioniert einfach nicht.
Und wenn man Glück hat, steht dann irgendwo in dem Kommentar unten drunter, ja, das geht jetzt nicht mehr, man muss es jetzt so machen.
Und wenn man Pech hat, dann muss man halt selber weitersuchen.
Ja, da hast du ja ganz schön viel Arbeit gemacht.
Ja, ich habe es jetzt gerade mal installiert.
Ich bin gespannt, das Ergebnis mal anzuschauen.
Ich habe es jetzt gerade mal noch schnell installiert, also nochmal, ich dachte, ich hätte es eigentlich schon.
Das war wahrscheinlich auf meinem Arbeitsbrowser, auf dem Arbeitsrechner.
Und ich wollte jetzt gerade nochmal vielleicht für unsere Hörer und Innen nochmal kurz beschreiben, was das überhaupt ist und wo ich das finde.
Also wenn ich das installiert habe in Chrome jetzt beispielsweise, dann finde ich das in den Dev-Tools in dem Bereich, wo auch zum Beispiel die Styles beim HTML angezeigt werden.
Da ist dann so ein extra Reiter DOM-Tree-Map und da kann ich dann quasi auf so farblichen Quadraten bzw. Rechtecken mich durchklicken.
Also ich kann, ich habe jetzt zum Beispiel mal einfach Google aufgemacht, da habe ich jetzt ein riesiges, großes, blaues Quadrat und ein ganz, ganz, ganz kleines, orangenes irgendwie unten drunter nochmal.
Und wenn ich auf das große jetzt mal drauf drücke, dann gehe ich da quasi eine Ebene rein.
Vorher stand da, dass das 102 Kind-Elemente hat.
Wenn ich da reinklicke, dann teilt sich das auf in mehrere und dann habe ich so quasi so eine Darstellung aus Rechtecken in verschiedenen Farben, wo immer jeweils steht, wie viele Kind-Elemente da drin sind und kann mich da so einmal durchnavigieren.
Ja, das ist eigentlich eine ziemlich sehr gute visuelle Darstellung von den DOM-Notes und dann sieht man auch tatsächlich, glaube ich, ziemlich gut, sehr schnell, wo liegt denn der Marianengraben.
Ich weiß, wo er bei uns bei der Podcast-Seite ist. Es ist nämlich in SVG. Ich glaube, das ist wahrscheinlich gar nicht so selten. Aber ich glaube, so extrem tief geht es nicht. Ich glaube, unser Problem ist eher insgesamt die Anzahl der DOM-Notes, weil wir halt kein Paging haben auf unserer Startseite und alle Folgen da untereinander aufgelistet werden.
Genau, aber wir werden ja gleich auch noch über Performance sprechen und da werden wir auch da ein paar Dinge besprechen, die das vielleicht auch unnötig machen, dass ihr da abspeckt.
Oha, das ist super.
Habe ich mal gespannt.
Ansonsten noch der Hinweis, also die Nodes sind ja, sind tatsächlich DOM-Elemente, aber Nodes sind ja auch Text-Nodes, also Dinge, die man sozusagen nicht, die müssen ja auch gerendert und gelayoutet werden, darum, die zählt ja dann mit.
Und es gibt noch ein weiteres eingebautes Tool für alle BEM-Affinitiados, also alle, die eben Block-Element-Modifier-CSS schreiben.
Da kriegt man im Prinzip auch wieder eine Tremap. Das befindet sich dann aber so quasi in der normalen DevTools-Tab-Reihenfolge.
Da bekommt man sozusagen in der Tremap die ganzen BEM-Komponenten gezeigt und da siehst du dann, okay, weiß ich nicht, der Slider, der WWSCV-Slider, der, puh, der hat echt viele DOM-Nodes, den muss ich mir nochmal angucken.
Oha, das habe ich noch gar nicht gesehen. Wir sind nicht so strikt auf unserer Podcast-Seite mit BEM, aber wir haben durchaus so ein bisschen BEM da drin.
Nicht alles, aber das hätte ich so gar nicht gefunden. Cool. Direkt BEM-Komponent-Stats und dann sehe ich das ganze Ding nochmal. Das ist ja, okay, das ist richtig cool.
Genau, dann kann man der Entwicklerin oder dem Entwickler, der halt die Komponente, die da die Ziellinie reißt, dann kann man dem am Ohr ziehen und sagen, hier, nochmal neu hier mit weniger DOM-Nodes.
Und ich hatte auch geguckt, ob man das irgendwie vielleicht auch für so React-Komponenten irgendwie hinbekommt, aber das ist echt nicht so, nicht so trivial, so da die Boundaries rauszufinden.
Und wenn jemand Tailwind benutzt oder sowas, dann, dann ist das so, geht nicht. Sorry.
Okay.
Genau, wobei auch Tailwind cool ist, also auf seine Art und Weise.
Ich bin da gar nicht, ich finde das gar nicht so schlimm. Ich bin da ja ein bisschen konvertiert worden zu Helferklassen. Ich glaube, da haben wir auch schon mal drüber gesprochen.
Letzten Endes ist es ja quasi, sind ja alles irgendwie, also Utility-Klases oder keine Ahnung, wie man es auch immer nennen will.
Ich fand das eine Weile ganz doof mit dem Argument, ja, da kann ich auch gleich Inline-CSS schreiben und habe das auch manchmal an der einen oder anderen Stelle auch mal irgendwo laut geäußert, auch mal bei einer Konferenz, wo ich einen Vortrag über Tailwind gesehen habe.
Kann das sein, dass die Vanessa mal einen Vortrag darüber gehalten hat?
Kann ich mir vorstellen, ja.
Das ist ja eine Podcast-Kollegin.
Es kann sogar sein, dass das von ihr war, genau aus Working Draft. Es kann sogar sein, dass das da war.
Dann entschuldige ich mich nochmal ausdrücklich hier an der Stelle, weil ich dann, ich bin dann immer mehr in Bootstrap reingerutscht und habe dann gemerkt, die Bootstrap-Helferklassen, so wenn man jetzt am entwickeln ist, also Bootstrap gibt es ja ganz viel irgendwie für Flexbox zu bauen und irgendwie Abstände und so klassische Sachen, die man im Layout irgendwie verwendet.
Und es ist echt bequem, einfach in HTML immer nur ein paar Klassen reinzuschreiben und einfach nur im HTML-File zu bleiben und damit Layout zu bauen.
Es ist echt eine angenehme Arbeitsweise.
Man kann jetzt darüber streiten, ob das dann gut ist, dass ich überall so Elemente mit Important dann am Ende habe, weil das ist diese Bootstrap-Helper, die ballern halt überall drüber mit Important.
Das ist so gedacht.
Aber die Arbeitsweise macht Spaß, tatsächlich, muss ich sagen.
Es nimmt einem so ein bisschen diesen Switch ab, dann immer hin und her zwischen den Files.
Auch wenn ich sie nebeneinander stehen habe, ist es immer so, ich bin in zwei verschiedenen Welten.
Wenn ich einfach nur Klasse reinschreiben muss und weiß, ah ja, ich brauche jetzt hier noch einen Abstand, ungefähr so, dann mache ich mal, okay, MB-3 und dann kriege ich irgendwie so und so viel Pixel großen Abstand.
Und finde ich, es ist eine angenehme Arbeitsweise, muss ich zugeben.
Das war ja auch der Ansatz von diesem Adobe Brackets damals, weiß nicht, ob ihr euch da noch erinnern könnt.
Das hatte ja auch so auf, genau, so ein Web-Editor, der so da ein bisschen aufgetrumpft hat, indem du quasi in place dein CSS zu diesem HTML irgendwie editieren konntest.
Also da konntest du irgendwie so, dir das so quasi rüber beamen, da so rein, kurz einmal aufmachen.
Ja, das war das Feature, womit die groß geworben haben. Stimmt, ich konnte an dem HTML quasi das CSS dazu aufklappen, wenn ich mich noch richtig erinnere.
Ja, das, warum haben wir das eigentlich nicht?
Warum haben wir das eigentlich nicht?
Ja, aber das, ich meine, ja, keine Ahnung, das war ja Teil dieser ...
Da haben wir ja ein Patent drauf, dass es keiner andere einbauen darf, aber die Idee ist ziemlich gut.
Nee, ja, hat Adobe aber leider ja wieder einen Nagel gehängt.
Ja, ich meine, das ... Also, liebe Zuhörer und Zuhörerinnen, bitte ein VSCode-Plugin dafür schreiben, bitte danke.
Ich benutze es dann und ich bewerte es sehr gut und ich werde, wir werden es hier im Podcast dann besprechen und Werbung dafür machen.
Also schon mal ...
Oh, bewerten, da ist mir aufgefallen, dass deine Extension noch gar nicht, noch keine Bewertung hat, noch kein Review.
Nee?
Das müssen wir ändern.
Ich dachte, irgendwelche Menschen hätten ein Sternchen gegeben.
Ja, also bei mir stand da noch null.
Bei mir steht null, ja?
Ja, stimmt.
Dann melde ich mich doch direkt mal an.
Vielleicht, dass du auch gesendet nach einem Monat oder so.
Das werden wir ändern.
Ja, richtig.
Also, hier direkt fünf Sterne, was?
Aber man sieht doch die Menge User, glaube ich, die das installiert haben, oder?
1000 plus, ja.
Aber noch keine Sternchen und eine Null neben den Sternchen.
Ich weiß aber auch gar nicht, wo man es hier ... Also, ich sehe auch gar nichts zum Bewerten.
Ich kann es nicht, ich kann die Sterne nicht anklicken.
Ich bin jetzt eingeloggt.
1000 plus Nutzer steht da.
Ich kann aber, vielleicht hat es keine Bewertung, weil die Bewertungsfunktion kaputt ist.
Ja, das kann das nicht sein.
Vielleicht habe ich die auch aus Versehen nicht irgendwie, vielleicht hätte ich das irgendwo eintragen müssen.
Das, genau.
Aber dann war es bei Firefox, genau.
Da gibt es ja, da gibt es auf jeden Fall vier Bewertungen, die sind auch fünf Sterne.
Also, finden die Leute wohl gut.
Ich finde es auch gut.
Ich würde sofort fünf Sterne geben im Chrome Web Store, wenn es ginge.
Es geht aber nicht, es ist ausgetraut.
Das ist doch Sabotage.
Ich glaube auch, die haben sich geärgert über deinen Anfragen.
Die View-Dev-Tools kann ich auch nicht bewerten.
Also, ich kann hier nirgends was hinabringen.
Ja, toll.
Und dann, also jetzt, wenn ich da reingucke, da kriege ich die Krise.
Jetzt gucke ich in den Code rein, um zu gucken, ob das irgendwie disabled ist.
Sogar Are They Hidden True?
True haben sie auf dieses Bewertungs-Sternchen.
Das ist komplett versteckt.
Also, es scheint deaktiviert, aber dann gucke ich da rein und sehe, naja, das ist jetzt natürlich Diff-Suppe mit irgendwelchen generischen Klassen und SVGs da drin.
Das kann man so elegant machen mit Radio-Buttons.
Es gibt so eleganze Varianten.
Schau mal, du kannst, wenn du da auf dem Dings bist, dann bist du erst auf der Übersichtsseite.
Dann gibt es Umgang mit dem Datenschutz und dann Meinungen.
Und wenn du da drauf gehst, dann kannst du da was machen.
Oh, das ist ja extrem versteckt.
Ja, cool.
Okay, gut, da kann ich, das weiß ich, warum, das findet keiner, wie man bewerten kann.
Ja.
Und das sind trotzdem auch irgendwelche komischen Diff-Elemente.
Da darf man einfach nicht reingucken.
Super.
Eh nicht.
Ich gucke als Entwickler übrigens ganz selten in den Quelltext von anderen Zeiten rein.
Also, ihr könnt mir alles andrehen, ich würde es wahrscheinlich nicht merken.
Letzten Endes ist es ja, ich habe das früher extrem viel gemacht, wirklich exzessiv.
Auch, das ist halt so aus so einem jugendlichen, ich kann doch bestimmt irgendwas besser als du Gedanken,
weil man sich da irgendwie gut fühlen will.
Und dann will man einen Fehler beim anderen finden, wo man dann sagen kann, ha, guck mal hier.
Aber mittlerweile bin ich eigentlich immer froh, wenn es einfach nur funktioniert und nicht kaputt ist.
Ja, und guck, eigentlich selten.
Ich habe es jetzt nur, ich wollte jetzt nur wissen, ich wollte jetzt irgendwie darauf Rückschlüsse ziehen,
ist das Ding deaktiviert?
Also sehe ich da irgendwie eine Deactivated-Klasse oder sowas, um sehen zu können,
ist es jetzt irgendwie bewusst deaktiviert oder hat es irgendeinen anderen Grund?
Und jetzt wissen wir ja, schlechte UX, man sollte es nämlich eigentlich da direkt bewerten können
oder zumindest sollte da ein Link sein auf die Meinungen-Seite, aber na gut.
Ich finde meine eigene Rezension sehr nützlich, muss ich sagen.
Kann man hier mich auch anklicken.
Na top.
So, hast du deine ersten fünf Sterne bekommen im Chrome Web Store.
Ja, sehr gerne.
Nee, es ist wirklich, es ist ja eine gute Extension.
Keine Frage.
Gut, meine Güte, ich habe gerade auf die Zeit geschaut.
Oh ja, nicht so effizient, oder?
Also die nachfolgenden Sendungen verzögern sich um circa zwei Stunden.
Aber es war ein gutes Zeichen, wir unterhalten uns halt nicht.
Ja, hervorragend.
Also ich habe ja Angst gehabt, immer denkst du, oh ja, weiß nicht, wie läuft das dann?
Und dann treibt man noch lieber ein paar Themen extra auf, falls man irgendwie nichts zu reden hat oder so.
Ich meine, da habe ich jetzt eigentlich bei dir keine Angst gehabt.
Ich meine, du bist ja Podcast erfahren, machst das ja viel länger als wir schon, aber weiß nicht.
Ich finde es großartig.
Das schöne Phänomen bei den Podcasten ist ja, wir denken das ja auch immer.
Also wir denken ja auch immer, oh je, wir haben überhaupt gar keine Themen.
Und dann kommen, nehmen wir das Thema, dann schaffen wir vielleicht so eine Viertelstunde, 20 Minuten darüber zu quatschen.
Und dann eskaliert das und nach einer Stunde machen wir dann mal Feierabend.
Das ist normal, ja.
Ganz normal. Also so ist dieser Podcast ja gestartet. Also bevor es überhaupt den Podcast gab, war es so, Konstantin und ich sitzen, ich weiß es noch genau, sitzen auf seinem Balkon und quatschen und quatschen darüber, man könnte doch mal einen Podcast machen.
Stundenlang. Und dann so, ja, wenn man jetzt ein Mikrofon nebendrang gestellt hätte, hätten wir schon die erste Folge gehabt, so ungefähr.
Und ja, das, also das geht uns auch so. Also wir reden auch manchmal vor der Sendung lang und danach noch und es nimmt gar kein Ende. Vielleicht sind wir einfach Quatschköppe und deswegen machen wir wahrscheinlich auch einen Podcast, nehme ich mal an.
Ja, aber man muss ja auch sagen, ihr twitcht ja auch noch, macht ja noch ein paar mehr Sachen, sodass ihr wahrscheinlich am Ende auch auf eine Folge pro Woche an Content kommt.
Das stimmt tatsächlich, so habe ich das noch nie gesehen. Unsere Folgen sind, glaube ich, tendenziell länger als eure, ja. Aber auch nicht immer. Wir haben auch mal eine kurze zwischendrin, aber so die eineinhalb Stunden Marke, die reißen wir meistens.
Ja, ja, auf jeden Fall. Obwohl, jetzt haben wir nicht mehr geschafft seit einem Jahr oder länger.
Aber da gibt es auch keine perfekte Zeit. Es gibt Leute, die finden es kurz gut. Es gibt Leute, die finden es lang besser. Hängt wahrscheinlich auch vom Commute ab, den man damit irgendwie überbrücken muss.
Ja, genau. Das ist ein echt dickes Thema. Wir schon öfter Ärger gekriegt haben, ja, eure Folgen sind zu lang. Und ich sage, was, wie zu lang? Ja, ich fahre halt so und so lang von A nach B zur Arbeit. Und das ist dann, da muss ich irgendwie, und für zweimal fahren ist dann auch zu kurz.
Wir können ja nicht auf jeden Rücksicht nehmen.
Okay, wir können ja eine Umfrage machen. Wie lang sind eure Wege zur Arbeit und den Durchschnittswert? Genauso lang wären dann die Podcasts.
Nee, das ist Quatsch, natürlich.
Ich fände ja besser, wenn es Autoradios gäbe, die das irgendwann lernen, wie lange diese Fahrt dauert. Und die dann die Abspielgeschwindigkeit des Podcasts entsprechend anstellen. Das wäre doch mal was, oder?
Das ist cool.
Und dann mit der Staumeldung quasi mit einberechnen. Also wenn dann die Fahrt mal länger dauert, dann ...
Langsam auf einmal. Da merkst du dann, oh, da ist wohl ein Stau jetzt vor mir, neu aufgetaucht.
Ja, genau. Podcasts sind plötzlich langsam. Ah, Stau, okay.
Ja.
Sehr gut. Okay. Also ich denke halt immer, ein Thema dauert so lange, wie es dauert. Und wenn man mal zwischendurch kurz abschweift, ist das total okay. Also für uns ist das total okay. Und wen das stört, der soll es skippen. Ganz einfach.
Wir nehmen auch übrigens erst eine Stunde auf. Also das ist ja nichts. Wir haben halt vorher schon so lange, wir saßen ja schon eine Weile, bevor wir gestartet haben.
Ja, aber ich habe eben auf die Aufnahmeuhr geschaut und war erstaunt, weil wir noch nicht mal mit dem Thema angefangen haben und haben halt eben schon die Stunde. Aber je länger wir darüber reden, wie lange wir schon reden, umso länger wird es dann noch, bis wir bis zum Thema kommen.
Wir sind aber schon beim Thema.
Das ist ja das Thema.
Ja, natürlich, natürlich. Aber ich meine ja natürlich Performance.
Ja, jetzt haben wir noch ein paar konkrete Punkte. Ich glaube, dann geht es auch schneller mit jedem Punkt, ne?
Was? Nein, das ist ja nicht.
Performance geht schnell. Zack, zack, zack.
Eben.
Gleich sind wir fertig.
Ja.
Also das Resultat ist schnell. Da gibt es natürlich viele, viele so Stellschrauben, die man so, die man da so angehen kann.
Genau. Und ich weiß nicht, ich habe mir das jetzt mal, ich habe das ja so ein bisschen vorbereitet, so was, was sind so Themen, so die, die da reingehören.
Und ich habe gedacht, dass es wahrscheinlich gar nicht mal so dumm wäre, dass so ein bisschen so diese Themen auch so ein bisschen am Lifecycle einer, eines Ladevorgangs irgendwie, oder dass wir uns da entlanghangeln, weil es gibt ja so verschiedene, so Metriken, die, die so im Laufe des Ladevorgangs irgendwie eine Rolle spielen.
Stichwort Core-Web-Vitals und Konsorten. Und dann eben so verschiedene Dinge, die man, die man machen kann, um da Einfluss draufzunehmen. Genau. Und dann werden wir noch ein bisschen über Tooling und so Zeugs reden und so Dinge, die man vielleicht auch gar nicht so sieht und messen kann als Frontend-Entwickler wie Protokolle.
Genau. Finde ich das gut?
Ja, super.
Super. Klingt fantastisch.
Genau.
Genau. Also das, das allererste, was eine Rolle spielt, ist die Time to First Byte. Die kennt, glaube ich, jeder. Die ist, das ist ja so ein Urgestein der, glaube ich, der Performance-Metriken. Und das ist tatsächlich auch so der Bereich, wo wir als Frontend-Menschen eigentlich fast gar nichts machen können.
Genau. Also da gibt es so ein paar Techniken. Also ich weiß nicht, wenn man jetzt irgendwie so PHPler ist oder sowas, dann gibt es ja die Möglichkeit, den PHP-Buffer irgendwie früh zu flaschen. Das ist eine coole Sache, dass man quasi schon mal den Kopfbereich einer Seite losschickt, bevor man dann die langsame Datenbank befragt, wie es denn dann weitergeht.
Genau. Und ansonsten kann man da eigentlich nur Performance durch eben Server-Settings-Caching oder eben Auslagern auf CDNs rausholen. Deswegen würde ich sagen, können wir da jetzt gar nicht so viel drüber reden.
Höchstens noch vielleicht so die interessante Info, dass man Server-Timings auch über so einen speziellen HTTP-Header in den Client nach vorne schicken kann und Browser, die dann in den Chrome-Dev-Tools auch tatsächlich mit anzeigen.
Das heißt also, da werden dann üblicherweise bei einem Network-Connect, kriegst du ja dann so lange hat der Handshake gedauert oder die Look-Up gedauert, der Handshake gedauert, die Anfrage gedauert, die Antwort gedauert.
Und wenn man da so seine eigenen Werte mitschickt mit diesem Header, dann sagt der Browser, hier deine Datenbank, die hat so und so viel Millisekunden verbraucht von dieser Antwortzeit und eben, keine Ahnung, dieses Template-Rendering so viel.
Genau.
Also das ist dann, das macht es dann auch für uns Frontend-Menschen sichtbar. Dann können wir schön Finger pointen.
Das wusste ich gar nicht, dass das geht. Das ist cool.
Ha.
Genau.
Und dann, genau, wenn die Bytes dann fließen, dann gibt es direkt im Anschluss daran den Fuss-Content.
Das Byte muss fließen.
Oder fliegen vielleicht.
Genau, dann geht es darum, wie kriegt man die ersten Pixel auf den Bildschirm.
Und genau, die Metrik heißt halt First Contentful Paint oder ja, First Paint könnte man auch sagen, aber Contentful heißt halt so eben mehr als nur ein Pixel, vielleicht irgendwie so die Headerbar schon mal oder irgendwie was, das man identifizieren kann.
Genau, und da gibt es unter anderem, also das hat ganz viel damit zu tun, was man so in seinem HTML-Head so treibt und tut und macht.
Und da gibt es auch einen ganzen Vortrag vom Harry Roberts, der jetzt so gerade damit rumtourt, der auch auf der Beyond-Teller-Rand war.
Warst du bei der Beyond-Teller-Rand?
Ich war tatsächlich da, ja.
Ah ja, cool.
Bin mal kurz aus meinem Bunker gekrochen, in eine Präsenzveranstaltung.
Es war auch krass, so vom Feeling.
So viel Leute und dann danach direkt wieder zurück in den Bunker gehüpft und die Klappe hinter mir zugemacht.
Kann ich total verstehen.
Ich habe lange drüber nachgedacht und habe es dann gelassen, weil es ist ja auch so meine Haus- und Hofkonferenz viele Jahre gewesen.
Aber kommen wir später noch dazu.
Können wir später noch drüber reden.
Also der Harry hat einen super Vortrag und den würde ich vorschlagen, den muss man sich auf jeden Fall angucken.
So Key-Takeaways sind so Dinge wie zum Beispiel, dass man, wenn man ein synchrones JavaScript in seinem Head-Bereich hat, dass man den vor seinen CSS packt, weil man dem Browser dann die Möglichkeit gibt, die beide parallel abzuarbeiten.
Eigentlich intuitiv würde man ja sagen, so nein, CSS ist erst mal wichtiger.
Das kommt zuerst und das JavaScript, das kommt dann eben hinterher.
Genau, dann schleppt man ja viel CSS rum, dass man vielleicht auch gar nicht unbedingt für diesen quasi ersten, für das erste Rendering, für den ersten Ausschnitt der Seite braucht.
Und das kann man, das kann man eben extrahieren.
Habt ihr bestimmt auch schon gemacht, denke ich mal.
Das ist ja so dieser Begriff des Critical CSS.
Tatsächlich noch nie gemacht.
Nee.
Ich kenne mich schuldig.
Ich weiß, das war irgendwann mal, keine Ahnung, vor einigen Jahren, das ist wirklich schon eine Weile her, kam dieser Trend auf, wo es dann diverse Libraries gab, die das für einen erledigt haben und so.
Und ich habe es tatsächlich noch nie gemacht.
Bei der Podcast-Seite machen wir das auch nicht.
Mir hat irgendwie immer so das No-Brainer-Tool gefehlt, wo ich das irgendwie reinwerfen kann, dass das dann für mich erledigt, weil ich mich eigentlich nicht drum kümmern wollte.
Das ist auch vom Tooling her tatsächlich ein bisschen anstrengend, weil man muss die Seite erstmal sozusagen gebaut haben und in den klassischen Tools hat man dann so einen Headless-Browser, den man dann hochstartet, der die Seite dann rendert und der sagt, ah, guck mal hier, das ist jetzt der obere Teil des Viewports, den das CSS extrahiere ich, lege ich ab.
Und das andere eben auch, sodass ich die quasi zweigeteilt habe.
Und das geht tatsächlich automatisiert?
Das geht automatisiert, aber du musst halt irgendwie erstmal sozusagen diese Seite fertig irgendwo ablegen, um dann nochmal so einen zweiten Durchlauf zu machen.
Und das nervt und geht auch gar nicht mal so schnell.
Und darum bin ich dazu übergegangen, sozusagen das in die Hände von Entwicklerinnen und Entwicklern zu geben, dass man eben bei jeder Komponente entscheidet, ist das eine, die sehr wahrscheinlich eben oben auftaucht oder ist das eine, die eigentlich nie im oberen Bereich auftaucht.
Und da gibt es entweder Post-CSS-Plugins, wo man dann quasi einfach so Keywords reinschreiben kann in seinen CSS und dann steckt das eben ins eine oder ins andere am Ende.
Oder man macht das eben händisch, indem man sagt, die eine nenne ich irgendwie Critical S-CSS, die Source-Datei und die andere halt irgendwie lazy oder wie auch immer.
Und dann hat man es ja darüber geregelt und es funktioniert eigentlich ganz gut.
Und der Bildprozess ist auch viel schneller, als wenn man da irgendwelche Headless-Browser nochmal startet.
Und gibt es da irgendwas zu berücksichtigen, so ein Trade-off zwischen, weil das war ja früher was, wo man darauf geachtet hat, möglichst wenig Requests zu haben und dafür dann das, ja, also müssen die Dateien bestimmte Größe haben oder dürfen die maximale Größe haben, damit sich das noch rechnet oder, ja, gibt es da irgendwas zu berücksichtigen?
Ja, nee, eigentlich nicht.
Also du machst ja, du flutest ja den Browser nicht mit 1000 Requests oder so.
Du machst halt nur aus einem CSS, aus einem monolithischen machst du zwei.
Das ist in Zeiten von HTTP 2 oder 3 ist das ja auch überhaupt kein Problem.
Und genau, du kannst dann noch überlegen, also wenn dieses kritische CSS, wenn das sehr, sehr klein ist, also was weiß ich, 10 Kilobyte oder so, dann könntest du noch überlegen, ob du das einfach inline oben in dein HTML reinhängst.
Wenn es, also dann hast du da gar keinen Request.
Wenn es mehr wird, würde ich das aber dann tatsächlich auch nicht machen, was einfach daran liegt, dass du sonst bei jedem Aufruf, wenn du jetzt irgendwie da dein Head-Bereich mit so einem Style-Tag mit 32 Kilobyte aufbläst jedes Mal.
Das ist halt dann auch nicht cool.
Dann lieber so einmal in den sauren Apfel beißen, diese eine kleine externe Datei laden und dann gute Caching-Direktiven auf der Datei haben, die dann dafür sorgen, dass die niemals je wieder geladen wird.
Genau. Und für die, für den restlichen CSS-Teil, den du ja quasi, den brauchst ja immer noch, aber nur halt eben einfach später, den kannst du lazy laden.
Da kannst du natürlich jetzt so Dinge tun, wie auch wieder einen Haufen JavaScript draufwerfen.
Da hat aber die Filament Group eine ganz coole Technik irgendwie ausbaldovert.
Zwar funktioniert das so, dass du einfach in die CSS-Datei einbindest, ganz normal, mit aber Media-Print.
Und sobald du das tust, wird der Browser die lazy laden, weil er macht das für alle Print-Style-Sheets.
Und du kannst dann ein Onload-Attribut bestücken, wo du sagst, wenn es eben geladen wird, dann ändere, also this.media um auf zum Beispiel all.
Und dann ist der Browser eben so eher gemütlich beim Laden, aber am Ende wird ihm dann sozusagen bewusst, ach, guck an, die Datei, die scheint ja doch aktuell wichtig zu sein für das Layout.
Das ist ja ganz cool, weil es so funktioniert überall.
Klingt ein bisschen nach fiesem Hack, ist aber eine clevere Idee.
Was für Ideen die Leute kommen, oder?
Ja, das ist nah beieinander.
Print, um es lazy zu loaden.
Ich meine, das klingt ja aber schon nach, es gibt keine vernünftige native Methode, die man eigentlich gerne hätte.
Also benutzt man halt so diesen Workaround, aber clever ist es auf jeden Fall.
Warum nicht Loading gleich lazy für Link?
Das ist eine gute Frage.
Tatsächlich auch berechtigt.
Ich glaube, dass, ja, dass die Browser-Menschen dann gar nicht, also für die ist das schon so eine Errungenschaft, oder auch natürlich, die sehen ja auch immer den Code, den sie schreiben müssen, dann in dem Browser, das bei Bildern und so zu unterstützen, dass die, glaube ich, dann erstmal nicht weiterdenken, weil das halt so eins nach dem anderen mäßig läuft.
Deswegen also auf jeden Fall gerne mal ein Bug-Report, also im Sinne eines Feature-Requests aufmachen.
Ja, cool.
Das kann auf jeden Fall nicht schaden.
Ja, das machen wir.
Loading lazy wollen wir eh für alles haben.
Haben wir ja auch schon mal uns damals gewundert, als es irgendwie rauskam, warum das nicht viel mehr Leute verwenden, weil es so easy einzubauen ist.
Gab dann tatsächlich auch ein paar Argumente, aber wir, lass uns, machen wir einfach.
Konstantin, mach mal.
Ja, ja, ich mach mal.
Ja, oder Async wäre auch gut.
Also das ...
Ja, das habe ich gerade auch gedacht.
Async wäre auch gut, weil das gibt es ja beim Script-Tag schon.
Genau.
Wäre tatsächlich ähnlicher.
Ja, wahrscheinlich eher Async als Loading lazy.
Genau, ansonsten, also wir haben ja eben auch über Tailwind gesprochen.
Das ist auch ein heißer Kandidat, um den First Contentful Paint zu beschleunigen, weil das Schöne, also gerade wenn man so größere Projekte hat, das Schöne an Tailwind ist ja, das wächst ja einfach nicht.
Also es ist völlig egal, wie viele Komponenten du damit baust, das CSS wächst nicht.
Also das, da kann halt vielleicht weniger gepurcht werden.
Wir haben so ein Purge, so eine Purge-Methode, wo die quasi Dinge wegschmeißen, die nicht gebraucht werden.
Aber irgendwann kommt man an einen Punkt, wo das eben einfach nicht mehr wächst.
Und mit so traditionellen Ansätzen wie BAM wächst das CSS immer weiter.
Und man manövriert sich dann sozusagen oder malt sich zunehmend mit den Rücken an die Wand.
Genau, aber das ist natürlich, das ist eher so eine grundlegende Entscheidung.
Also wenn man, setzt man auf Tailwind, dann hat man auf jeden Fall da große Vorteile.
Also meint auch nachteilig, aber in dem Bereich …
Da hab ich so noch nie drüber nachgedacht, dass das Tailwind nicht wächst.
Das CSS bleibt quasi gleich groß, wenn ich die gleichen Anforderungen habe oder die gleichen Dependencies.
Und wenn ich dann halt irgendwie noch ein anderes Modul brauche, das wusste ich gar nicht, dass das was wegwerfen kann.
Ist das in Tailwind selbst mit integriert, dass das nur irgendwie in das CSS zieht, was ich benutze?
Ja, genau.
Die haben so einen Purge-Bildschritt.
Da wirfst du entweder dein resultierendes HTML rein oder deine Templates, wo dann idealerweise sich diese Klassen, die du alle benutzt, darin wiederfinden.
Und dann macht er im Prinzip …
Der geht einfach durch und guckt, welche Klassen kommen da vor, die ich zuordnen kann.
Und alle anderen, die werfe ich halt an.
Ja, ist schon cool.
Wenn ich so überlege, vielleicht doch mal Tailwind ausprobieren.
Ich frage mich gerade, hätte ich unsere Podcast-Seite mit Tailwind bauen können?
Ich glaube nicht.
Da sind schon so ein paar exotische Sachen dabei.
Ich vermuten würde, dass die es in Tailwind nicht gibt, aber ich weiß es nicht.
Du kannst es erweitern.
Das stoppt dich ja nicht.
Also Tailwind ist ja im Prinzip erstmal so ein Grundwerkzeugkasten und dann kannst du ganz klassisch auch deine eigenen Sachen dazutun.
Also es gibt ja wirklich, also ihr habt ja auch dieses, euer Logo mit dem, hier mit dem Lichtschein und so.
Da sind bestimmt, oder da sind vielleicht ein paar Sachen, irgendwie Filter-Effekte drin oder so, die ihr vielleicht dann bei Tailwind nicht bekommt.
Aber die, die könnt das, also dieser Weg ist, bleibt euch nicht versperrt.
Also den habt ihr obendrein noch.
Genau, also letztlich ist das ja so eine Umkehr, der, also wer zeigt, wohin, zeigt HTML auf CSS oder zeigt das CSS aufs HTML.
Bei BAM ist es ja eher so, dass das HTML, dass das CSS aufs HTML zeigt und beim, bei Tailwind ist es umgekehrt und darum wächst das HTML dafür.
Also das HTML wächst, das CSS bleibt schlank und bei BAM wächst das CSS und das HTML bleibt eher so groß, also schlank so.
Ja, am Ende ist es immer nur, also man denkt manchmal, man könnte irgendwie Komplexität loswerden, aber letzten Endes verschiebt man sie immer nur woanders hin.
Also es ist immer die Frage, wo ist sie dann am Ende zu Hause?
Also echt ein guter Gedanke.
Aber das ist ein guter Gedanke mit diesem, ja, CSS wächst nicht.
Krass.
Genau, und großes HTML ist halt auch kein Problem, also weil CSS kann immer nur en bloc gepasst werden.
Das heißt also, der Browser wird nie anfangen, irgendwas zu zeichnen, wenn er gerade erst die ersten Anweisungen bekommen hat.
Beim HTML ist das halt anders.
Das heißt also, wenn dein CSS kompakt ist, dann ist es halt schneller geladen und du paintest schneller, während das HTML vielleicht noch gerade einläuft.
Das ist ja ein streamendes Format.
Das kann ja 10 Megabyte groß sein, der wird trotzdem nach einem Bruchteil von einer Sekunde wird der schon anfangen los zu rendern, weil es ihm völlig egal ist, wie viel da noch kommt und interessiert ihn auch gar nicht.
Der macht halt einfach.
Und das ist so der entscheidende Unterschied, finde ich, den man da auch noch so ein bisschen berücksichtigen muss.
Das HTML eben so quasi so ein progressives Format ist und CSS und JavaScript eben halt überhaupt gar nicht.
Vielleicht lass mich da mal ganz kurz abbiegen mit noch einer kleinen Extrafrage.
Wenn wir schon bei Tailwind sind, hast du mal Tailwind UI verwendet?
Weil das ist ja irgendwie so eine Erweiterung, da kriegst du irgendwie schon so fertige Komponenten, so Bootstrap-artig, zumindest so habe ich es verstanden.
Das kostet aber Geld, wenn ich es richtig weiß.
Hast du das mal eingesetzt?
Also ich bin nur den ersten Schritt gegangen und habe das Geld bezahlt, habe es dann nicht eingesetzt.
Ich hatte nämlich tatsächlich so ein Side-Project, das wollte ich schnell hochziehen und das war dann eben mit Eleventy und dann habe ich gesagt, so komm, super, Tailwind ist genau das Richtige, um ganz schnell das zu stylen.
Und dann hatte ich eben auch dieses Tailwind UI gesehen und dachte, das könnte ja noch schneller gehen, wenn ich eben fertige UI-Elemente nutze.
Und ich weiß gar nicht mehr, was das Ding war.
Ich glaube, ich hatte es so eilig und nach dem Kauf kriegst du nicht sofort einen Link.
Also es dauert dann irgendwie so einen Tag oder so und das war mir dann schon zu lang und dann bin ich schon losgelaufen und das muss ich noch ausprobieren.
Also ich kenne nur die Module, für die Steve Shogar, glaube ich, ich hoffe, ich schreibe den Namen richtig aus, ich kriege ja immer Ärger, wenn ich Namen falsch ausspreche, so bei Twitter irgendwie mal beworben hat und fand das, das sah irgendwie alles immer ziemlich gut aus.
Und das ist auch, glaube ich, echt ein guter Typ.
Der macht, also er hat auch dieses Refactoring UI Buch geschrieben, was großartig ist.
Also wenn man irgendwie Interfaces baut, wenn man auch gar keine Ahnung davon hat, ich glaube, es richtet sich ja auch irgendwie so an Backend-Developer oder so an Leute, die gar keine Ahnung von Design haben.
So, hey, du hast hier irgendwie schon eine Seite, wie willst du die irgendwie umbauen, dass es irgendwie übersichtlich wird?
Also ich habe selten ein Buch irgendwie gesehen, das so klare Anweisungen gibt mit, du hast so ein Modul, so ist es irgendwie doof, bau doch mal so oder mach mal hier und dann grenzt das so mit der Farbe noch ab.
Aber es ist wirklich großartig.
Also das von dem ist ja auch Tailwind UI und deswegen hat es mich jetzt einfach interessiert, weil es immer mal wieder an mir vorbei gehuscht ist und ich mal wissen wollte, lohnt sich das?
Weil ich würde gern mal damit rumspielen, war jetzt aber bisher nur für zum Rumspielen zu geizig jetzt mir das einfach zu kaufen.
Genau, aber cool.
Ja.
Kenne ich jemanden, der es hat.
Ja, also können wir gerne nochmal abseits des Podcasts mal zusammen reingucken.
Das müssen wir rausschneiden.
Nein, Spaß.
Genau, dann ist natürlich noch ein Thema Schriften.
Die sollen ja irgendwie auch schnell da sein und die muss man, die stampfen wir ein, indem wir den WoV 2 als Format nehmen natürlich.
Ich glaube, WoV nicht 2 braucht man eigentlich nicht mehr.
Also ich wüsste jetzt keinen Browser, der irgendwie noch geläufig ist, der nicht WoV 2 kann.
Und da dann allerdings, weil viele Schriftarten doch ein bisschen zu groß sind, dass man die dann subsettet, also dass man im Prinzip sagt, hey, wir haben hier eine deutsche Seite.
Ich brauche ganz viele Zeichen.
Also es ist zwar cool, dass die drin sind, aber die brauche ich jetzt mal alle nicht.
Und die werfe ich alle raus aus diesem Font-File.
Was nicht heißt, dass der Browser diese Zeichen nicht auch anzeigen kann.
Er würde dann einfach auf ein System-Font zurückfallen.
Also es gibt immer noch so ein Sicherheitsnetz.
Genau, und das mache ich eigentlich immer noch ganz gerne mit dem guten alten Font-Squirrel, mit dem wir ja schon vor zehn Jahren Schriftdateien irgendwie umgewandelt und gebastelt haben.
Genau, der kriegt das eigentlich ganz gut hin.
Das ist ein guter Tipp.
Und genau, dann ist noch eine wichtige Sache, dass man so, man kann den Fehler machen.
Also ein großer Fehler ist es sowieso, Schriften irgendwie von Font-Foundries extern einzubinden, was, also zumindest was so Performance angeht.
Weil der Browser dann, weil die meistens mit Weiterleitung arbeiten, das ist also ein CSS-Datei und dann leitet die wieder weiter auf irgendwas anderes.
Und dann sind da vielleicht noch Ad-Imports drin und der Browser, der wird dann einfach wahnsinnig, bis er dann da seine Schrift gefunden hat.
Darum auf jeden Fall selber hosten und auch da wäre mein Tipp, die Ad-Font-Face-Deklaration direkt ins HTML reinzuhängen.
Denn andernfalls hättest du ja auch wieder einen Zwischenschritt, also einen Zwischenhop, weil er dann, wenn du das ins CSS schreibst und das liegt halt extern, dann musst du erst mal das CSS ziehen.
Wenn er es hat, dann merkt er, ach, guck an, ich muss auch noch ein Font ziehen. Das hättest du mir mal ruhig vorher sagen können.
Und dieses Vorhersagen ist halt, sag ihm das einfach, sag dem Browser das direkt im HTML einfach, genau.
Cool.
Also immerhin das Self-Hosting, das machen wir schon richtig. Wir haben die tatsächlich auf dem Server liegen.
Ja, genau. Ich hab, ähm, ja. Aber da haben wir auch in der Folge mit Gerrit von Ackmer drüber gesprochen, über diese Lizenzgeschichten.
Und das ist gar nicht so easy, weil, äh, also zum Beispiel, ich hab ja auf meiner persönlichen, äh, Webseite, moritzgießmann.de, ähm, hab ich ja irgendwann mal die Branden grotesk haben wollen.
Ich weiß nicht, bei Netflix sieht man sie oft, aber ich glaub im Web gar nicht so oft. Und, ähm, ich hab sehr lange suchen müssen, bis ich einen Fontanbieter gefunden hab, äh, der mir eine Lizenz gibt, wo ich die selbst hosten darf.
Und, äh, der mir dann vertraut, dass ich nicht mehr als X Zugriffe habe und nicht das irgendwie selbst auf seinem eigenen Server tracken will.
Weil das, das kommt einfach nicht in Frage. Das hat, das gibt so viele Gründe, ähm, warum man das nicht machen möchte.
Also, Performance ist jetzt einer, wie wir grad gelernt haben, aber bei mir ist es ganz klassisch Security.
Ich will nichts auf meiner Seite drin haben, was nicht von meinem Server kommt.
Ähm, weil, wer weiß, wer sich da reinhackt und irgendeine Scheiße damit macht, also.
Und dann ist aber auch wieder die Frage mit der Lizenz, äh, darfst du die dann durch Font-Squirrel durchjagen?
Da muss man halt genau hinschauen, wenn man sich da tatsächlich an alles halten möchte.
Das ist eine gute Frage, das weiß ich tatsächlich nicht, ob ich das darf.
Also, ist eine gekaufte Font da einfach durchjagen, um die Zeichen zu reduzieren?
Hm.
Wenn einem da jemand böse kommen will, dann sagt er, das ist aber nicht die Datei, die wir dir verkauft haben.
Ja, das kann natürlich sein.
Wie die das überprüfen sollen.
Nee, da ist der Aufwand wahrscheinlich auch viel zu hoch.
Aber trotzdem, klar, wenn man jetzt sagt, man möchte da rechtlich, hundertprozentig sicher sein, dann.
Du.
Dem Konstantin ist das immer sehr wichtig.
Ich lasse die fünf auch mal gerade sein.
Gott, jetzt habe ich wieder was gesagt.
Schlimm, jetzt gucken die Leute gleich, wo sie mich verklagen können.
Das muss dann schon wieder raussteigen.
Na ja, ich sage mal so, ich habe tatsächlich auch von niemandem gehört, der dieses Problem irgendwann mal hatte mit irgendeiner Font Foundry.
Also, es ist ein theoretisch durchaus, könnte es mal passieren.
Genau.
Also, wenn man das vermeiden will, dann schaut man sich tatsächlich irgendwie bei Google Fonts um oder so.
Da gibt es ja auch dann, äh, diverse Imitate bekannter Schriften, äh, wenn man dann die bekannt, die, die Schriften nicht da bekommt, ja.
Genau.
Ach so, und es wird auch, ja.
Ja.
Äh, es gibt auch tatsächlich, äh, so, man arbeitet tatsächlich an streamenden von Formaten fürs Web.
Also, dann hätte man auch diese Probleme sowieso gar nicht, ähm, genau, äh, habe ich jetzt keinen Link für parat, aber kann ich auch nochmal raussuchen für die Shownotes, ähm, genau.
Dann, äh, trudeln da sozusagen erstmal die wichtigsten Zeichen ein und dann der, der ganze restliche Klumpatsch.
Ah, war das, ah, da hatten wir es, da hatten wir es auch drüber, glaube ich.
Ich glaube, wir haben das schon mal.
War das das Progressive Font Enrichment, glaube ich, hieß das, kann das so sein?
Das weiß ich nicht mehr, aber wir hatten, wir sagten es auf jeden Fall.
Darüber habe ich nämlich mal, also, wenn es das ist, darüber habe ich ja mal einen Vortrag gesehen bei der JS-Conf, äh, Font Enrichment, genau, und zwar von dem Aaron Gustafsson, bin ich da jetzt ganz falsch?
Progressive Font Enrichment, ich glaube, das ging so in die Richtung, dass, äh, zumindest die Möglichkeit besteht, dass man, ähm, von einer Schriftart nur die Glyphen runterlädt, dass der Browser nur die Glyphen runterlädt, die er auf der Seite braucht, von der er das weiß.
Ja, so, ich weiß aber nicht genau, wie weit die sind.
Ähm, da gibt es auf jeden Fall eine Demo, genau, da können wir ja vielleicht nochmal drauf verlinken, packe ich, äh, in die Shownotes.
Tippitoppi.
Ähm, genau, dann, äh, dann ist es, äh, dann ist es auch immer eine gute Idee, äh, Preloading zu nutzen heutzutage, ähm, oder Preload, Preload Hints.
Das heißt also, die, äh, der Hintergrund ist der, dass ein Browser zwei Parser hat, wenn er auf die Seite kommt.
Das eine ist sozusagen der vollwertige Parser, der, der alles kennt und, äh, sozusagen, äh, mit allem was anfangen kann und dann auch einen Domtree aufbaut, äh, und, ähm, das andere ist, äh, der, der Ressourcenscanner oder Pre-Parser.
Ähm, äh, der ist, äh, der ist, äh, der ist, äh, der ist, äh, der ist so ein bisschen wie so ein Jagdhund, den der Jäger schon mal losschickt und der die ganzen Hasen aus den, äh, aus den Erd, äh, Bauen dann raus treibt.
Ähm, ähm, ist, äh, ist, ist wie so ein Jagdhund auch nicht besonders intelligent.
Deswegen, äh, deswegen, äh, äh, kann der eben kein, keine Style, äh, Blöcke oder sowas oder parsen und verstehen.
Das heißt, dem muss man, dem muss man HTML geben und dann, äh, sucht er eben nach Images oder, ähm, nach Link-Rail-Style-Sheet oder Script-Elementen mit Sourcen und, äh, sammelt die ein und feuert quasi in Windeseile schon Requests, äh, an die Server ab.
Und der, der eigentliche Parser, der ist überhaupt noch gar nicht da.
Ähm, sodass, wenn der dann endlich mal, äh, angetrottet kommt, die ganzen Antworten möglicherweise schon da sind oder zumindest in Flight.
Und, ähm, genau, wir haben ja gerade gesagt, äh, die Schrifteinbindung, die, äh, die stecken wir in ein Style-Element, das wir in das HTML stecken.
Aber das ist, äh, ist eben kein HTML, also dieses, äh, dieses, äh, Einbinden der Fonts, das kann dieser, äh, Ressourcenscanner, der peilt das nicht.
Und darum würde man hingehen und dann Link-Rail-Preload auf diese Font-Ressource, auf das Wurf2 machen mit einem S-Font.
Und dann muss man bei Schriften auch noch zusätzlich, ähm, ein, äh, Cross-Origin, äh, Attribut drauflegen.
Weil, das hat auch wieder mit den Font-Foundries zu tun, die, äh, sich erbittet haben damals, ähm, dass Schriften quasi über einen eigenen Kanal laufen im Netzwerk-Stack.
Damit die, äh, also warum auch immer, äh, damit die eben nicht abgegriffen werden können.
Also der, äh, das macht der Browser ja auch, äh, bei so Dingen, die, die er als sicherheitsrelevant ansieht, dass er sagt, so, nee, die Ressourcen, die kriegen einen eigenen Kanal, äh, getrennt von den anderen.
Und, ähm, da der Browser die Fonts mit Cross-Origin zieht, muss man dann beim Preloaden auch ein Cross-Origin-Attribut, äh, auf die Link-Elemente drauf tackern.
Genau.
Und dann hat der Chrome-Browser leider auch noch einen Bug, das, äh, oder hatte lange, ähm, dass, äh, wenn du pre-geloadet hast, dann, äh, dann hat das, was du gepreloadet hast mit diesem, äh, HTML-Element, hat automatisch die allerhöchste Prio bekommen.
Auch wenn ein Font vielleicht nicht höher priorisiert sein sollte als CSS, und das bedeutet, du musst dann auch das CSS pre-loaden auf jeden Fall, damit das wieder in der Reihenfolge oben steht.
Genau, also CSS pre-loaden und Fonts pre-loaden, das, das sollte man tun.
Schreibst du mit, Moritz?
Ich hab schon, ich hab schon überlegt, wir müssen viel machen.
Ja, ich, ich schick euch hier Stichworte rüber.
Aber diesen Harry-Roberts-Talk, äh, da hab ich tatsächlich heute deswegen, weil ich den auch geschaut hab, jetzt, weil die Videos jetzt veröffentlicht wurden, hab ich tatsächlich an unserer Seite schon was verändert.
Ah ja, okay.
Also es sind schon, sind schon Sachen passiert, ja.
Aber wieso muss ich eigentlich mitschreiben?
Ja, weiß nicht.
Ich sag mal so, ähm, eigentlich würde ich mir wünschen, das sind ja meiner Meinung nach Sachen, die, ähm, alle in Lighthouse reingehören.
Denk ich mir zumindest mal.
Oder was sind eigentlich alles mit Lighthouse testbare Sachen?
Ähm, oder es war jetzt eigentlich nichts dabei, wo man nicht, was man nicht mit Lighthouse testen könnte.
Und dann, äh, würde ich eigentlich erwarten, dass so ein Tool sich immer weiter verbessert und das mir dann irgendwann sagt, hey, mach doch mal, mach doch hier mal diese Eigenschaft noch und dreh doch mal bitte die Header-Sachen da oben oder sowas.
Ja.
Weiß ich natürlich nicht, ob's passiert.
Tatsächlich macht er das auch, also es gibt ja die, diese Critical Request Chain, die er einem zeigt, wenn man möchte, wo er einem eben sagt, so, hier ist mein HTML-Dokument und dann musste ich da in das Style-Sheet gehen und da ein Font laden.
So, das ist, sind zu viele Schritte, mach mal weniger.
So, das macht er schon.
Aber es ist halt überschaubar viel, also ähnlich wie mit dem, warum es halt DOM-Tremap gibt, ähm, dass, dass er dann irgendwie zwar einen guten Ansatz hat,
aber irgendwie zu früh die Biege schon wieder macht mit seinen Tipps.
Mhm.
Genau.
Ja, und ansonsten, äh, natürlich immer cool, äh, alles minifizieren, alles komprimieren, ähm.
Da zieh ich vielleicht mal eine Frage vor, weil du das gerade sagst.
Oh ja, genau, das ist aber, da, da, da, da sind wir uns nicht eigentlich.
Genau, da hatten wir schon mal so einen Streitpunkt, jetzt haben wir ja den Experten hier.
Äh, ganz kurz und knapp, Markup minifizieren, ja oder nein?
Ja, das hab ich hier auch als Stichwort, bei HTML würde ich eher sagen nein, äh, weil das ja nicht so ganz ungefährlich ist.
Yes, richtige Antwort, danke.
Genau, und, äh, tatsächlich, also, ähm, ich hab auch mal einfach, äh, bei der Rheinischen Post übrigens, ähm, den Vergleich gemacht.
Was bringt mir das denn, wenn ich, also die haben ja eine furchtbar lange Startseite aus verschiedenen Gründen, so SEO und, äh, dass irgendwie jedes Ressort da auch irgendwie, äh, erscheint und so weiter.
Ähm, und das, also, es gibt ja eigentlich nicht den Fall, außer durch, äh, völlige Blödheit oder technische Probleme, dass man eine Seite nicht komprimiert überträgt.
Also, das ist ja eigentlich so der Standard, würde ich sagen.
Also, mindestens Gzip komprimiert, ähm, das heißt also, der, man muss, man muss ja vergleichen, was bringt einem das, äh, in diesem Szenario, dass ich eine Seite Gzip komprimiert verschicke, äh, weil das andere ist nur ein theoretisches Szenario.
Und da, äh, da hab ich eben die Startseite der Rheinischen Post einfach mal minifiziert, ge-gzipt und, äh, die, und das Original und mit dem Original ge-gzipt verglichen.
Und das, das war einfach, das waren so irgendwie zwei Kilobyte Unterschied, äh, insgesamt.
Und, äh, und, äh, und, äh, und, äh, und, äh, und, äh, und, äh, ja, die, die funktioniert ja im Prinzip so, dass die Wiederholungen einfach sagt, so, komm, jetzt muss ich jetzt nicht noch fünfmal das gleiche hinschreiben, und man hat ja auch immer so Listen an Elementen, die sich immer wiederholen.
Ähm, ich schreib das nur einmal rein und sag, sag das jetzt bitte hier zehnmal hintereinander, so, das, das reicht als Info, und schon, zack, hat mal das HTML verkleinert.
Ja, wenn wir schon bei, bei Komprimierung sind, äh, schmeiß ich vielleicht auch noch was, was ich mir für später aufgeschrieben hab rein, äh, Brodli-Komprimierung.
Lohnt sich das im Vergleich zu Gzip?
Ja, auf jeden Fall. Also, das, äh, das auf jeden Fall,
eh, lohnt sich und, und holt noch mehr raus, weil Brodli ist ja, äh, so, die haben, die haben ein eigenes Dictionary eingebaut für so Programmier-Dinge, so.
Während Gzip ja eher so ein allgemeiner Kompressor ist, ist Brodli wirklich für so Programmier-Ottos wie uns, äh, maßgeschneidert.
Ich meine, es ist aber auch das, was zum Einsatz kommt bei WoV 2, wenn ich so richtig informiert bin.
Äh, ja, kann gut sein, ja, ich glaub schon.
Und, ähm, genau, die Unterstützung von Brodli ist aber jetzt nicht so richtig gut, ähm, aber das kann man sich einkaufen, wenn man sich, äh, zum Beispiel in Cloudflare.
CDN vor die eigene Seite klemmt, dann, äh, kriegt man das halt frei Haus.
Die sind ja echt krass. Da gibt's auch HTTP 3 und, äh, so diese ganzen Späße.
Ich hab jetzt grad mal geguckt, Brodli, laut Can I Use, sieht das eigentlich ganz gut aus.
Also wir haben hier, ich, was, was fehlt jetzt bei den aktuellen Browsern?
Äh, ich mein, ich glaub, du meintest eher selberseitig, ne?
Ach so, okay, ah ja.
Also da hat's leider noch.
Da muss natürlich, der Server muss natürlich mitspielen.
Ich hab jetzt schon öfter gesehen, ähm, es gibt ja auch irgendwie so, äh, sagen wir mal, in die Buildchain eingebaute Brodli-Kompressoren,
sodass man es direkt irgendwie als Brodli noch extra nebendran legt und sowas.
Aber ja, stimmt, der Server ist natürlich am besten, wenn der Server das von sich aus alles, äh, machen kann.
Ja.
Ja, aber in der Tat, also wenn du das natürlich vorkomprimieren kannst, ist halt auch super, ne?
Also dann sparst du dir auch noch dieses On-the-Fly-Komprimieren.
Das, äh, das dauert nicht lange, aber es dauert eben auch nochmal ein bisschen.
Das, das geht dann quasi ab von der Time-to-First-Byte.
Ähm, und dann kann das theoretisch jeder, jeder Web-Server verschicken,
wenn er den passenden, äh, Header mit, mit dazu passt.
Ja, kann man auch machen.
Genau, aber zum Beispiel so Dienste wie Netlify, die, äh, die setzen, glaube ich, auf Amazon Cloudfront,
die haben noch kein Brodli zum Beispiel.
Mhm.
Die werden auch immer die Ohren vollgejammert.
Kann ja so schwer eigentlich nicht sein, oder?
Sag ich jetzt mal.
Sag das mal unserem Hoster.
Anscheinend.
Frag, frag, frag, frag, frag, frag, frag, frag, frag die mal, wie sieht's eigentlich aus mit Brodli?
Dann werden wir mal sehen.
Mhm.
Ähm, ich weiß nicht, du, du kennst den ja besser als ich, Konstantin.
Also, ähm, ja, diese On-the-Fly, also ich glaub, dass das Brodli, äh, das muss ich mal gucken,
ob das, vielleicht, wir haben einen neuen Server bekommen vor ein paar Monaten erst,
ob das jetzt vielleicht die Extension da, ähm, ob das jetzt vielleicht die Extension da, ähm, installiert ist, also wir verarbeiten ja viel mit PHP, ähm, und da sind wir halt darauf angewiesen, dass die, äh, Brodli-Extension da mit drin ist, beziehungsweise halt im Apache auch mit drin ist, ähm, ich weiß jetzt gar nicht, wie der letzte Stand war, also ich, was ich auf jeden Fall machen kann, ist, äh, die halt vorkomprimieren, das mach ich auch bei uns im Build-Step, und dann liegen die halt zusätzlich ab, und wenn der Browser das kann, dann kriegt er die ausgeliefert.
Ja, cool.
Ja.
Aber so On-the-Fly haben wir da jetzt gar nicht, weil's damals, glaub ich, nicht ging.
Da müsste ich mal nachschauen, was ich da getan hab inzwischen.
Mhm, ja.
Gut, und dann hab ich noch so einen, so ein, äh, sagen wir mal, so ein bisschen, äh, äh, äh, ein Tipp, der so ein bisschen so ein Nischen, äh, Thema ist, ähm, die, wenn man Bilder in seinem, äh, in seinem HTML,
drin hat, dann, äh, und der Browser identifiziert das Ganze, identifiziert das Ganze so als zusammenhängenden Block, dann wird er diesen Block erst rendern, sobald er das Bild, äh, dekodiert hat, damit er das quasi in einem Schlag machen kann.
Äh, äh, da kann man auch ein bisschen, also den Browser kann man auch dazu bringen, eben alles aus das Bild ein bisschen früher schon rauszurücken, indem man dem Bild ein Decoding gleich async-Attribut gibt.
Äh, äh, dann entbindet man ihn sozusagen von dieser, äh, Pflicht, das irgendwie in einem Rutsch alles, äh, fertig zu bauen.
Ähm, genau, ist halt so, sehr edge-case-ig, aber kann man auf jeden Fall, also es schadet auch nicht, das draufzupacken.
Ich wollte gerade sagen, ist wie, wie Loading gleich Lazy, oder? Eigentlich auf alle Images, äh, Loading gleich Lazy und, äh, Decoding.
Ja, nee, Loading gleich Lazy, äh, nicht auf alle Bilder.
Ah, okay.
Genau, das willst du nicht tun, weil da kommen wir jetzt zum quasi nächsten Punkt, äh, das ist nämlich der Largest Contentful Paint, das ist sozusagen nach dem First Contentful Paint, gibt's dann irgendwann so den größten Paint, der auf deiner Seite stattfindet.
Und das ist halt tatsächlich häufig, äh, irgendwie so ein Hero-Bild oder irgendwie ein fettes Logo.
Ähm, genau, und, äh, da, da solltest du eben genau kein Loading gleich Lazy benutzen.
Ähm, das hat den Hintergrund, dass, ähm, dass der Browser, der muss ja wissen, wo das Bild ist, um dann entscheiden zu können, ob das jetzt nah genug im Viewport ist oder nicht, ähm, um es zu laden.
So, das ist ja so die, die Idee von dem Lazy Loading, das heißt, er weiß, hier ist mein Viewport, da ist das Bild und ab diesem, dieser Distanz, also jetzt kommt's gleich ins Bild, da muss ich's jetzt laden.
Ähm, das kann er ja gerade zu Beginn überhaupt noch gar nicht machen, wenn er das, äh, weil er dafür das CSS erstmal laden, parsen und er muss dann auch den, das, äh, das Layout überhaupt machen, um dann zu wissen, wo das Bild ist.
Und, äh, wenn das Bild eben ein kritisches Bild ist, dann, äh, würde auch der, der, dieser Pre-Parser, der Ressourcenscanner, würde halt nicht loslaufen, weil der eben einfach zu blöd wäre, dieses, dieses, dieses,
Layouten durchzuführen und das zu entscheiden und das auf die lange Bank schicken, äh, schieben und darum musst, musst du Bilder, die eben so oben im Viewport sind, wo du das halt schon weißt, ähm, die solltest du halt mit, äh, entweder gar nicht mit Loading gleich Lazy ausstatten oder eben mit Loading gleich Eager, was ja quasi so quasi das Umgedrehte ist und, aber auch der Default der Browser.
Gut zu wissen.
Genau, aber sonst, also davon abgesehen, also von denen, also was alle anderen Bilder angeht, auf jeden Fall, äh, Loading Lazy, supergut.
Genau, und, äh, dann bei dem Largest Contentful Paint Bild, ähm, da ist, äh, das würde man idealerweise auch vorladen, äh, auch wieder mit so einem Link-Rail-Preload.
Ähm, ähm, da kannst du nur das Problem haben, dass, also klassischerweise, wenn du diese Link-Rail-Preloads hast, dann hast du ja nur einen href und wenn du ein responsives Bild hast, da hast du ja so ein Source-Set oder du hast vielleicht irgendwie direkt ein Picture-Element, ähm, dann lässt sich das ja nicht mehr abbilden.
Ähm, oder es hat ein Sizes-Attribut noch dazu.
Und tatsächlich gibt's, äh, äh, äh, im Chrome-Browser und vielleicht irgendwann auch in anderen Browsern, ähm, gibt's, äh, gibt's das auch, dass du, äh, responsive Bilder vorladen kannst.
Und dann hast du, dann schattest du dieses Link-Rail-Preload-Ding nicht mit einem href aus, sondern mit, äh, Image-Source-Set als Attribut und Image-Sizes.
Ähm, ähm, und dann, äh, kannst du die, dann, dann lädt er eben, dann sucht, pickt er sich eben das passende Format in der passenden Größe raus und preloadet auch das, sodass dann später dein responsives Bild, das dann ein Hero-Bild ist, eben schnell sein, äh, sein Bild anzeigen kann.
Cool.
Piu.
Muss ich später nochmal, nochmal anhören, anhören, die Folge.
Echt wieder wahnsinnig viel Neues heute dabei.
Sehr gut.
Genau, und, äh, ansonsten würde ich noch empfehlen, es gibt einen schönen Talk von Jack Archibald und, äh, ähm, das SOMA, äh, oder SOMA, ähm, zu, ähm, verschiedenen Bildformaten, wo die so JPEG zeigen und WebP und AVIV, ähm, der echt,
super cool ist, so wie eigentlich alles von denen, die macht übrigens auch einen Podcast, ähm, genau, und, äh, ja, da sind so ein paar Details, zum Beispiel, dass es halt AVIV und WebP natürlich cooler sind als JPEG, weil die kleiner sind, aber teilweise, dann wiederum den Nachteil haben, dass sie zum Beispiel nicht progressiv rendern können, weil sie eigentlich, äh, Ableitung von Videoformaten sind, die sowas gar nicht vorsehen und so.
Genau, und, genau, und je nach Szenario ist es vielleicht auch gar nicht so schlecht, ein gut komprimiertes JPEG zu nehmen und auf WebP zum Beispiel zu pfeifen, äh, genau.
Jo, und dann gibt es noch, äh, was Neues, das ist auch ganz brandneu, ähm, das kann man sozusagen, äh, Test-Driven in, in Chrome auch, ähm, das ist das Importance-Attribut, ähm, also man kann auf, äh, auf Excel-Ressourcen dieses Importance-Attribut setzen,
und dann kann man Low, Medium und High, ähm, ähm, äh, als Wert setzen und klassischerweise sortiert der, sagt der Browser, CSS ist das Wichtigste und Fonts und dann, äh, kommt JavaScript und so Bilder, die sind gar nicht so wichtig und am unwichtigsten sind, ähm, ähm, äh, Ajax-Requests zum Beispiel.
Aber wenn du jetzt so ein Hero-Bild hast und du wirklich, du willst so, hier, Browser, gib Vollgas, ich hau das, du sollst es direkt laden, dann kannst du halt hingehen und dieses Importance-Attribut auf dieses Bild und seinen Preload-Tag draufsetzen
und das sozusagen dem künstlich eine, eine höhere Importance geben, also quasi den, den Regler auf 11 drehen und der Browser wird dann eher vielleicht ein JavaScript, äh, erstmal hinten anstellen, um sich erstmal um dieses Bild zu kümmern.
Genau, und das kann man jetzt schon sozusagen ausprobieren, äh, und das funktioniert so, dass man sich für, also bei Google für einen Origin-Trial anmelden kann, das ist sozusagen, man sagt, ich, äh, hier, cooles neues Feature, ich will das mal testen mit meinen Usern, ähm, bitte gib mir einen, ich möchte mich hier anmelden und dann kriegst du einen Key
und den packst du in deinen HTML-Source-Code, äh, als Token rein und, äh, dann ist deine, deine Seite sozusagen, gelau listet für dieses, äh, noch in der Entwicklung befindliche Feature und die sagen, im Gegenzug musst du uns aber Feedback geben, also dein, dein Token läuft immer nach so und so vielen Wochen aus
und dann sagen die dann, äh, entweder unser, unser Origin-Trial ist dann erstmal beendet oder du kannst es nochmal verlängern, aber nur, wenn wir von dir auch ein bisschen irgendwie, äh, gutes Feedback kriegen, wie das denn jetzt alles funktioniert hat bei dir.
Geschickt gemacht.
Das ist so strange. Ich muss mich anmelden, um ein Chrome-Feature mit meinen Nutzern testen zu können.
Genau, weil das, äh, ansonsten, äh, das wäre das auch für dich, wäre das nur erreichbar, indem du in die, äh, in deine Chrome-Flags gehst
und da dann irgendwelche experimentellen Web-Plattform-Features aktivierst, aber das wäre dann ja nur was, was du selber austesten könntest, aber wenn du.
Ja, aber das ist ja bei allen anderen Features auch so, finde ich, äh, also, fände ich ja okay, wenn nur ich das ausprobieren kann.
Also, finde ich, finde ich schon abenteuerlich irgendwie.
Ja, ich glaube, es gibt halt so bestimmte Features, da möchte man, äh, bevor man die dann sozusagen, äh, so absegelt, wie die sind, äh, möchte man schon einfach ein bisschen mehr Daten,
sammeln, so draußen, aber eben das Feature noch nicht auf die Welt loslassen, weil sonst passiert halt, passieren halt so
diese typischen Dinge, dass halt auf einmal irgendwelche Web-Kit-Prefixen, Sachen überall benutzt werden, die eigentlich irgendwie noch nicht mal fertig waren.
Aber das ist schon, das ist schon abenteuerlich. Das heißt, wenn ich jetzt, ich muss mich da anmelden, damit Google in den Browsern meiner Nutzer das Feature automatisch anschaltet, aber nur auf meiner Seite.
Genau.
Wow, okay, das, das finde ich schon sehr fancy. Weiß ich nicht, ob ich das gut finde.
Ja.
Ja, wenn du es nicht gut findest, musst du es auch nicht machen. Also, es kann auch sein, dass du, äh, dass du woanders, äh, tatsächlich diese Features, solche Features nutzt, ähm, ohne es zu merken.
Nee, ich finde das Feature an sich schon gut. Ähm, nur die Art, wie, äh, damit umgegangen wird dann von Googles Seite, finde ich irgendwie, keine Ahnung, vielleicht gibt es da ja echt einen guten Grund, habe ich jetzt, erschließt sich mir jetzt nicht so ganz.
Ja, die wollen eben den Finger draufhalten noch. Also, die wollen das wieder einfangen können, wenn es irgendwie alles doof ist.
Ja, es ist letzten Endes ja nur ein Attribut, was ich ins HTML reinschreibe, wenn ich das jetzt richtig verstanden habe, ne?
Ja, genau.
Ja, okay. Na gut. Aber das ist auf jeden Fall interessant, kannte ich noch nicht. Ähm, es würde, würde die Einstiegshürde für, ich kann, äh, ja, ich brauche verrücktes Tooling, um irgendwie die, äh, die Reihenfolge beeinflussen zu können, oder die, die Wichtigkeit, ähm, sehr, sehr, sehr senken, dass ich einfach nur das mit HTML-Attributen steuern kann, was ich an sich eine gute Sache finde.
Genau, also JavaScript ist, ähnlich einfach wie Loading Lazy.
Ja, genau. Also JavaScript ist, äh, was die Dinge angeht, einfach, äh, so das völlig falsche Pferd, was einfach daran liegt, dass es, äh, dass bis das JavaScript da ist, also das, das dauert ja, das geht zwar für uns gefühlt schnell, aber für den Browser sind das ja Äonen, bis er das, äh, an den Start gebracht hat.
Und da ist halt der Zug für, für sowas schon abgefahren.
Mhm.
Genau.
Jo, das wäre der Largest Contentful Paint, ähm, den man damit auf jeden Fall deutlich beschleunigen könnte.
Und dann gibt's, äh, so eine Batterie an so Metriken, die irgendwie alle so am Ende aufs Gleiche hinauslaufen.
Das ist, äh, die Time-to-Interactive, äh, Total-Blocking-Time und First-Input-Delay, die alle letztlich, äh, sozusagen sabotiert werden durch die, durch, durch die Menge JavaScript, die man auf seiner Seite hat.
Ähm, größtenteils zumindest, ähm, äh, äh, was auch da so ein bisschen dazu zählt, ist, äh, also, das im Prinzip, wie lange ist der Browser dann beschäftigt mit Dingen, die ein Browser so tut.
Und, äh, das ist, ähm, in der Mehrzeit der, der Fälle JavaScript irgendwie Parsern und Ausführen, äh, und auch ein Stück weit, äh, Rendering, also, da der Single-Threaded ist, kann der, wenn er halt da irgendwie aufwendig layouten und rendern und
painten muss, dann, dann muss er das eben auch mit dem einen Thread machen und dann, äh, blockiert das genauso. Und dann, dann kann der nicht reagieren auf User-Input oder so.
Genau, also, da ist eigentlich die, die, die Devise, so viel JavaScript rauswerfen, wie es, wie möglich. Ähm, das geht ja mittlerweile, also, das, wir haben es jetzt gesehen, Loading gleich Lazy und so, das macht ganz viel Dinge überflüssig. Ich finde auch so CSS-Features wie
Scroll-Snapping, damit kann man schon, also mit sehr wenig JavaScript schon so irgendwie tolle Karussells bauen. Das war nicht ganz perfekt, also sowas wie so ein unendliches Karussell, das dann immer wieder von vorne anfängt, also indem man trotzdem immer nur nach rechts weiter scrollt, so sowas geht halt einfach nicht. Genau, aber, ähm, das ist vielleicht so ein Kompromiss, den man, den man eingehen kann, damit man einfach nicht, äh, so viel JavaScript immer auf die User drauf wirft.
Genau, und, äh, was, was auch hilft, ist, ähm, ähm, modernes ES6 aus, ausliefern, ähm, und wenn man ältere Browser bedienen will, dann gibt's ja auch noch die Möglichkeit, für die zusätzlich das zu transpilieren, und dann gibt's ja dieses
Differential Loading, ich weiß nicht, habt ihr damit schon was zu tun gehabt? Ja, ne?
Also, das ist ja quasi das ES6 für die Browser-Leads, die es können, und, äh, und dann halt, äh, polyfillst und nur in den Browsern das lädst, was gepolyfillt werden muss, äh, was du in den Browsern auch brauchst.
Genau, ja, da gibt's ja entsprechende, so, äh, Attribute, die man auf das Script-Element setzen kann, die so als Weiche fungieren, sozusagen, zwischen beiden Welten.
Genau, wobei man das, äh, genau, so bei, äh, für die modernen Browser würde man dann Script-Type-Module ja machen, ähm, da muss man nur wissen, dass, äh, diese Sachen gehen immer nur asynchron zu laden, also nicht blockierend, wenn man seinen JavaScript irgendwie so blockierend in der Seite braucht, eventuell, das kommt ja vor, so kleine Teile, die man auf jeden Fall braucht, dann, äh, dann kann man keinen Type-Module benutzen, ähm, genau, aber ansonsten,
entspräche ein Type-Module-Skript, ein Standard-Skript, was, äh, das, äh, das Differ-Attribut trägt.
Genau. Ähm, was ich dann auch noch ganz gerne mache, ist, dass ich, ähm, dass ich auch nicht alle Komponenten auf der Seite auf einmal initialisiere, sondern, ähm, mit einem Intersection-Observer ähnlich wie bei den Lazy-Bildern gucke, wo, wo ist diese Komponente und erst, wenn sie dann so langsam so in den spannenden Bereich kommen, dann sage ich, okay, jetzt,
komm, dann, jetzt kannst du sie initialisieren, damit die dann gleich fertig ist und je nachdem, auf so einer sehr langen Seite gibt's vielleicht auch ganz viele Komponenten, die nie initialisiert werden, äh, in diesem Lifecycle.
Genau, und, äh, dann gibt's, äh, gibt's noch so ein paar JavaScript-APIs, die, die so ein bisschen, die, die auch so helfen, äh, Last vom Browser zu nehmen oder das Ganze so zu gestalten, dass der, dass der nicht irgendwie so an seine Grenzen kommt.
Das eine ist, äh, hier, Request-Idle-Callback, dass man sagt, hör mal, äh, mach du was zu machen musst, wenn du irgendwann aber nichts mehr zu tun hast, dann könntest du diese Funktionen da mal ausführen für mich.
Ähm, da kann man auch sagen, so, da kann man noch zusätzlich als Parameter sagen, aber spätestens nach fünf Sekunden oder so.
Und, äh, dann gibt's noch so neue, neue APIs, zum Beispiel von Facebook, die haben die Is-Input-Pending-API, das heißt, da könnte man in seinem JavaScript abfragen, hey, hat der User eigentlich hier schon was, hat der was geklickt gerade?
Also erwartet der, dass jetzt irgendwie das User-Interface reagiert auf ihn?
Und die sagt dann so, ja oder nein?
Und bei nein, alles klar, dann können wir weiter hier Vollgas geben und den Thread blockieren.
Und wenn der User aber geklickt hat, dann würde, würde der, könnte man in seinem Code dann eben sagen, okay, gut, äh, dann, ähm, mach ich halt irgendwie per Set-Timeout oder Request-Idle-Callback eine Pause,
dass der sein, sein quasi visuelles Feedback bekommt, dass der happy ist, dass die Seite irgendwie reagiert hat auf, auf seinen, äh, Input und dann macht man eben weiter.
Ach, sehr cool. Aber das ist alles noch Zukunftsmusik, ne? Also, Request-Idle-Callback?
Äh, ne, ist drin. Ja, gibt's alles schon.
Oh ja, tatsächlich. Cool, noch nie was davon gehört.
Ne, ich auch nicht. Also, ich, ich hab immer so wieder das Gefühl, es gibt so viel, äh, und es kommt immer mehr dazu, was man einfach noch nicht kennt und nicht weiß.
wo ich glaub, man muss, äh, einfach so ein bisschen ablegen im Hinterkopf, wenn man's dann mal braucht.
Ähm, ich hab jetzt auch grad, äh, kurz, äh, nachgeschaut, MDN-Window-Request-Idle-Callback.
Genau, da bin ich auch grad drauf. Äh, ja.
Also, ist experimental, aber ist tatsächlich, äh, gut verbreitet. Ja. Also, eigentlich komplett nutzbar.
Genau, gibt's schon echt lange, aber irgendwie so, ich glaub, der, die anderen Browser, die, die springen nicht so richtig auf den Zug auf, aber dann, dann nutzt man da eben, äh, Set-Timeout oder irgendwie so was.
Ja, Safari ist da wieder so ein bisschen der, der Bösewicht, da muss man's erst, äh, enablen, als Experimental, aber die anderen, die haben's alle.
Der Böse. Schade, schade.
Der Böse.
Safari-I-E.
Nee, oder nee.
Safari ist da nur I-E-E.
Genau, und, äh, dann, äh, das, das wär jetzt so im Prinzip so, was blockiert die Seite und, äh, was geht halt, äh, der Userin oder dem User schwer auf den Keks, dass die Seite irgendwie nicht reagiert, ähm, so das, was man da an Maßnahmen treffen kann.
Ähm, und dann gibt's, äh, noch was, dass, das einen, äh, schwer auf die Palme bringt, das ist, ähm, wenn's Layout-Shifts gibt's auf der Seite, also, wenn quasi, so klassischerweise, komm auf eine Seite und dann ploppt irgendwie ständig irgendwie alles auseinander, weil Dinge nachgeladen werden und, äh, man fängt an zu lesen und das, äh, ploppt dann irgendwie in eine andere Ecke und, ähm, so.
Man kann mit der Seite erst mal gar nicht arbeiten, man lädt die und legt sein Smartphone erst mal beiseite und dann eine Minute später ist sie endlich fertig.
Das sind halt Layout-Shifts, äh, die, äh, die schwer an die Psyche gehen und, äh, deshalb sagt Google eben, äh, die, die messen wir jetzt und dann, äh, ja, wenn du zu viel davon hast, dann strafen wir dich ab.
Zurecht.
Oha.
Und das, genau, ähm, und dafür gibt's, äh, das kannst du auch selber machen im Browser, es gibt nämlich den Performance-Observer, den kannst du befragen, der sagt dir dann, wo über Layout-Shifts stattgefunden haben und welche Elemente beteiligt waren.
Und, ähm, genau, also da muss man sich eben Gedanken machen, wie kann ich die vermeiden, da kommt's so ein bisschen drauf an, äh, was sind das für Elemente, die diese Layout-Shifts verursachen, ähm, und dann davon abhängig kann man eben verschiedene Lösungsstrategien gehen.
Also eine Sache ist ja, äh, dass man irgendwie, äh, Bilder einbindet und weil man die responsiv einbindet, äh, macht man seinem CSS eine Widz auf 100% und weil, damit die dann nicht verzerrt sind, sagt man bei Hide Auto.
Genau, so weit, so gut.
Nur jetzt ist es so, dass der Browser eben diese Hide noch nicht kennt, bis er das Bild nicht geladen hat, weil dann, so anhand der Bilddatei sieht er dann, ah, guck an, äh, das ist jetzt so das Seitenverhältnis von diesem Bild, also ergibt sich die Höhe automatisch, so, und dann ploppt das eben rein und alles da drunter wird weggeschoben und schon sind wir wütend.
Ähm, und da gibt's, äh, jetzt auch seit einiger Zeit.
Da weiß ich aber nicht, ob der Browser Support schon vollständig ist, dieses Aspect Ratio, diese CSS Property, die man da draufsetzen kann, oder, ähm, was ich auch gerne gemacht habe, als es die noch nicht gab, ist, dass ich, ähm, dass ich ein responsives Bild habe, da, ähm, da hast du das, äh, Source Set Attribut, mit dem du das befütterst und in das Source Attribut habe ich ein SVG geinlined, also quasi ein, äh, ein SVG, das
quasi gar keinen Inhalt hat, das einfach nur eine bestimmte Größe aufspannt und das, das habe ich quasi per Data URI da rein, in das Source
reingeinlined und, äh, das lädt ja dann sofort, äh, und steht erstmal parat, bis dann die echten Bilder über das Source Set reinkommen.
Genau.
Es wird immer verrückter.
Ja, und dann gibt's natürlich, äh, gibt's noch so andere Dinge wie, also da hatten wir bei der Rheinischen Post natürlich auch viel mit zu tun, das ist, ähm, äh, Werbebanner, die, das ist ja auch eine, also, was da im Hintergrund
passiert, das will auch gar keiner wissen, aber im Prinzip ist das so, so, das, das, das geht so über so, was weiß ich, wie viele Marktplätze, wird ein Slot sozusagen feil geboten und
Und wer kriegt irgendwann den Zuschlag und spielt eine Werbung aus und es ist völlig unklar, wie groß diese Werbung ist, also es gibt so bestimmte Kandidaten, die da rauskommen können, also, so das Bewerberfeld ist schon ungefähr bekannt, aber was, wer am Ende dann da, äh, auftaucht, das weiß man nicht.
Und deswegen, äh, ist es klassischerweise so, dass so diese Werbeslots früher, die haben keine Größe bekommen, das hat sich ergeben durch die Werbung, die dann da raus, äh, die dann da auf einmal aus der Torte hüpft und schon hatte man eben wieder so ein Layout-Shift dadurch.
Genau, und, äh, wir haben das bei der Reischen Post und das machen auch viele so gelöst, dass wir sagen, äh, wir haben einen Container, den wir, so ein Platzhalter-Container, den wir da, den wir an der Stelle, wo die Werbung mal kommen wird, aufziehen und der ist so groß wie die größte Werbung, die da kommen könnte.
Und, äh, wenn die kommt, dann ist ja alles cool und wenn eine kleinere kommt, dann ist, äh, dann lassen wir die per Position-Sticky einfach so ein bisschen da drin wandern, also dann, dann wandert die beim Scrollen mit und sobald der Container dann so aus dem Bild geht, dann zieht der quasi die Werbung wie an so einem, äh, Regenschirm-Griff so mit sich raus.
Gesehen hab ich das schon, ja, und, ah, ich dachte, das ist einfach nur so ein Effekt halt.
Ich habe immer gedacht, das ist, dass die Werbung ein bisschen nerviger wird und man sie länger sieht.
Das kann ja sein, dass es auch dazu gehört.
Aber das sagen die nicht rein zu.
Ja, klar, natürlich.
Ja, das habe ich auf jeden Fall schon so gesehen und es hat mich genervt.
Aber jetzt verstehe ich ja, wahrscheinlich so ein Layout-Sprung hätte mich vielleicht mehr genervt.
Ja, genau.
Und das siehst du auch.
Also nicht nur die randische Postseite, auch ganz viele andere Newsseiten sind echt viel angenehmer zu konsumieren geworden.
Finde ich, seit Google diese, seine Metriken veröffentlicht hat und auch so hinterher ist, weil die tatsächlich ja einen Bezug zu guter Nutzerzufriedenheit haben.
Und ich merke das auch.
Also früher haben mich Newsseiten einfach nur wütend gemacht.
Und mittlerweile, ich finde, sie sind jetzt noch nicht die Krone der Schöpfung.
Also das werden sie erst, wenn man dann tatsächlich ein zahlungsfürchtiges Abo hat, dann muss ich sagen, riecht sie gut.
Aber es ist auf jeden Fall, es ist in Ordnung und so, damit kann man arbeiten so.
Ja stimmt, unter dem Gesichtspunkt habe ich das noch gar nicht betrachtet, dass das wirklich gut sein kann für mich als Endnutzer,
wenn Google da so drauf pocht und sagt, wir strafen euch ab und ihr rankt nicht mehr so gut.
Weil die Leute, die ihre Seite mit Werbung vollklatschen, damit sie möglichst viel verdienen, die wollen ja auch möglichst viele Klicks auf ihre Seite haben.
Und die sind ja auch interessiert daran, dann wieder weiter oben zu ranken und wollen nicht abgestraft werden.
Also müssen sie was tun, damit mich die Werbung auch nicht mehr so nervt, weil alles rumhüpft.
Cool.
Und die haben speziell für die Nachrichtenseiten haben sie noch so einen weiteren Köder sozusagen ausgelegt.
Und zwar, wenn du in der mobilen Suche bist, dann kriegst du so ein News-Karussell, je nachdem, erstmal eingeblendet.
Und früher war es so, dass nur AMP-Seiten sich qualifiziert hatten, da drin aufzutauchen.
Und darum müssen auch alle armen News-Seiten-Programmierer immer noch AMP-Varianten ihrer Templates bauen und weinen dabei ganz bitterlich.
Genau, und seit ein paar Monaten sagt Google, nee, also wenn eure Core-Web-Vitals, also diese Metriken, wenn die passen, wenn die im grünen Bereich sind, dann braucht ihr keinen AMP, dann kommt auch eure normale Seite ins Karussell rein.
AMP ist ja, glaube ich, eh tot, oder? War doch irgendwie vor einer Weile, dass es hieß, dass Google das so stark geforciert hat, dass es jetzt doch eigentlich tot ist.
Ja, wäre auf jeden Fall nicht, also wäre schon okay.
Also da ist aus dem AMP-Kosmos ist schon so das ein oder andere Coole so rausgekommen.
Also die, das ist ja dann oft so, das war ja früher bei Microsoft schon so, dass irgendwie die Outlook-Web-Access-Abteilung gesagt hat, hey, Internet Explorer-Abteilung, baue mal irgendwas ein, wo wir Daten später nachziehen können.
Und dann haben die gesagt, cool, machen wir, wir nennen das dann irgendwas mit XML, dann finden es alle geil und wir bauen es ein.
Und so kam halt das XML-Http-Request.
Und so ist es bei Google ja auch.
Also dann ruft die Google-Maps-Abteilung an und will ein Feature haben.
Und genauso hat halt die AMP-Abteilung so einige coole Features auch erdacht und eben dann auch bekommen.
Die wir aber auch nutzen können.
Ja.
Ja, ich glaube, das darf jetzt gehen.
Ja, ich denke auch.
Genau, also ich denke, dass wir auch da bald gar nicht, wirklich nicht mehr viel von sehen, weil auch tatsächlich die ganzen Nachrichtenseiten froh sind, dass sie sozusagen diese extra Branch nicht weiter pflegen müssen und die langsam abschalten.
Genau.
Bin ich froh, dass ich mich da nie eingearbeitet habe.
Ich war schon mal kurz davor wegen irgendeinem Projekt und dann ist es doch nicht zustande gekommen und jetzt bin ich echt froh.
Ich glaube, so ist es vielleicht noch okay, wenn man sagt, ich setze halt auf AMP auch tatsächlich als Framework, um meine Seite zu bauen.
Also die tatsächliche Seite, nicht noch ein Klon von der Seite für Google.
Dann glaube ich, kann das schon okay sein.
Also am Ende ist es auch nur ein Framework mit bestimmten Schwerpunkten.
Genau, aber es ist dennoch, glaube ich, irgendwie eher auf dem Rückzug als auf dem, noch irgendwie weiter auf dem Vormarsch.
Genau, das sind die Layout-Shifts und da ist es so, dass die einfach, die werden, da misst Google über eine gewisse Zeit nach dem Laden und zählt die dann eben alle zusammen und zwar auch nur die, die auch in deinem Viewport passieren.
Wenn die irgendwie unterhalb des Viewports passieren, ist das ja egal, das stört ja auch keinen und darum werden die nicht mitgezählt.
Und da musst du halt gucken, dass du in der Summe nicht zu viel, zu viele Layout-Shifts hast und die werden, die kriegen dann so einen, so einen quasi so einen Weight, so ein Gewicht.
Und das hängt davon ab, wie groß ist denn dieser, der Bereich, der da weggeschoben wurde durch dieses Dings.
Und je größer der ist, desto höher das Weighting oder das Gewicht.
Okay.
Ja, und dann kommen wir zur Rendering-Performance an sich.
Also die, da hat man ja gesagt, die kann den Browse auch blockieren.
Und da hatten wir ja auch eingangs über DOM-Tremap gesprochen, denn genau je umfangreicher der DOM-Baum ist und je tiefer, desto länger ist der Browser beschäftigt, einfach weil das so quasi so ein bisschen so in Wellen durch das DOM durchgeht.
Und wenn hier was irgendwie größer wird, dann drückt das irgendwas anderes weg und das ist einfach dann viel Arbeit.
Dementsprechend geht es schneller, wenn man da nicht komplett eskaliert.
Und ich hatte aber auch gesagt, man kann, man kann auch.
Ich glaube, wir sind schuldig.
Ja, also vielleicht bei SVG, weiß ich nicht.
Die haben ja, die arbeiten ja nach anderen Regeln, da geht das ja vielleicht.
Genau, aber ihr könnt auch, ihr könnt euch auch vielleicht, ihr könnt auch faul sein und sagen, hey, wir lassen das einfach, wie es ist.
Und, und ihr könnt dann bestimmte Joker ziehen.
Zum Beispiel könnt ihr, gibt es ja die CSS-Contain-Property.
Ich glaube, die hattet ihr auch mal besprochen.
Habe ich mir auch nochmal notiert, dass wir das nochmal ansprechen, sehr gut.
Ja, genau.
Und da sagst du, also da muss man gucken, das ist auch ein Stück weit so ein Footgun, also ein Ding,
mit dem man sich auch schon mal in den Fuß schießen kann.
Aber man kann, man gibt, man nutzt das in CSS und sagt dann zum Beispiel Contain Paint oder Contain Layout.
Und man gibt dem Browser dann bestimmte Garantien.
Also man sagt, egal was in diesem Element jetzt so stattfindet, das Layout bleibt, wie es ist und es bleibt stabil.
Und du musst irgendwie nicht mit irgendwie allem rechnen, sondern kannst sozusagen einen Shortcut nehmen beim Layouten dieses Elements und andere Elemente, die die Contain Property nutzen.
Und der andere Joker, den ihr ziehen könnt, ist Content Visibility.
Das habe ich aufgeschrieben, perfekt.
Super.
Das ist im Prinzip ein Lazy Rendering von, ja, des Layout Trees.
Also du kannst Elemente mit Content Visibility auto markieren und der Browser wird sie erst dann anfangen zu rendern, wenn sie eben deinem Viewport zu nahe kommen.
Also ähnlich wieder wie bei dem Lazy Bilderladen und genau.
Und das Einzige, wo man da drauf achten muss, ist, dass man dem, es gibt noch eine zweite Eigenschaft, ich will gerade, die ist Intrinsic Size, glaube ich, oder sowas.
Die muss man vergeben, damit man eine Platzhalterhöhe erstmal für dieses Element hat.
Weil wenn man die nicht vergibt, dann kollabieren die alle zu so einen Pixel oder null Pixel hohen Etwassen.
Und wenn man seine ganze Seite damit ausstattet, dann wird die geladen.
Und dann liegen diese, im Zweifelsfall, alle Elemente quasi wie so ein Akkordeon, das zusammengedrückt wurde, oben in deinem Viewport.
Dadurch, dass sie im Viewport liegen, sagt der Browser, ich muss die alle jetzt painten.
Und dann zeichnet er die alle.
Das willst du nicht.
Du willst ja wirklich nur, du willst ja nur die Oberen painten.
Und darum musst du denen quasi so eine künstliche Höhe geben, eine künstliche Ausdehnung in der Höhe.
Und da kannst du im Prinzip irgendeinen Wert nehmen.
Das ist völlig egal.
Hauptsache irgendwie, ich sag mal so, mindestens 1000 Pixel wäre nicht schlecht.
So oder, genau.
Und dann passiert halt dieser Fall nicht.
Also Content Visibility und auch mit der Intrinsic Size, das habe ich auf unserer, also auf meiner Firmenseite auch mal eingesetzt, nachdem wir es in der Folge drüber hatten.
Und das hat tatsächlich auch bei Lighthouse dann ein paar Pünktchen direkt mal mehr gegeben.
Also das ist echt was, wenn man sich da ein bisschen mit beschäftigt.
Und zumindest gerade mal so Sachen wie, klar, Hero weiß ich, der ist oben und alles andere.
Da bin ich mir zu 100% sicher, dass das erst nach Scrollen auftaucht.
Da kann man schon tatsächlich performance-mäßig was rauskitzeln.
Ja, genau.
Und am besten, also bei den oberen Sachen, wo du eh weißt, die sind am Anfang schon da, da setzt du dann keine Content Visibility drauf, weil auch wieder so, da muss er dann irgendwie erstmal rausfinden, ob das gerendert werden muss.
Und wenn du das eh schon weißt, dann muss er das, dann nimmst du es einfach weg.
Genau.
Werde ich auf jeden Fall bei uns mal einbauen.
Das werde ich auf jeden Fall mal mit experimentieren, weil ich glaube, das könnte tatsächlich eins unserer Probleme lösen.
Ja.
Genau, und dann haben wir eigentlich dann renderingmäßig haben wir noch die, also jetzt haben wir ja gerade darüber gesprochen, wie können wir dem Browser generell so vielleicht so initiale Last wegnehmen, nachdem er die Seite zum ersten Mal gerendert hat.
Da gibt es aber noch so Dinge wie eben flüssige Animationen und Co.
Das kennt ihr wahrscheinlich alle schon, also es gibt einfach bestimmte CSS-Eigenschaften, die lassen sich prima an eine Grafikkarte wegdelegieren und manche nicht.
Also eigentlich die Mehrzahl nicht, das heißt, wenn man etwas sehr performant, also sagen wir mal mit 60 oder 120 Frames pro Sekunde jetzt bei den neuen Apple-Geräten relevant animieren möchte, dann gibt es eigentlich nur die Transform-Eigenschaft, Opacity und die Filter.
Die sind alle Hardware beschleunigt und das macht die Grafikkarte halt auf der linken Pobacke und genau, deswegen kann man mal gucken, da gibt es so viele Tricks, wie man irgendwie Dinge am Ende mit diesen Eigenschaften animieren kann, obwohl man im ersten Moment vielleicht denkt, das geht gar nicht.
Also so Sachen wie, ich möchte die Hintergrundfarbe ändern, aha, dann machst du einfach zwei Elemente und du änderst einfach, die animierst die Opacity von beiden quasi gegenläufig und dann hast du quasi dein, oder du nutzt den Hue-Filter, um das Farbrad zu drehen, dann hast du das auch, also anstatt eben die Background-Color zu animieren.
Genau, wenn man diese Hardware-beschleunigten Sachen animiert, dann ist es so, dass in dem Moment, wo du die Animation loskickst, dann muss der Browser, dann merkt der Browser, aha, cool, alles klar, ich muss das jetzt an die Grafikkarte geben.
Dann extrahiert er, dann extrahiert er dieses eine Element sozusagen aus der Zeichenfläche, macht er aus zwei Zeichenflächen, also einen Composite-Layer macht er da aus der einen und schickt die dann in die Grafikkarte, die die dann weich animiert.
Und wenn die Animation zu Ende ist, dann passiert das Umgekehrte, dass er diese Composite-Layer nimmt und wieder zusammenbackt mit der ursprünglichen, die unten drunter liegt.
Und dieser Vorgang, den merkt man manchmal, dass der Browser irgendwie mal kurz quasi stehen bleibt, um diese Arbeit zu verrichten.
Und das kannst du, dem kannst du schon vorgreifen, indem du sowas machst wie eben Transform Translate Z.
Also das ist so der Klassiker.
Ich benutze immer gerne Backface Visibility Hidden.
Das setzt sich drauf, weil das ist so eine Property, die kein Schwein braucht.
Und die, die einem, die, die einem dann auch nicht in die Quere kommt später, also, weil wenn man Transform animiert und muss immer dran denken, Translate Z noch irgendwie beizubehalten, nervt.
Genau, und damit, damit zwingt man quasi dieses Element von Anfang an in so einem Compositing-Layer, aus der es auch nicht herauskommt.
Und damit hat man, spart man dem Browser später die Arbeit, das quasi rauszuziehen und reinzubacken wieder.
Moritz, ich glaube, das ist die Lösung für unser Performance-Problem mit unserem Glow-Effekt-Easter-Hack-Gedöns, wo wir ein Bild haben und dann noch irgendwelche Glows drüber.
Also wenn wir da Backface Visibility draufsetzen und damit Compos-Gedöns haben wir schon.
Ja, ich befürchte, das haben wir schon.
Aber vielleicht ist es nicht auf dem richtigen Element.
Das besteht ja aus einer Myriade an verschachtelten, warte mal einen Moment, ich gucke gerade kurz nach.
Also bei mir ist es ja, bei mir ist es ja superflüssig.
Außer während wir streamen.
Wenn wir streamen und wir machen unsere Seite auf, dann ist es vorbei.
Das ist das H1-Element und das hat schon Backface Visibility hidden.
Okay.
I'm sorry, Dave.
I can't do that.
Schade, schade.
Das ist es leider nicht, das hatten wir schon ausprobiert.
Ich weiß aber, ich habe aber glaube ich das Problem gelöst, dass das in Safari ein bisschen komisch aussieht.
Da muss ich nochmal drauf gucken, weil da ist, wenn man es nämlich animiert, sodass dieses Wow kommt, verschwindet.
bei diesen Zeichen, die animiert werden, der Glow.
Warum auch immer.
Das ist, glaube ich, so ein Safari-E-Bug.
Ja, muss ich gerade sagen.
Das Gute ist, der, also wir beide, also Konstantin und ich, wir haben das ja auch noch nie bemerkt als Windows-User.
Ja, ich benutze den Safari eigentlich auch nur zum Testen, ja und halt auf dem iPhone.
Da ist es halt sichtbar, da habe ich ja keine Wahl.
Aber gerne, also an dich, Shep, oder auch an alle Hörer und Hörerinnen, wenn ihr eine Idee habt, wie man bei uns diese Animation mit diesem Glow, bei WoWiRsen ist vorne auf der Startseite, wenn ihr, dass das performanter geht und nicht irgendwie die Seite in die Knie zwingt oder den Rechner in die Knie zwingt, gerne mal ein bisschen rumspielen.
Und wenn das irgendwie noch performanter geht und man da noch zwei Sachen hinschreiben kann oder irgendwas weglassen, dann gerne mal melden, weil da haben wir schon ein bisschen dran rumgedoktert.
Wir haben jetzt nichts, derzeit noch nichts gefunden.
Und wie gesagt, Backface Visibility Hidden ist da auch drauf.
Vielleicht muss man mal rumspielen, dass es vielleicht das falsche Element ist und da innen drin mal ein bisschen noch rum vorwerken, ja.
Ich schaue mir das auf jeden Fall mal an.
Also tatsächlich ist mir das auch aufgefallen.
Also wenn ich eure Seite aufmache, dann sobald das quasi aus der Sichtfläche gescrollt ist und der Browser das nicht mehr zeichnen muss, dann wird es halt deutlich flüssiger.
Also da hat er schon ein bisschen dran zu knapsen.
Also bei mir, ich höre es jetzt gerade wieder, ich hatte sie kurz auf und mein Rechner dreht den Lüfter hoch und ich mache sie zu und ein paar Sekunden später ist es wieder gut.
Ja, vielleicht ist es tatsächlich, vielleicht muss man auf die einzelnen Buchstaben gehen und da den Style, das Backface Visibility noch, weil das stimmt, das sind ja die Elemente, die animiert werden.
Es ist nur auf dem Parent der Zeit.
Ja, das wäre cool.
Also wenn du da mal drauf gucken könntest und da irgendwie eine Idee hast, sehr, sehr gerne her damit.
Ja, mache ich auf jeden Fall.
Genau und in den Shownotes oder vielleicht, je nachdem, ob du die reinmacht oder nicht, ich habe hier noch einen Link zu einem ziemlich alten YouTube-Video, wo aber auch nochmal so quasi erklärt wird, wie rendern Browser eigentlich,
wie painten die, dass sie so Kacheln vorgehen und das packen wir alles rein, auf jeden Fall.
Fand ich sehr, sehr cool, also damals und ist immer noch meine Referenz.
Genau, das sind so die Sachen, die wir jetzt, die so sozusagen zu unmittelbar, zu unserem, zu unserer Arbeit als Frontend-Menschen gehört.
Dann kann man noch so, gibt es noch so ein paar Kleinigkeiten, die wir noch so machen können, um so die letzten Register zu ziehen.
Also so Gatsby und Co. machen das, dass man so ein bisschen so preloadet und prefetched.
Wenn man jetzt irgendwie so denkt, ja, Leute, die, die irgendwie zum Beispiel mit dem Mauscursor so sich schon auf so einen Link zu bewegen, da könnten wir ja schon mal ein Prefetch starten,
so dass dann, wenn der Link geklickt wird, patsch, die nächste Seite einfach schon schneller da ist.
Da kann man so gerade so längere Serververarbeitungszeiten ganz gut mit verdecken.
Genau, also man, da gibt es auch eine Library, die heißt Quicklink, die genau das macht, die man einbinden kann.
Und neben dem Prefetchen gibt es noch die Möglichkeit im Chrome-Browser auf jeden Fall des Pre-Renderns.
Ich weiß nicht, ob ihr das noch kennt von früher, also ganz früher gab es das mal.
Da konnte man Link-Rel-Pre-Render machen und dann hat der Browser tatsächlich im Hintergrund die Seite gezogen und in einem quasi unsichtbaren Tab schon gerendert.
Und dann ausgetauscht.
Wir nutzen eine Library, die heißt Instant-Page.
Die andere, die du jetzt gesagt hast, wie ist die? Quicklink?
Genau, Quicklink.
Klang sehr ähnlich, ne?
Die kannte ich jetzt noch nicht, aber ich glaube, das macht genau das Gleiche.
Also einfach dieses Prefetch-Meta reinsetzen, sobald ich eine gewisse Zeit über einem Link mich aufhalte.
Genau, und da gibt es auch, auf Mobile hat man das ja nicht.
Da gibt es dann andere Strategien, zum Beispiel, dass man da auch wieder mit dem Intersection-Observer schaut,
kommt so ein Link gerade in den Viewport rein und dann lädt der eben all die Links, die jetzt gerade frisch in den Viewport reinkommen, die Prefetch da dann.
Ist vielleicht dann nicht ganz so effizient.
Aber irgendwie am Ende, wenn es hilft, manchmal hilft viel, viel.
Also kennst du das Instant-Page? Instant.Page, glaube ich, ist sogar die Seite davon.
Nee, aber das wird vielleicht so ein bisschen Richtung Turbolinks gehen und so Zeugs?
Nee, das ist tatsächlich das mit diesem Prefetching.
Okay.
Also das macht genau das, was Konstantin gerade gesagt hat.
Also sobald ich über einen Link haver, kriegt er das Prefetch-Attribut, wenn ich das richtig weiß.
Und das hat wohl auch eine Mobile-Strategie.
Und das ist so ein Fire-and-Forget-Skript, was man einfach in die Seite reinschmeißt und das macht er dann automatisch für alle Links.
Und das hat tatsächlich uns einiges an Performance gebracht.
Also ich habe hier einen Artikel gefunden, den schreibe ich mir auch mal auf die Shownotes.
Quicklink versus Instant-Page versus Flying-Pages.
Das ist eine Comparison, was die alles können.
Respect User-Connection Support Safari-Browser kann zum Beispiel Instant-Page nicht, kann aber Quicklink und Flying-Pages dafür.
Also generell hat Flying-Pages irgendwie alles grün und die anderen beiden haben ganz viel rot.
Ist das vielleicht ein Artikel von Team?
Stop-Peloading on Slow Response zum Beispiel und sowas.
Also da sind noch coole erweiterte Feature dabei.
Vielleicht müssen wir das mal austauschen.
Also ich schreibe es auf jeden Fall mal, habe es uns auch ins Trello gesetzt und kommt auch in die Shownotes.
Ich kann auf jeden Fall sagen, dass Instant-Page auf den Browsern, die ich normalerweise verwende, uns wirklich was gebracht hat.
Also so, ohne dass ich es jetzt gemessen habe, direkt so gefühlte Performance.
Ich klicke auf den Link und er ist einfach schneller da.
Allerdings im Zusammenspiel mit, wenn wir da jetzt gerade schon noch kurz hingehen, mit P-Jacks.
Also das ist ja so ein, das ist das, was du vorhin meintest, wo dann halt Richtung Turbolinks geht, dass da auch der Content ausgetauscht wird asynchron.
Aber halt auf normalen Links.
Und ich habe jetzt aber gemerkt, dass das verursacht dann doch einige Probleme, was Accessibility angeht.
So mit Fokus-Management eben.
Auch Usability.
Aber ich bin jetzt halt, weil ich mir jetzt mal jetzt genauer angeschaut habe, habe ich gemerkt, ja so gerade Fokus-Management und Scroll-Position mit Hashes und so, das ist so ein Ding.
Das geht mit dem nicht, genau.
Deswegen wollte ich auch mal fragen, ob du das kennst, also so Turbolinks-Ansätze, würdest du sagen, das findest du gut oder bringt das was aus deiner Sicht?
Ja, also ich glaube, wenn du das, ich glaube, wenn du die pre-geloaded hast in deinem Cache, dann ist es eigentlich egal, fast, also dann ist es wahrscheinlich genau gleich schnell.
Mit dem Unterschied, dass natürlich die klassische Seitennavigation barrierefreier ist erstmal, weil das so, damit kann halt jeder Mensch mit assistiven Technologien irgendwie was anfangen mit diesem Szenario.
Ich glaube, bei Turbolinks und Co., ich glaube, da würde ich wahrscheinlich mich nach einer Lösung umsuchen, umgucken, die vielleicht auch sowas wie Dom Diffing macht.
Ich glaube, dass die, beziehungsweise ich weiß nicht, ob die das vielleicht auch teilweise sogar machen, sodass je nachdem der Fokus eben da bleibt, wo er gerade ist und ich ihn dann vielleicht kontrolliert woanders hin lenken kann und aber nicht so dieses, ich zieh dir den Teppich unter den Füßen weg mäßige.
Ja, also wir haben das in erster Linie deswegen eingesetzt, weil wir einen Player auf der Seite haben und wir wollten, dass der weiterlaufen kann, wenn man auf der Seite navigiert, also mit einem Podcast-Player.
Das war der Hintergrund, warum wir das eigentlich gemacht haben, also weniger aus Performance-Gründen, sondern eigentlich Visibility an der Stelle.
Ja, das ist echt eine coole Idee.
Genau.
Das ist sehr gut.
Aber ich kann auf jeden Fall nur sagen, wer jetzt zum Beispiel P-Jacks benutzt oder Turbolinks, man holt sich damit eine Menge Probleme ins Haus, die man erst mal nicht sieht.
Erst mal sieht es total fancy aus, funktioniert, ich schmeiße da ein Skript rein, zack, alles super.
Aber ich habe schon einige Bugs gehabt, wo ich erst mal dachte, Mensch, was ist denn das?
Und dann guckt man in den Netzwerk, Tabs 6, ach stimmt ja, die Seite wird ja gar nicht komplett neu geladen, da wird ja nur ein Teil.
Und dann, also man zieht sich da mit einer Menge Probleme an Land, die erst mal unsichtbar sind, also mit Vorsicht zu genießen.
Gut testen mit allen möglichen Use Cases und auch mal mit dem Screenreader, Usability, ja, Accessibility, das muss man sich gut angucken und gut überlegen, ob man das will.
Ja.
Genau.
Genau, und wenn ihr dann völlig crazy seid, also es gibt auch noch, es gibt Pre-Render, da muss man nicht crazy sein.
Jetzt kommen die guten Sachen, völlig crazy, das klingt super.
Genau, das Pre-Render ist tatsächlich nicht mehr so crazy wie früher, das hatte nämlich wirklich ein paar Nachteile.
Ähm, ähm, ähm, das neue Pre-Render, das es jetzt wieder gibt, das arbeitet einfach so, dass es die, äh, die Seite zieht und da dann auch wiederum alle Ressourcen dieser Seite schon mal zieht.
Im Gegensatz zu Pre-Fetch, dass, das ja wirklich nur die eine verlinkte Ressource zieht und die dann nicht passt und durchsucht nach weiteren, äh, Ressourcen.
Das macht halt Pre-Render, das heißt also, wenn du ein HTML-Element, äh, pre-renderst, dann, äh, gibt's auch da wieder diesen Ressourcenscanner, der darüber, äh, hechelt und der dann noch die ganzen anderen Sachen einsammelt, also Bilder und so, die dann noch dazugehören.
Ähm, das zusammenbauen, das findet dann erst statt nach der Navigation.
Genau, und das alte Pre-Render hat ja wirklich im Hintergrund alles schon fertig gemacht, da, äh, wurde, äh, wenn du das falsche, äh, Tracking-Skript hattest, dann schon ein Besuch getrackt und all so Kram.
Ähm, ähm, und, und das hat halt auch, äh, ordentlich, ist auch ordentlich auf die Batterie gegangen.
Hilf mir mal kurz, ich hab das grad kurz gegoogelt, ähm, ist das der Link-Type-Pre-Render?
Genau, ja.
Also, äh, Link-REL-Pre-Render.
Ja, genau, ich mein, ja, das, äh, das ist, äh, ja, und der MDN heißt es Link-Types-Pre-Render, ja, genau, mit REL-Attribut, äh, REL-Pre-Render, okay, alles klar.
Okay, das ist nur fürs Link-Element, wenn ich das jetzt richtig sehe.
Okay, alles klar.
Dankeschön.
Genau, und das, das, was, äh, was ich schon geteasert hatte als, äh, komplett crazy, das, äh, das ist ein, äh, ein Konzept, das nennt sich, äh, Speculative-Pre-Fetching.
Und, äh, da speist du entweder in Echtzeit oder beim Bauen, wenn du einen statischen Seiten-Generator hast, Daten von Google Analytics in deinen, äh, Bild-Prozess rein.
Und, äh, du sagst dann, okay, typischerweise, äh, Besucher, die diese Seite besuchen, die gehen zu, in großen Teilen danach zu der Seite und zu der und zu der Seite.
Da brauche ich halt quasi.
Kunden, die die es kauften, kauften auch.
Genau.
Und, äh, die entsprechenden Pre-Fetches, die backst du dann eben mit in diese Seite rein.
Genau.
Und da gibt's auch einen ganz schönen Vortrag, den, wo ich hier auch einen Link hab und eine Library, die heißt, äh, Guess.
Einfach nur Guess.
Die den Umgang mit, äh, mit Google Analytics Daten auch für uns, also mit der API für uns, äh, Frontend-Lurche ein bisschen einfacher machen.
Das finde ich tatsächlich, das ist, das ist wirklich abgefahren.
Ich hab jetzt gedacht, jetzt kommt irgendwas, was ich jetzt mal eben einbaue, da bin ich mir jetzt nicht so sicher.
Das finde ich tatsächlich auch, äh, wirklich crazy.
Aber eine interessante Idee, also gerade so für, ich könnte mir das super vorstellen, für so richtig große Shopping-Seiten oder so was.
Ähm, äh, also irgendwas, irgendwas, wo es wirklich eine Rolle spielt, wo es wirklich viele Navigationsmöglichkeiten gibt.
Ähm, dass das echt was bringen kann.
Aber ich weiß nicht, jetzt so für unsere kleine Podcast-Seite ist das wahrscheinlich eher nix.
Klingt erstmal nicht so.
Also klingt nach zu viel Aufwand für zu wenig, äh, Nutzen.
Ich hab schon gedacht, einen Kandidaten im Hinterkopf, eine Seite von einem Kunden.
Ja, oder eine große, eine große News-Seite, irgendwas, wo, wo du in eine Million Richtung navigieren kannst und da dann auch viel Content, äh, dahinter steckt.
Irgendwie eine Seite halt mit, mit, mit 20 Bildern dann und, äh, wenn du woanders hingehst, dann irgendwie noch was anderes und Diagramme, keine Ahnung was.
Kann ich mir schon vorstellen, dass es echt was bringt, aber ich glaub für uns erstmal nicht.
Ja, cool.
Genau, ist auf jeden Fall, äh, genau, es ist cool und macht irgendwie Spaß, äh, so, äh, so, die, den Gedankengängen da zu folgen, braucht man wahrscheinlich nicht.
Ja, aber interessant, äh, auf was für Ideen die so kommen, ne?
Also, äh, ja.
Ich weiß gar nicht, ob ich da jetzt drauf gekommen wäre, äh, irgendwie so, so Analytics-Daten, äh, in mein, äh, Pre-Fetching oder Pre-Rendering mit, mit einzubinden und das ist eigentlich ein ziemlich guter Gedanke.
Ja, ich hab ja die These, dass das, äh, alles, dass das sind, äh, Leute, die, äh, neue Themen für neue Talks auf Performance-Konferenzen brauchen und die dann irgendwie, äh, so die wildesten Ideen durchspielen, bis dann so, ah ja, da könnte ich jetzt aber mal einen Vortrag zu machen.
Genau. Ja, das war's jetzt so, äh, von, von uns Frontend, äh, so, so aus unserem Frontend-Kosmos.
Jetzt, äh, wäre die Frage, ob ihr noch irgendwie ganz kurz über das HTTP-Protokoll reden wollt, da gibt's jetzt auch nicht ganz so viel zu sagen, das können wir ja auch schnell zusammenfassen.
Ja, klar.
Oder ob's, äh, genau, also, ähm, so, ich, ich glaube, so gang und gäbe ist ja jetzt so, würde ich sagen, HTTP 2, das hat jetzt ja dann doch, das endlich mal geschafft hat,
HTTP 1, 1.1 abzulösen, was der Vorgänger war und so jetzt im, im Aufwind, äh, oder das nächste große Ding ist, äh, HTTP 3, ähm, und, äh, genau, die, die Frage ist, also, was, äh, was hat, äh, oder was, warum braucht man 3, was hat eigentlich 2 cooler gemacht, was 1 nicht konnte?
Und, äh, und, äh, grob zusammengefasst, also, eins stammt halt noch aus den 90ern, das ist so quasi so das Fundament von, von Tim Burner, Burners Lees erste HTML-Seite so ungefähr, also, da war es 0.9.
Und, äh, die haben einfach, äh, das Protokoll gar nicht, äh, ersonnen, um, um unsere Use Cases von heute mit, äh, teilweise über 100 Requests pro einzelner Seite eben bedienen zu können.
Und, äh, das, äh, das hat einfach an allen Ecken und Enden dann, äh, angefangen, übelst, äh, zu, zu klemmen.
Und, äh, genau, darum, äh, gab's eben, wurde HTTP 2 damals unter dem Namen, ähm, Speedy-Protokoll von, von Google ersonnen.
Ähm, und dann zusammen mit eben den entsprechenden anderen Beteiligten, äh, standardisiert.
Und, ähm, genau, und dass es HTTP 3 gibt, liegt, äh, daran, dass, äh, HTTP 2 viele gute Ideen hatte, aber manche von denen sich einfach nicht tatsächlich in der Praxis umsetzen ließen.
Äh, äh, und, äh, das hat, äh, damit zu tun, dass, ähm, HTTP 2 über TCP läuft, genau wie das HTTP 1, und, ähm, TCP ist, ähm, ein relativ, äh, sagen wir mal, äh, overgemanagetes Protokoll, das der Netzwerkstack des Betriebssystems sozusagen unter seinen Fittichen hat.
Und, äh, äh, das heißt, also ein großer Teil des, äh, des Ablaufes, äh, liegt nicht so in der Hand der, der Web-Server.
Die müssen das wegdelegieren ans Betriebssystem, und, äh, wenn das, ähm, wenn der Netzwerkstack vom Betriebssystem schlecht programmiert ist,
oder wenn das irgendwie andere Vorstellungen hat davon, wie TCP laufen muss, dann, äh, gehen ganz viele der, der Features von HTTP 2 auch kaputt.
Ähm, ähm, also zum Beispiel, äh, was ein Problem ist, ist halt, ähm, dass, dass da auch so Buffer gibt, äh, und wenn die, wenn die Buffer, äh, voll sind, dann, und der, äh, das System merkt so, ah, jetzt würde ich aber gerne eine andere Datei senden,
Dann geht das nicht mehr, weil erst mal muss dieser Buffer, der da schon da ist, der muss dann erst mal abgearbeitet werden.
Das nennt man dann so, äh, First-in-Line-Blocking.
Das heißt, man hat dann irgendein Deppen, so irgendein Datenpaket, der vorne steht, den eigentlich keiner mehr haben will, aber der steht schon da, der wurde schon auf die Rampe draufgeschnallt und wird gleich verschossen.
Ähm, und daran lässt sich auch nichts mehr ändern. Ähm, und deswegen hat man gesagt, nee, TCP ist irgendwie doof.
Das, äh, lasst uns auf UDP wechseln. Äh, das ist zwar, bei UDP gibt's halt keine Garantien, dass irgendwie Pakete ankommen und so, das ist, äh, wirklich so sehr barebone-mäßig unterwegs, ähm, aber der Vorteil ist halt, dass die HTTP-3-Implementierungen, ähm, sehr viel Freiheiten haben, wie sie, was sie dann da on top noch machen.
Und die rüsten dann selber so Dinge nach, dass die eben gewährleisten, dass wirklich auch alle Datenpakete ankommen.
Alles, was UDP eben nicht macht und dafür ist halt der Teil, der im Betriebssystem implementiert ist, sehr schlank.
Ähm, und im Prinzip ist es so, dass HTTP-3 gar nicht so viel andere Features hat als HTTP-2, aber die eben einfach auf die Straße kriegt.
Ähm, und deshalb ist das sozusagen die ideologische Fortführung von HTTP-2.
Und deswegen kam's ja auch relativ, äh, kurz nach dem anderen.
Also, so lange ist ja HTTP-2 noch gar nicht so etabliert.
Ja.
Und, äh, wenn man, wenn man kann, dann sollte man entsprechend auch auf HTTP-3, ähm, wechseln.
Das wird auch von allen gängigen Browsern unterstützt, wenn ich das so richtig im Kopf hab.
Genau, und, äh, ja, wir es jetzt schon haben.
Gerade mal geschaut.
Safari, mal wieder Experiment, Experimental Feature.
Ja, gut, aber das, das ändert ja nichts daran, dass der, äh, dass der, ähm, der Servers anbieten kann.
Ja, also.
Ja, klar.
Ja, genau.
Also, das ist ja tatsächlich, da geht ja nichts kaputt.
Ähm, und, äh, ich hab jetzt grad mal geguckt, Podcast-Seite, ähm, eigentlich alle Requests über HTTP-2 immerhin.
Aber da kannst du deinen, kannst du unseren Hoster auch mal, nochmal anhauen und sagen, was ist denn mit drei hier?
Die da schon soweit sind, ich mein, ich weiß ja nicht, was euer Hoster ist, aber ich glaube, das ist für viele noch so ein bisschen, bisschen too much.
Bei einem, bei einem kleinen Hoster, der, äh, schon auch auf, auf spezielle Wünsche eingeht und so, also den kann ich schon mal anhauen und sagen, hey, wie schaut's denn aus, kannst du das nachrüsten oder so?
Okay.
Das ist schon ganz gut.
Ja, das klingt gut.
Ich guck mal, was Uberspace macht, ähm, ja, auch HTTP-2, ja, und bei denen ändert sich, wenn die sowas mal haben, ähm, erfahrungsgemäß, äh, mit ihren CentOS-Kisten erst mal lange nix.
Ich weiß nicht, ob die da so ein Modul dann mal nachinstallieren, aber immerhin HTTP-2, das ist ja auch schon mal viel besser als 1.1 war, glaub ich, vorher, gell?
Ja, genau.
Ja, nee, ist schon so ein riesen, äh, Zugewinn.
Ich, ähm, hab da auch noch einen älteren Vortrag, den, den wir auch mal verlinken können, den man auch, äh, ohne mich, äh, da quatschen zu hören, eigentlich ganz gut, äh, so durchgehen kann, die Slides, und da wird, da, da wird einem nochmal klar, so, was, was sind halt so einfach die, die Vorteile von HTTP-2 und eben dann natürlich auch HTTP-3, genau.
Ist das der HTTP-Headers-The-Hidden-Champions-Vortrag?
Äh, nee, das ist, äh, oder ist das ein anderer?
Okay.
Genau, die sind, der ist auch okay, der Vortrag, genau, aber den, den ich hier gerade in den Chat, in den Jitsi-Chat geworfen hab, der ist das.
Okay.
Haben wir noch was?
Nee, sonst, äh, weiß ich nicht, was, was, äh, was fällt euch noch ein? Also, vielleicht noch irgendwie ...
Ich weiß gar nicht, ich glaube, Caching hatten wir noch nicht.
Ja, da würde ich einfach mal verweisen auf den, auf einen sehr coolen, langen Artikel vom Harry Roberts auch, der hat die da alle mal abgehandelt, da müsste ich mal den Link nochmal raussuchen.
Ähm, ähm, genau, ähm, ja, äh, letztlich, ähm, Cache-Control-Header setzen, die, diese Expires-Header, das ist ja so oldschoolig, der, das merkt man auch daran, dass der Expires-Header, äh, nicht nur das Datum wissen will, wann eine Ressource expiert, sondern auch tatsächlich dann noch von dir den Wochentag wissen möchte.
Den musst du dann auch mit übermitteln. Ähm, genau, und der Cache-Control-Header, das ist so der, der Header, der, der da irgendwie wichtig ist.
Und da gibt's so verschiedene Settings, die du da setzen kannst, also tatsächlich relativ viele, äh, manche, die ein Caching tatsächlich unterbinden, was du vielleicht machen möchtest, wenn du eine Seite hast, die vielleicht deinen Account-Daten von dem User anzeigt, und du möchtest halt nicht, dass die in, äh, irgendwelchen Proxy-Caches gecached werden auf dem Weg, dann sagst du, nee, diese Seite bitte auf gar keinen Fall cachen irgendwo.
Und dann gibt's eben, äh, äh, äh, zum Beispiel könntest du auch schreiben Immutable, das ist das Gegenteil davon, das heißt also, diese Seite wird sich niemals ändern.
Nie, nie, nie, niemals. Du musst, Browser, du brauchst die nie wieder anfragen. Ähm, der wird allerdings, glaube ich, nur von Firefox unterstützt.
Genau, und für alle anderen würdest du, ähm, ähm, einen Max-H-Wert setzen, der halt einfach sehr groß ist, also zum Beispiel ein Jahr, das ist dann, das ist dann ja auch so ungefähr so, wie, wie wenn der für immer, äh, gelten würde.
Und dann gibt's noch einen ganz schönen Header, der ist, äh, vielleicht interessant für, für Leute, die so dynamisch per PHP, äh, äh, äh, genammerte Content-Seiten haben.
Da hat man das ja manchmal so, dass die, äh, serverseitig auch eingestellt sind, so nach fünf Minuten, bitte, nimm, nimm nicht mehr den Cache, sondern rendere die neu, ähm, also da wird quasi der Cache, äh, leer gemacht, sobald ein User nach dieser gecacheden Zeit dann die nächste Anfrage macht.
Aber das führt dazu, dass eben diese Seite dann erstmal neu generiert wird und für diesen einen User, die Userin, eben die Antwort einfach länger dauert.
Und da kann man, äh, sagen, äh, Cache Control und dann stale while revalidated und das bedeutet, ähm, die, äh, also, äh, nimm erstmal das Alte und, äh, dann beim nächsten Mal fragst du, fragst du erstmal, fragst du nochmal an und dann kriegst du die neuere Version.
Hm, ja, okay.
Ähm, was wir auf jeden Fall an Caching noch haben, ein ganz anderes Caching, du hast jetzt, äh, Browser-Caching, vom Browser-Caching gesprochen und wie man, ähm, das, wie man das, äh, quasi einrichten kann.
Was wir noch machen bei uns, bei unserer Podcast-Seite ist, äh, ein, ein Caching der Seiten quasi, also wir, wir hinterlegen, äh, statische HTML-Seiten, ähm, für die Inhalte.
Also eigentlich hängt hinten, hinten dran ein WordPress, das eigentlich dynamisch, äh, die Seiten zusammengeneriert, äh, da sich da aber nicht, nicht besonders viel ändert, ähm, haben wir da, äh, ein Caching-Plugin und das macht, das macht schon performance-mäßig auch echt viel aus, äh, wenn man da einfach nur das HTML rüberschieben muss.
Das muss man immer aufpassen, wenn man was dran verändert, dass man dann mal, da kann man drüber stolpern, ich sag's mal so, dass man dann denkt, wo ist denn eigentlich mein Change, ah, ich muss den Cache nochmal leeren, äh, dass das alles nochmal neu gebaut wird.
Ist das dieses, äh, W3-Total-Cache, was ihr benutzt?
Das haben wir bei uns.
Moment, ich weiß gar nicht, welches.
Also wir haben ja auch ein WordPress.
Warte.
Äh, äh, das ist ja so relativ bekannt.
Ähm, wir haben, wir hatten verschiedene, wir haben WP-Super-Cache.
Und das Total-Cache hatten wir auch, aber ich glaube, da gab's ein Problem, ähm, oder wir hatten ein vermeintliches Problem, was, glaub ich, dann gar nicht damit zusammenhing, wegen der verschwundenen, äh, Impressums-Links und so.
Ach so, ja, das kann sein, dass wir das ...
Aber das lag dann irgendwie doch an einem anderen Plugin, glaub ich.
Mittlerweile wissen wir, dass es an Podlove selbst liegt.
Stimmt, Podlove war's.
Also es liegt an Podlove, äh, das ist ein bekanntes Problem, aber im Zusammenspiel mit anderen Plugins, das ist ein ganz verrücktes Problem, was, ich glaub ich, äh, weiß ich nicht, ob sie es mittlerweile, äh, gelöst haben, aber ich kann mich erinnern, dass ich,
als ich bei denen zu Gast war, da gab's das Problem auf jeden Fall noch, ähm, genau, aber ja, genau, WP-Super-Cache und, äh, funktioniert eigentlich echt gut und, äh, ist schlank irgendwie und tut alles, was wir so brauchen und das hat auch echt einen großen Performance-Gewinn gebracht, so, also auch in der gefühlten Performance, die ist mir immer sehr wichtig, also, dass ihr so einen Link klickt und dass das irgendwie snappy anfühlt.
Ja.
Ja, nee, das stimmt, das bei euch, das flutscht.
Ja, und es ist natürlich jetzt auch eine Frage, die, die, die, vielleicht müssen wir das mal analysieren, warum denn eigentlich genau, also können wir da was rausnehmen, was wir jetzt an Technologien, ich würde sagen, es sind so drei Dinge, die bei uns zusammenspielen, das ist einmal das, äh, was ich gerade gesagt hab, das, das HTML-Caching, dass wir die HTML-Files statisch hinterlegen, ähm, dann, äh, das Instant-Page und dieses P-Jacks, das eben, ähm, asynchron nachlädt.
Und du hast ja jetzt vorhin schon gesagt, naja, das P-Jacks, vielleicht macht das gar nicht so viel aus. Das wäre was, wäre ein Test, den ich gerne mal fahren würde. Ich habe ja gesagt, wir haben das nicht deswegen eingebaut, sondern damit der Player weiter abspielen kann.
Aber trotzdem würde es mich mal interessieren, ob das vielleicht gar nicht notwendig wäre, dann würden wir vielleicht, kann man vielleicht über eine andere Lösung mit dem Player irgendwie mal nachdenken, weil das ist, äh, das macht mir gerade Ärger an verschiedenen Stellen, das Ding.
Okay. Es gibt ja diese Media-Session-API, glaube ich, also wo ihr zumindest auf, äh, Mobilgeräten, äh, könnt, kann man damit quasi eine Audiodatei ans Betriebssystem wegdelegieren und ich glaube, das überlebt eben auch Seitenwechsel, äh, meine ich.
Media-Session-API, meine Güte.
Das ist auch immer sowas gelesen, wo wir das, dass wir auch mal irgendwie, hey, das müssten wir da eigentlich mal machen und dann haben wir uns halt wieder hingelegt.
Aber wahrscheinlich muss das dann der, der Player auch unterstützen, ne? Da können wir wahrscheinlich nicht einfach irgendwie einsapfen.
Tja, dann machen wir mal Feature-Request, ich kenne die Leute.
Sag ich, hey, hier, Potlov-Player, mach doch, mach doch, bau das doch mal ein, das wäre doch super.
Machen wir nur großzügige Spende hintendran.
Ja, so einen 100-Euro-Schein reinlegen als Lesezeichen von E-Mail.
So ein paar Bitcoins.
Ja.
Scheine, das kennt doch heutzutage schon keiner mehr von den fancy Leuten, da muss doch irgendwie, muss irgendwie was Digitales sein.
Ja, meine Kinder wollen auch keine Scheine haben, die wollen immer Geld, Münzen haben.
Die sind halt total enttäuscht, wenn ich denen irgendwie im Schein da vor der Nase wedle.
Münzen sind ja auch so aus, aus, auf lange Sicht, wenn dann irgendwann die Apokalypse kommt, glaube ich, das Beste, weil da hast du wenigstens noch irgendwie Edelmetall rumliegen, alles andere kannst du vergessen.
Ich glaube, das ist auch, denke ich, deren Gedanke.
Ja, genau.
Wie Kinder halt so sind.
Ja, ja, genau.
Ich kann aber schon verstehen, also, ich versuche jetzt mal, mich in mein kindliches Ich rein zu versetzen, das haptische Erlebnis ist bei Münzen das Geilste.
Ja, klar.
So, das ist irgendwie schwer und das kann ich irgendwo hinwerfen und das macht Geräusche, wenn man mehrere hat und das klappert irgendwie.
Das ist viel interessanter als ein Schein, also auf jeden Fall.
Ja, und so eine Piratenschatzkiste mit Scheinen ist ja irgendwie auch Käse, ne?
Ja, das sieht natürlich mit Münzen viel besser aus, keine Frage, ja, auf jeden Fall.
Und es glitzert und das ist ja schon, das ist schon gut.
Da hat man vielleicht sogar, und es gibt ja jetzt, gab es ja früher bei der D-Mark nicht, jetzt kommen die Opas vom Krieg und so, aber wir haben ja Münzen, die zwei verschiedene Farben haben in einem.
Wie verrückt ist das denn?
Und das ist schon auf jeden Fall spannender als so ein komischer, schnöder Schein.
Ja.
Ne, so ist es auch.
Okay, ich habe noch eine kleine Sache, wo ich einfach fragen wollte, ob du das schon mal ausprobiert hast, weil ich habe gerade noch mal geschaut und das ist so gut wie gar nicht.
unterstützt, aber es ist auch so ein Performance-Thema, gerade auf Mobile Devices vielleicht, und zwar Prefers Reduced Data.
Hast du damit schon mal rumgespielt?
Ja, habe ich tatsächlich schon gemacht.
Und zwar bei der rheinischen Post-Seite, da schalte ich das Werbung-Laden ab, wenn du mit einer langsamen Verbindung auf die Seite kommst, damit, wenn du da irgendwie irgendwo in der Wallachei sitzt,
und News lesen willst, weil die Werbung würde ja auch dann sowieso nicht mehr durchkommen.
Ja.
Insofern kann ich dann auch einfach sagen, okay, komm, lass das mit der Werbung einfach sein, dann können wir wenigstens die eine der zwei Teile laden.
Genau.
Also als PM würde ich jetzt sagen, warum nicht nur die Werbung laden und die News weglassen?
Ja, das stimmt wohl.
Du hast zu lange bei der falschen Firma gearbeitet, tut mir leid.
Ja.
Ja, würde mich auch nicht wundern, wenn die Werber das mit dem Augenzwinkern, das nicht nur ganz humoristisch gemeint ist, auch mal fragen würden, tatsächlich, ja.
Aber es ist, glaube ich, noch nirgends ohne Flag angeschaltet, wenn die Daten bei Can I Use stimmen.
Also Edge und Chrome hinterm Flag und alle anderen noch gar nicht, also.
Ja.
Ich habe nicht die Media Query benutzt, die du jetzt hier gerade vor dir offen hast, sondern es gibt ja die Network API in den Chrome-Browsern.
Die gibt es ja schon ziemlich lange.
Ja, und da, man kann auch über Clientins, wenn man die aktiviert, also das Clientins sind dann so, die kann man anfordern und dann sagt man, Browser schickt mir als HTTP-Header deine Verbindungsgeschwindigkeit von nun an.
Genau, aber ich habe die JavaScript API genutzt, weil die Werbung ja sowieso über JavaScript dann initialisiert wird.
Und da gibt es die Save-Data-Property und wenn die eben, ich weiß nicht, ob die True ist oder 1, dann sage ich, nee, Quatsch, bei Save-Data, doch, eventuell da auch.
Und ich sage Effective Connection Type, wenn der irgendwie 2G ist oder Slow 3G, dann lass das einfach sein mit der Werbung.
Genau, und das soll jetzt auch als Media Query kommen.
Genau, weil ich habe jetzt tatsächlich nur CSS Media Query gemeint, aber stimmt, ich erinnere mich, dass ich damit auch in der Vergangenheit mal was zu tun hatte, wo es um Performance-Messungen ging.
Da ging es, glaube ich, um, wollen wir unter bestimmten Netzwerkbedingungen denn Videos überhaupt anbieten, zum Beispiel.
Ja, stimmt, also es gibt so viele APIs, es ist einfach so unübersichtlich, aber das ist tatsächlich was, was man sich mal anschauen kann.
Finde ich tatsächlich interessant, dass man im Browser Informationen bekommen kann über die aktuelle Verbindung.
Das ist auf jeden Fall sehr, unter Umständen, je nachdem, was man baut, ein sehr mächtiges Tool.
Man kriegt, glaube ich, eh viel zu viele Informationen.
Das ist ja auch schon fast das Privacy-Ding.
Genau, das ist auch tatsächlich der Grund, warum.
Ja, die Firefox-Menschen und die Safari-Menschen, die, die haben auch abgelehnt, das zu implementieren, eben weil, einfach mit zunehmender Menge Daten, die halt, die sich auch vielleicht von Gerät zu Gerät unterscheiden, kann man, kann man dich halt tracken.
Und die versuchen das so ein bisschen, cool ist das natürlich egal.
Ja, genau, die ist jetzt, die, die, die arbeiten an einem zweiten, also an einer quasi V2 davon, weil auch teilweise die Werte nicht immer so brauchbar sind, wie man sich das wünscht, die da rauskommen.
Genau, und dann arbeiten sie auch an ihrer, an einer Privacy-Sandbox.
Ich glaube, das Konzept bei denen ist dann, dass bestimmte APIs, die zählen ein oder zahlen ein in diese, in diese, in diese Privacy-Sandbox.
Und wenn du eine gewisse Menge erreicht hast, dann sagen die so, jetzt mehr Infos kriegst du nicht.
Und dann, wenn, wenn für dich halt die Network-Information-API wichtig ist, dann darfst du die halt abfragen.
Und jemand anderes darf eine andere API abfragen, aber keiner von euch kann eben alle abfragen und damit sozusagen einen Fingerabdruck erzeugen von einem Besucher.
Interessantes Konzept, ja.
Ja, Fingerprinting ist es, also klar, da hilft natürlich jedes einzelne, jede einzelne Information und dann, ja, das ergibt total Sinn, dass man sagt, hey, du darfst nur, von den 25 darfst du nur zwei oder so oder fünf oder weiß ich, keine Ahnung, wie sie das machen wollen, aber ja, ist eine gute Idee.
Ja, genau, die anderen Hersteller fanden das auch doof, genau, die lösen das irgendwie anders, genau.
Aber es ist halt besser als nichts, also dann kann man zumindest bei den Browsern, die auf Chromium laufen, das sind ja auch ein paar, kann man dann, kann man was machen.
Ja, ich meine ja auch mit nicht unerheblichem Marktanteil, also von daher bringt das dann auf jeden Fall schon was.
Okay, ich habe jetzt hier auf der Liste noch stehen, Testing, also wenn ich jetzt vielleicht nicht einfach alles in meine Seite einbauen will, sondern mal rausfinden will, was ist, was könnte denn überhaupt schieflaufen, was für Tools würdest du denn da empfehlen?
Also ich meine, Lighthouse hatten wir jetzt schon, ich glaube, das kennen ja viele auch, da gibt es ja die Performance-Tests.
Gibt es denn noch was weiteres, was du benutzt, was du empfehlen würdest?
Also was, was ich richtig, richtig gut finde, ist Webpage-Tests auch, das gibt es auch schon sehr, sehr lange und das, das sieht erstmal gar nicht so knorke aus, weil das Design so altbacken ist, ich weiß nicht, wobei die gerade daran auch arbeiten.
Aber das ist so quasi, das kartografiert deinen kompletten Ladevorgang und auch was so alles geschieht und wann welche Ressourcen gezogen werden, wo es Weiterleitungen gibt, wo es irgendwie festhingen.
Mach dir halt so ein Waterfall-Chart, sag dir, wann JavaScript gelaufen ist, welche Dateien dieses JavaScript ausgeführt.
Und nimmt dir auch ein Video auf, wenn du möchtest, von dem Ladevorgang, das du dann in so einer Zeitlupe dir angucken kannst.
Das ist tatsächlich alt, ich kenne das auch noch von früher und ich war gerade erstaunt, das Design ist tatsächlich, das hat sich auf jeden Fall geändert, dass die so mit Dark und mit Schatten und Glow und so, das ist auf jeden Fall ein bisschen anders, als wie ich es in Erinnerung hatte.
Ja, also das Projekt, das war glaube ich eigentlich nur von einem Typen von Padminen ein Projekt, der auch Helfer hatte, aber so im Prinzip so ein Ein-Mann-Ding, das wurde halt gekauft von irgendwas, Strange Loop glaube ich, und die stecken jetzt da Geld rein und die stellen auch Leute an und das ist echt cool.
Also weil es einfach so ein gutes Tool ist und das bildet auch die Basis für viele andere Tools, also neben Lighthouse, es gibt halt Lighthouse zum einen und Webpages, die sind die Basis für sowas wie Speedcurve oder Caliber, das sind ja auch so Services, wo man im Prinzip, wo man seine Seiten dann einpflegen kann und vielleicht auch Konkurrenzseiten einpflegen kann.
Und dann sagt man, mach einmal am Tag einen Test aus Frankfurt mit einem mobilen Chrome Browser und dann kannst du auch so Performance Budgets einstellen und sagen, hier, sag Bescheid, wenn irgendwie, wenn wir die Latte reißen.
Oder du kannst eben dann vergleichen, wie stehst du denn gegenüber der Konkurrenz.
Und noch ein anderes Tool, was ich total gut finde, ist Treo, Treo SH.
Die machen auch sowas ähnlich wie Speedcurve und Caliber.
Mit allem Unterschied, die zapfen auch diesen Chrome User Experience Report an.
Das ist ja, also Google hat ja angefangen, irgendwie so vor vier Jahren, Telemetriedaten aller Chrome User von ihren Seiten besuchen mit Ladevorgängen und allem Zip und Zap in ihre BigQuery-Datenbanken einzuspeisen.
Und jeder Mann und Frau kann jetzt hingehen und sagen, ich frage diese Daten ab und mach da Abfragen drauf.
Zum Beispiel, keine Ahnung, wie hat sich mein CLS-Score im Laufe der Zeit verändert oder was auch immer.
Und das Coole ist, also du könntest ja auch irgendwie weiter mit Lighthouse und so Tools arbeiten, aber das sind alles sozusagen Laborwerkzeuge, die unter ganz klaren Bedingungen arbeiten.
Und was in diesen Chrome User Experience Daten drinsteckt, sind sozusagen die Erfahrungen, die tatsächlichen Erfahrungen der Besucher.
Und das kann ja stark divergieren, also es nennt man ja dann Real User Monitoring oder RAM abgekürzt.
Und es gibt auch RAM-Tools, die man sich installieren kann, die sind halt einfach sauteuer.
Und das ist eine ziemlich clevere Idee von den Trio-Leuten, eben diese Chrome User Experience Report Daten dafür heranzuziehen.
Genau, die sind jetzt auch nicht geschenkt, aber deutlich günstiger, als wenn man so ein klassisches RAM-Tool in seine Seite hängen würde, das dann eben diese Metriken sammelt.
Ich habe es mir gerade mal angeschaut, ja, ganz billig ist es nicht.
Ich glaube, so 79 Euro oder so im Monat.
79 ist das, ist das Starter-Paket, genau.
Aber ich habe dann 30 Pages und 10.000 Scan-URLs.
Okay, das heißt Daily.
Amount of URLs in your site mems to scan daily for new Crux data.
Genau, Crux ist jetzt der Chrome User Experience Report.
Die müssen halt auch Geld an Chrome abdrücken.
Also wenn du die BigQuery benutzt, du hast, glaube ich, so ein Freikontingent von, keine Ahnung, so ein paar Abfragen.
Aber irgendwann sagt Google dann auch, so mit all seinen Cloud-Services, da kann es ja auch schnell mal teuer werden.
Das heißt, die müssen halt auch ein bisschen Kohle an Google dann abdrücken.
Die müsstest du aber auch abdrücken und trotz, also wenn du diese Daten regelmäßig abfragst und es aber trotzdem günstiger als einen echten RAM-Anbieter zu nehmen.
Aber das ist tatsächlich echt cool, weil ich, die haben ja so Demoseiten, wo man sich die Daten so angucken kann, wo quasi das Tool geshowcased wird.
Und wir haben zum Beispiel Applecom, wo ich sehen kann, dass der Performance-Lighthouse-Score, Moment,
am 12. November deutlich besser wurde für eine kurze Zeit und zwar von 50 auf 60, aber dann wieder runterging nach zwei Tagen.
Haben die da ihren Shop neu gestückt wieder oder was?
Ja, irgendwie haben dann die Performance gleich wieder schlecht gemacht.
Ja, interessant. Also es sieht echt aus wie ein interessantes Tool, wenn man das Kleingeld hat und das wichtig ist für die Performance,
dann ist es vielleicht echt was, was man sich mal angucken kann.
Ja, vielleicht so für Agenturen cool, die halt irgendwie für viele Kunden die Seiten monitoren wollen oder irgendwie so.
Weitere Beispiele, zum Beispiel noch GitHub kann man sich angucken.
Ikea.com, Reddit.
Ja, was halt auch schön ist, ist, wenn du, wenn du dich da anmeldest, du kriegst halt sofort rückwirkend Daten,
weil die werden sowieso gesammelt über deine Seite von den ganzen Chrome-Usern.
Außer deine Seite wird nie besucht, von denen dann ist natürlich, gibt es keine Daten.
Das heißt also, du musst jetzt nicht irgendwie abwarten, bis, bis du erst mal so über den Tag die ersten Messergebnisse eintrudeln nach dem Anmelden
und dann, sondern du kannst schon sofort in die Vergangenheit gucken.
Wobei das natürlich auch noch ein Ding ist, dass man diesen Chrome-User-Experience-Report sich mal direkt anschauen kann.
Ich meine, wenn du sagst, so ein paar Abfragen darf ich einfach so schon machen, ohne Geld zu bezahlen,
das ist vielleicht auch was, womit man mal rumspielen kann.
Ja, interessant. Kannte ich auch nicht bis eben. Cool.
Ich glaube, ich werde da auch noch zum Performance-Optimierer und Fan und mache die ganzen Tag nichts mehr anderes.
Ja, da macht das scheiß Spaß.
Wir machen jetzt nur noch Performance.
Eben.
Warte mal, ab, wie ich sagst dir, am Ende komprimierst HTML.
Ja, um alles rauszuholen.
Ja, aber dann auf der anderen Seite ist es schon interessant, wenn man jetzt so, also ich stelle mir das interessant vor, wenn du jetzt Performance-Engineer bist, sage ich mal,
also jemand, der sich hauptsächlich um Performance kümmert und du musst jetzt an so Apple-Shop-Seiten arbeiten.
Da kloppt er, der kloppt sich doch dann den ganzen Tag mit den Designern, die sagen, hey, wir brauchen hier aber 27 hochauflösende Bilder
und drei Videos, die alle nahtlos ineinander übergehen beim Scrollen und da, keine Ahnung, 30 Megabyte bei einmal runterscrollen, runterladen.
Ja, das Gute bei Performance ist, dass man ja meistens auch den Support der Geschäftsführung bekommt.
Weiß ich nicht, wie es bei Apple ist, so, ich glaube, dass dann so die Designer da, dass die auch eine starke Rolle spielen.
Aber so grundsätzlich, das ist halt so irgendwie messbar.
Jeder kann da mit seinem, das Lighthouse drauf loslassen und Google sagt, hier für Suchmaschinen wichtig und dann, das ist ja immer das Totschlag-Argument.
Okay, bei Apple vielleicht nicht, die brauchen nicht in der Suchmaschine sein.
Genau, das weiß halt jeder, was er da eingeben muss.
Oder sie, genau.
Aber das ist halt einfach das Schöne bei Performance, dass das gut messbar ist und dass das eben so eine starke Beziehung zu Suchmaschinenoptimierung hat.
Und die ist ja irgendwie für alle so die heilige Kuh.
Da darf man nicht schlechter werden.
Wohingegen Accessibility auch ein super Thema ist, aber so, ja, kann man nicht so, okay, man kann auch Messwerkzeuge drauf loslassen, aber so, das war's dann auch.
Die sind halt nicht vollständig.
Das geht nicht ohne so einen echten Audit.
Und die Suchmaschine interessiert es auch nicht.
Und darum interessiert es den Geschäftsführer dann nicht.
Da könnte ich jetzt noch viel drüber reden.
Jetzt gerade aus aktuellem Anlass, aber das ist alles noch geheim.
Ja, da könnte man eine ganze Sendung zu machen zu Accessibility und Geschäftsführern.
Ich sag's nur mal so.
Genau.
Was ich jetzt noch nachtragen würde und dann, ich weiß nicht, ob dann, dann kommt die obligatorische Frage gleich, ob noch was fehlt.
Aber ich hätte jetzt noch ein kleines Tool, das mir auch in dem Harry Roberts Talk über den Weg gelaufen ist, was ich auch schon mal, glaube ich, gesehen habe, aber nie so wirklich getestet habe.
Nämlich dieses ctcss, das ist ein kleines css-File, beziehungsweise es gibt es auch als Bookmarklet, sodass ich es mir einfach schnell auf meiner Seite einbinden kann, sofern meine Security-Richtlinien das nicht verbieten, was ich heute auch dann gleich gemerkt habe an einer Seite, die ich testen wollte.
Das einem Informationen über den Head gibt und ob da Sachen vielleicht in der falschen Reihenfolge sind, so aus Performance-Sicht.
Und das finde ich ziemlich nett, weil das ist so, das hat, das ist so, ich mag ja so Single-Purpose-Tools, die ihre Sache einfach gut machen und irgendwie nicht überladen sind.
Und das lade ich in die Seite rein und dann kriege ich direkt Text angezeigt, hey, du hast hier, tausch doch mal das.
Oder du hast hier diesen, diesen kleinen Fehler gemacht, das könntest du irgendwie beheben mit bla.
Fand ich echt nett und klein und schnell gemacht.
Also kann man einfach drauf drücken.
Wie gesagt, wenn du Security-Richtlinien hast, die das verbieten, dass irgendwie fremdes CSS injectet wird, dann muss man ein bisschen alternative Taktik wählen als das Bookmarklet, aber dann kriegt man das auch hin.
Und fand ich irgendwie nett, dass man da so schnell so direkte Handlungsanweisungen kriegt.
Ja, genau, das wollte ich noch nachreichen als Performance-Test-Tool.
Ja, ich hatte das Problem, dass ich habe, wenn man das auf einer Seite wie der Rheinischen Post ausführt, dann dadurch, dass die ganzen Third-Party-Sachen ihre Skripte nachträglich per JavaScript einhängen, hat das Tool dann auf einmal ganz viel Alarm geschlagen, weil irgendwelche Reihenfolgen nicht korrekt waren.
Die, die aber jetzt zu Beginn der Seite, als sie geladen wurde, die waren an und noch gar nicht da, die wurden halt quasi nachträglich dynamisch reingepackt.
Und das kann das Tool natürlich logischerweise dann nicht mehr voneinander unterscheiden und ist dann bei mir übelst steil gegangen.
Genau, das nur so als Disclaimer, dass man gucken muss, also sind das jetzt die angemeckerten Sachen, waren die von Anfang an drin, weil es geht ja wirklich nur um diesen initialen Render-Prozess.
Genau.
Ja, genau.
Da hast du schon viel Rot bei uns, was man ausführt.
Ja, ich, achso, ich dachte, ich hätte heute schon ein paar Sachen da gefixt und ich habe nämlich Dinge im Header umpositioniert, aber WordPress erlaubt einem ja auch nur so bedingt in diese Geschichten einzugreifen, was ein bisschen blöd ist, ehrlich gesagt.
Weil ich würde ja gerne, ich habe ja gerne volle, zu hundertprozentige Kontrolle über alles, weil ich will da mal ein Attribut reinschreiben und will da mal die Reihenfolge A, B, B, A umstellen und das geht halt bei WordPress.
Also mir ist es nicht bekannt, dass es da einen einfachen Weg gibt, dass ich da in die WordPress-eigenen Header-Geschichten eingreifen kann.
Was wir tatsächlich hatten, war das Title-Tag ganz weit unten, weil unser Custom-Blog, den wir bei uns im Template reinladen, über dem WordPress, ich weiß gar nicht, über diesem WordPress-Hook war, der die WordPress-Header-Sachen reinpackt.
Und da ist das Title-Tag nämlich ganz oben.
Das heißt aber, das war dann, begann dann erst nach unserem ganzen Social-Blog und so weiter.
Und wir haben auch noch Render-Blocking-JavaScript im Head und ja, es ist da, da ist, da kann man noch eine Menge machen.
Ich gucke ja mal rein.
Ich habe da, ich glaube ich sehr, oh je.
Genau.
Ja, ich bin ja, nee, ich bin ja froh, wenn wir da ein bisschen Feedback kriegen.
Wir können auch nicht auf alles immer gucken, aber wenn da irgendjemand was findet, was man irgendwie schnell mal ändern kann, gerne her damit immer.
Ja, klar.
Ist ja bei Accessibility auch so, ist bei allem Möglichen ist das so.
Also ich, ich mache das auch nicht alles richtig, auf gar keinen Fall.
Das ist einfach, also auch, auch wenn jetzt jemand hier die Sendung gehört hat und diese ganzen Themen, das muss man auch nicht alles machen.
Das sind ja auch einfach nur so quasi Anregungen und irgendwie Futter, damit man so die nächste, so einfach immer wieder sich was rauspicken kann und, und dann irgendwie sich damit beschäftigen kann.
Was ich gerade sagen wollte, war, wenn ihr das nicht alles morgen auf eurer Seite eingebaut habt, dann dürft ihr keine weitere Podcast-Folge von uns hören oder irgendwie sowas.
Irgendeine schlimme Strafe gibt es dann.
Im Stream machen wir dann, ey, was könnt ihr, nein, Spaß natürlich nicht.
Wir sind ja, bei uns findet man mit Sicherheit, wenn man genau hinguckt und alle Tools drüber laufen lässt, auch noch einige Probleme.
Also es ist ganz normal, dass man einfach nicht alles immer hinkriegt.
Ja.
Oder sich an allen, was Practices hält.
Guckt euch mal unsere Podcast-Seite an.
Ich glaube, das ist echt die Worst.
Gesagt, getan.
Ja, war da nicht schon vor langer Zeit, jetzt lege ich mal den Finger in die Wunde, ein Redesign geplant?
Ja, ja, genau.
Ja, das ist halt, ihr wisst, wie das ist.
Ja.
Oder vielleicht auch nicht.
Ja.
Doch, weil Redesign werden wir nie eins machen.
Richtig.
Wir haben halt irgendwann mal damit angefangen, es hat lang genug gedauert, das Design zu machen.
Wir arbeiten aber auch, nee, also es ist ein iterativer Prozess.
Also ich glaube, es vergeht keine Woche, wo ich nicht irgendeine Codezeile, meistens sind es ganz kleine Sachen, eine Codezeile anpasst bei uns, unserem WordPress-Template.
Aber ich glaube, ein Redesign, so ein richtiges wird es so schnell nicht geben.
Da müsste man so viel, da hängt so viel dran mittlerweile an diesem Design, wenn man da, also da müsste man, nee, nee, das ist keine gute Idee.
Nee, das weiß Coca-Cola auch zum Beispiel.
Einfach beim Original bleiben und das, und hoffen, dass es gut genug war.
Ja, nee, also sieht auf jeden Fall schon deutlich nach mehr aus als hier unser Ding.
Wobei uns ist ja auch so ein bisschen, ist ja quasi so eine verhohene Piepelung der tatsächlichen W3-Specs, wie die eben aufgebaut sind.
Aber das dient nicht immer der Lesbarkeit.
Und ja.
Ich finde es aber an sich eigentlich auch ein gutes Konzept.
Also das passt sehr gut, es ist gut durchgezogen und man könnte bestimmt, also da würde ich auch wahrscheinlich gar nicht jetzt anfangen, ein komplettes Redesign zu machen,
sondern sich vielleicht mal Refactoring-UI vornehmen und dann überlegen, wo kann man denn jetzt das so, wie es ist, irgendwie verbessern und ein bisschen besser lesbar machen.
Ich weiß, die Standardtexte und die Working Drafts, die sind nicht so gut lesbar, man muss ja aber nicht dabei bleiben.
Und ich glaube, man kann, also ich würde persönlich, wenn ich jetzt da ein Redesign machen würde, ich würde versuchen, das Konzept beizubehalten und nur so ein bisschen mehr Struktur reinbringen.
Ja, und auch auf Mobile ein bisschen cooler optimiert.
Ich meine, wir sind ja 2010 gestartet, da war das so mit Mobile und, also Mobile First war, glaube ich, noch nicht so etabliert.
Das war halt so, uh, was Neues.
Genau, das haben wir noch nicht ganz so ernst genommen.
Wir haben auch nicht Mobile First gearbeitet, ganz ehrlich, also das fällt mir immer noch extrem schwer, muss ich sagen.
Wenn man mit Big Screen aufgewachsen ist, dann ist das ...
Siehst du, deswegen machen der Konstantin und ich das mit unseren Laptops, weil wir Mobile First arbeiten.
Ja.
Okay, das lassen wir mal so stehen.
Konstantin, das ist kein Argument dafür, dass du jetzt weiter mit deinem ...
Nee, ich möchte schon wieder einen gescheiten PC haben.
Ich habe ja eigentlich das Beste aus beiden Welten.
Ähm, ich habe ja einen 13-Zoll-Laptop-Monitor.
Äh, und aber dann halt, äh, ein 27-Zoll-4K-Display nebendran stehen.
Mhm.
Also ...
Das Argument lasse ich nicht so richtig gelten.
Ja, das Problem ist nur, wenn ich das hätte, dann würde ich ja wieder anfangen zu weinen, wenn ich nicht zu Hause säße.
Ja, ähm, das ist tatsächlich, äh, das ist tatsächlich, äh, das ist tatsächlich, glaube ich, ein Problem.
Ich habe hier meine ganze Bude auf hochauflösende Displays umgestellt und ich befürchte, ich kann da auch nicht mehr so richtig zurück.
Also wenn ich jetzt, äh, irgendwie, ich weiß ja nicht genau, wie dein Arbeitsalltag aussieht, wenn ich jetzt, ähm, regelmäßig irgendwie an fremden Monitoren oder an fremden Rechnern irgendwie arbeiten müsste, äh, dann würde mir das wahrscheinlich schon schwerfallen.
Da würde ich vielleicht mir mein 4K-Display irgendwie, äh, in den Rucksack packen und mitnehmen oder so.
Ja, es fehlt mir auch so ein Hoverboarden des, äh, 27-Zoll-Displayers, man so vor sich her schieben kann.
Nee, warum nicht so zum Aufziehen, so wie so eine Leinwand, so prüpp.
Ja, so ein Aufsteller.
So stelle ich mir das vor.
Ja, genau, so ein aufrollbares Display, das ich einfach so zusammenrollen kann, in den Rucksack packen und ...
Nein, noch so ein kleines Stativ oder keine Ahnung, das hängt man vielleicht an die Decke oder so.
Das, äh, ja, ich habe, ich habe ja echt mir von OLED zum Beispiel viel, äh, viel erhofft.
Da gab es irgendwann mal so ein, so ein YouTube-Video, was so ein bisschen viral gegangen ist, wo irgendwie, da war irgendwie gerade Fußball-WM oder sowas.
Und, ähm, dann hat halt jemand das so ein bisschen hingefakt, dass irgendwie, da zieht einer neu in die Wohnung ein und will dann irgendwie schnell das Fußballspiel gucken.
Und er rollt einfach nur so ein Poster an die Wand.
Und dann, äh, ist das der Monitor und dann geht's da los.
Ich habe halt gedacht, ja, das ist vielleicht in fünf Jahren Realität oder so.
Wann wird das gewesen sein? 2012, 2013?
Wir haben immer noch nichts Ansatz, äh, im Ansatz in der Richtung.
Ja, stimmt.
OLED sollte das können, ja.
Eigentlich mal.
Es gibt ja auch so Displays, die irgendwie so ein bisschen irgendwie aufklappbar und, und, und, äh, schräg.
Und aber sowas mit Tapete, ich habe halt echt gedacht, im Jahr 2020, äh, gibt's gar keine normale Tapete mehr,
sondern es ist einfach alles OLED und deine ganze Bude kann, du kannst halt einfach einen Strand vor der Tür haben oder keine Ahnung was,
was deine Wand halt gerade anzeigt, ne?
Ich hatte von so einem Typen gelesen, der das mit, äh, mit so einer VR-Brille macht.
Der hat, glaube ich, irgendwie so fünf virtuelle Monitore.
So, äh, auf einmal hat er ein Terminal und so seine IDE und so Zeugs.
Und, äh, genau, der, der, der macht das jetzt eben über so eine 3D-Brille,
die ja dann, die, die auch ziemlich gut ist und hochauflösend.
Äh, und ich glaube, sein größter Bildschirm hat irgendwie vier Meter Diagonal oder so.
Ja, warum auch nicht?
Ich meine, ähm, in der VR-Brille, äh, ist mein Bildschirm so groß wie die Welt.
Also, finde ich, äh, ja, verstehe ich auch nicht.
Habe ich auch mal gedacht, als irgendwie diese, diese Google Glasses, äh, dieses Video rauskam,
wo einer so eine ganz normale Brille aufhatte und das war so komplett, äh, Augmented Reality.
Und ich dachte so, ja, ja, genau.
Aber das ist auch nie was geworden.
Also, ich bin schon sehr oft enttäuscht worden von irgendwelchen Produktvisionen, die nix wurden.
Ja, ähm, ach, Mann.
Ja, wirklich jetzt mal.
Echt, hey.
Was, was sollen das?
Was ist, wie, was ist denn das für ein Leben ohne OLED-Tapete?
Echt?
Komm, lass uns die Sendung einfach beenden.
Das ist jetzt alles so mies.
Ich bin einfach nur noch sauer und enttäuscht.
Nein, nein, nein, jetzt kommen noch, jetzt kommen noch die geilen Sachen.
Ah, stimmt.
Genau.
Außer, außer wir haben, außer wir haben, außer wir haben zu Performance noch was vergessen,
aber wir haben schon viel drüber geredet.
Vielleicht haben wir noch, wenn wir noch irgendwas vergessen haben, dann ist jetzt die letzte
Chance, das nachzutragen.
Genau, oder die Hörerinnen und Hörer fragen das einfach in euren Kommentaren und oder auf
Twitter oder vielleicht auch Twitch.
Da müsst ihr das nur über Twitch dann wieder weiterleiten.
Kriegen wir hin.
Genau, aber wir haben ja auch schon mal gesprochen.
Vielleicht bist du bei Twitch bei uns ja mal mit dabei und wir gucken dann mal so live-Performance-mäßig
irgendwie Sachen an.
Da hatten wir ja mal drüber gesprochen.
Überfall ich dich jetzt hier live im Podcast nochmal.
Das können wir natürlich in Zukunft mal machen.
Ich weiß nicht genau, ob das dieses Jahr noch was wird, aber das wäre auf jeden Fall
eine Sache, die wir gerne mal angehen würden.
Das wäre eine coole Geschichte.
Ja.
Ne, dann machen wir dann auch den Rückkanal für die HörerInnen und ZuschauerInnen.
Genau.
Ja, top.
Gute Idee.
Ihr habt es gehört, Kommentare schreiben.
Haben wir ja noch nie gesagt, dass wir das machen sollen.
Nein, auch schon lange nicht mehr.
Genau.
Und es gibt auch noch ein paar mehr Tipps, wenn ihr Geld spendet an, wo wir sind es vorne.
Genau.
Oder Biere.
Also wir, also der Konstantin, der findet nichts schlimmer.
Der regt sich richtig auf.
Und je höher die Spende ist, ja, umso schlimmer findet der das.
Wenn ihr den richtig auf die Palme bringen wollt, dann müsst ihr so 50 Euro spenden oder
so.
Och nee.
Dann dreht er richtig am Rad.
Haben wir auf.
Das haben wir auf Twitch mal gemacht.
Und dann kamen tatsächlich kleine Spenden rein.
Ja, also man muss wirklich, man muss mit psychologischen Tricks arbeiten.
Ja.
Ja, cool.
Okay, Performance können wir zumachen, das Kapitel.
Ich denke, da haben wir auf jeden Fall Futter geliefert, oder?
Auf jeden Fall.
Mein Kopf ist ganz, also vielleicht liegt es auch daran, dass ich noch krank bin, aber
es fühlt sich alles wattig an, das ist so viel Input.
Aber ich weiß nicht, wann wir zum letzten Mal um diese Uhrzeit noch aufgenommen haben.
Ich glaube noch nie, also ich glaube, Mitternacht haben wir noch nie geknackt.
Und da laufen wir jetzt gerade hin.
Noch ist es nicht ganz, aber wir haben es fast.
Aber wir sind jetzt, wir kommen jetzt wirklich Richtung Ende.
Endspurt, genau.
Aber vorher kommt noch...
Das ist geil, geil, geil, geil, geil, geil, geil, geil.
Perfekt, ausnahmsweise mal so grammatikalisch korrekt.
Perfekt eingebunden.
Als ob wir es nicht schon hundertmal gehört hätten und wissen würden, was da für ein Text kommt.
Aber ich vergesse es trotzdem immer wieder.
Möchtest du beginnen oder soll ich, Shep?
Ich kann ja mal loslegen und zwar mein Geilteil, was ich ziemlich geil finde, ist NVIDIA GeForce Now.
Kennt ihr das?
Ah, darüber haben wir sogar hier schon mal gesprochen, ja.
Ah ja, okay.
Genau, das ist im Prinzip, du hast eine Kiste in der Cloud mit einer fetten CPU und einer brutal fetten NVIDIA Grafikkarte.
Tatsächlich ist es eigentlich eine Tesla-Karte, die da drin steckt.
Und genau, du zahlst, zahlst jetzt, weiß ich nicht, ich zahle irgendwie so, sagen wir mal, sieben Euro im Monat vielleicht.
Und was du machen kannst, ist, dass du, also im Gegensatz zu dem, zu Google Stadia, was es gibt, musst du, kaufst du da keine Spiele,
sondern die docken an, an deinen Steam-Account oder deinen Epic-Account oder auch hier GOG, glaube ich, und vielleicht auch noch einen anderen.
Und du kannst halt auf dieser Kiste die Spiele dann spielen und die werden im Prinzip übers Internet gestreamt.
Allerdings nur, ich glaube, also bei mir in 1080p, aber dann mit allen Schiebereglern oben, mit Raytracing und hast du nicht gesehen.
Und ich glaube, es gibt jetzt ganz neu auch mit 4K, wenn ich mich nicht irre, so als neues Produkt, das dann auch ein bisschen mehr kostet.
Ja, nicht ganz. Warte, ich gucke gerade nach. Es ist, also ich glaube, es ist noch nicht raus. Ich habe nämlich mich bei diesem Programm angemeldet.
Und sobald, das ist irgendwann im Dezember, glaube ich, verfügbar. Es ist QHD, ist die höchste Auflösung, wenn ich es richtig sehe.
Also 2560 mal 1140.
Ah ja.
Also zumindest ist das das Höchste, was mir hier angezeigt wird. Und ich glaube, das war auch das, genau.
Und ich glaube, das kommt dann aber darauf an, wie viel FPS man haben will. Das gibt es dann, glaube ich, nur mit 60.
Wenn man mehr haben will, dann nimmt man halt, genau, also 1080p und da kriegt man dann aber auch 120 FPS theoretisch. Angeblich. Also das ist noch nicht raus.
Ja, das hängt ja auch ein bisschen von deiner Leitung ab.
Ja, genau. Nutze ich auch. Ich habe auch Kritikpunkte da dran.
Also ich finde das an sich genau das Richtige, weil man will sich vielleicht gar keine fette Gaming-Kiste irgendwie hinstellen und zockt, aber manchmal ganz gerne Runde, auch irgendwie mit hübscher Grafik.
Aber es gibt halt einige Spiele nicht, wo ich dachte so, das hätte ich jetzt gerne mal ausprobiert. Ah ja, nee, geht nicht. Also was von den Shops, die du vorhin erwähnt hast, was ich jetzt noch hinzufügen würde, wäre Uplay.
Da gibt es auch einige, aber eben, ich weiß nicht, ob es da alle gibt von Ubisoft. Aber ich habe halt gedacht, ja, ich würde gerne mal, mein letztes Fußball-Simulationsspiel, was ich gespielt habe, war Frankreich 98.
Ja, so alt bin ich. Und ich hätte gerne mal so ein aktuelles FIFA einfach nur mal ausprobiert. Das gibt es aber einfach nicht.
Geht einfach nicht. Und das fand ich dann irgendwie ein bisschen schade. Und es waren am Anfang mehr Spiele drin und irgendwann haben Spielehersteller gesagt, hey, wir wollen es gar nicht, dass unsere Spiele da drin sind.
Und ich denke mir so, es kann euch doch scheißegal sein, ob ich mein Spiel, was ich gekauft habe bei Steam, auf einer Cloud-Gaming-Kiste spiele oder auf meinem Rechner zu Hause.
Was habt ihr da überhaupt? Also da würde mich mal interessieren, was ein Gericht dazu sagt, ob die das überhaupt verbieten dürfen.
Weil letzten Endes habe ich das Spiel gekauft. Auf was für einer Kiste ich das Spiel soll? Müsste denen eigentlich egal sein, finde ich.
Naja. Was ich nervig finde an dem aktuellen Modell ist noch, dass bei mir die Grafikeinstellungen immer wieder zurückgesetzt werden bei vielen Spielen.
Also jedes Mal, wenn ich starte, ist es wieder auf so einem Low-Level-Setting und ich muss dann immer wieder hochziehen.
Aber angeblich ist das auch eins der Features für das teurere Programm, was dann, glaube ich, so 15 Euro im Monat kostet oder so. Ich weiß es nicht genau.
Aber zahlst du gerade oder machst du kostenlos derzeit?
Ich zahle.
Ja.
Okay.
Also ich bin da in diesem Founders, ich bin genau Gründungsmitglied Founders-Ding.
Ja, das habe ich auch.
Genau, da war das noch relativ günstig ganz am Anfang. Und ich glaube, wenn man jetzt den Vertrag da abschließt, dann zahlt man da auch schon ein bisschen mehr.
Also ich glaube, als Founder hat man auf jeden Fall keine Wartezeit, wenn man spielt. Ansonsten, man kann, glaube ich, es gibt auch eine kostenlose Mitgliedschaft, dann kann man auch spielen, aber da hat man eine gewisse Wartezeit und nur eine gewisse Session-Länge, glaube ich. Und dann wird das abgeklemmt.
Genau.
Sonst alternativ für dein Fußballspiel gibt es ja jetzt auch den Xbox Game Pass. Der ist ja quasi das Gleiche von Microsoft. Da hast du dann im Prinzip Xboxen in so Cloud-Infrastruktur und streamst das. Vielleicht findest du dein Fußballspiel da eher.
Also, ja, das kann gut sein. Ja, ich wollte jetzt halt, es ist wie bei den anderen, bei den Videostreaming-Plattformen. Am Anfang hast du gedacht, oh ja, Netflix und damit hast du dann irgendwie alles. Und dann hat man irgendwie noch Amazon dazu und dann irgendwie noch Disney Plus und wie sie alle heißen. Und eigentlich will man ja gar nicht. Eigentlich hätte man ja gern ein großes, wo alles drin ist. Aber das hat es wahrscheinlich nie gegeben.
Dann gab es ja mal Discovery rausgenommen bei Netflix.
Ja, ich hab genau an das auch gerade gedacht, ja.
Unglaublich.
Jetzt soll ich mir auch noch von MGM jetzt auch noch ein Paket holen.
Nix, nix gibt's.
Also, nur für Discovery schließe ich, also ich mein, ich hab's auch geschaut und ich find die Serie gut, aber nur für eine Serie schließe ich jetzt nicht noch irgendwas extra ab.
Da warte ich dann und ärgere mich drüber und sag, was das alles für doofe Menschen sind, die sich das ausdenken.
Geldgehrige Menschen.
Kapitalismus.
Ja, in Star Trek ist das ganze Problem mit Kapitalismus.
Ausgerechnet die Serie, ja, die, äh, naja.
Genau, nur bei den Ferengi, da ist das noch.
Aber was ich sagen muss, da wir ja gerade so die Zukunft gebasht haben, weil es keine OLED-Tapeten gibt, aber diese, diese Streaming-Geschichte, ähm, also das find ich echt faszinierend, dass das, dass das geht.
Ja, auch in der Auflösung und in der Qualität und gerade beim Spiel ja auch mit, mit diesem geringen Delay.
Also, das find ich echt genial, dass das geht.
Also, ich hab mit, äh, mit, äh, anspruchsvolleren Kunden, äh, mal gesprochen, also so jüngere Gamer, die ganz gern kompetitiv, äh, zocken und auch so gegen andere.
Die sind so mittelbegeistert davon, die sagen auch schon, ah, das ist schon ganz gut, aber es ist schon, ich merk's schon, auf der eigenen Kiste ist es dann schon nochmal besser und irgendwie schneller und da hab ich einen Vorteil.
Ähm, aber für mich, äh, als alten Casual-Gamer, der eigentlich fast nur Kampagnen spielt und nie gegen andere und wenn, dann ist mir das auch egal, dann verliere ich sowieso.
Ähm, ist das perfekt, das ist genau das Richtige, weil ich mir eben eine Menge Geld spare durch Gaming-Kiste, äh, die ich jetzt nicht brauche und auch Platz und auch, naja, gut, Strom zahle ich natürlich, äh, woanders.
Ähm, ja, aber ich mein, alleine schon dieses Gefühl, jetzt gibt's irgendwie eine neue Grafikkarte, jetzt muss ich mir eine neue Gaming-Kiste kaufen, das fällt einfach komplett weg, weil ich mich mit der Hardware überhaupt nicht auseinandersetze.
Also, das macht irgendjemand anderes irgendwo im Rechenzentrum, da, wo die dicken Kisten einfach gut belüftet stehen können, das ist einfach eine sehr gute Idee.
Ja.
Ja, und die Karten kosten ja auch, äh, einen Arm und ein Bein gerade, ne?
Ja.
Ja, und sind, wenn sie überhaupt verfügbar sind, ne?
Also, wenn du jetzt so was Aktuelles haben willst, irgendwie so eine, keine Ahnung, GeForce 3080, äh, ich glaub, da hast du, hast du Glück, wenn du überhaupt eine kriegst, jetzt mal, egal, was sie kostet.
Ja.
Oder ist das noch so? Ich glaub schon, dass das, äh, hat sich, glaub ich, nicht großartig geändert.
Ne.
Okay.
Genau, find ich super.
Ja.
Deshalb, geil Teil.
Cool.
Yes.
So, wir haben vorhin schon über die Beyond Tellerrand, äh, gesprochen, äh, eine der besten Web-Konferenzen, die es so gibt, meiner Meinung nach zumindest, und, äh, meine, meine, meine Tassen in meinem Schrank, äh, rekrutieren sich fast ausschließlich aus Beyond Tellerrand-Tassen, äh, einfach weil sie auch sehr hübsch sind, also nicht nur, weil, wer ist, äh, geschenkter Gaul und so, sind einfach sehr, sehr, sehr hübsche Tassen.
Ähm, und die war jetzt mal wieder in Düsseldorf und, äh, da sind jetzt auch schon die ersten Videos rausgekommen und ich weiß nicht, ob das jetzt schon alle sind, bin ich mir nicht sicher.
Es sind so zehn oder so, äh, zehn, elf Videos, äh, von den Konferenztalks, kostenlos zum Anschauen und, äh, wir packen den Vimeo-Link, explizit den Vimeo-Link in die Shownotes, den gibt's auch auf YouTube, ähm, aber ich find, Vimeo hat, kriegt zu wenig Liebe allgemein, YouTube ist da so groß und dann kann man mal wieder die Leute zu Vimeo schicken, meiner Meinung nach.
Und ich hab mir auch schon einige angeschaut, ähm, und, äh, möchte zum Beispiel hervorheben, was ich wirklich großartig fand, ähm, also neben dem Talk von Harry Roberts, der natürlich super war, den haben wir jetzt schon mehrfach angesprochen, äh, von, äh, Bianca Berning, äh, äh, Variable Fonts, what the fuck, äh, fand ich echt richtig gut, weil wenn man, äh, Variable Fonts, ähm, weiß gar nicht, haben wir das vorhin angesprochen?
Ich glaub nicht, äh, ist auch egal, äh, äh, das ist auf, gibt auf jeden Fall einen sehr tollen Einstieg und sehr einfach zu verstehen, ein Einstieg, was das eigentlich ist und wie das funktioniert, äh, sehr visuell supergut nachzuvollziehen, ähm, und danach fragt man sich, warum es überhaupt jemals was anderes gegeben hat.
Also, äh, den auf jeden Fall anschauen, aber auch alle anderen, in die ich reingeschaut hab, wie immer großartig, äh, wirklich einfach eine tolle Veranstaltung.
Genau.
Das war mein Geilteil.
Heißt das etwa?
Wir sind am Ende.
Ja, jetzt, jetzt kommt was, wovor ich ein bisschen Angst hab, wer konzentriert hat.
Wir haben in der letzten Folge einen, äh, einen, äh, einen Endschingel, Endschingel endlich mal, äh, produziert.
Oh Gott.
Und ich hab, äh, wir haben sogar noch so Soundeffekte aufgenommen.
Oh.
Und ich hab das alles einfach, äh, zusammengepackt, bisschen durcheinander gewürfelt.
Ah, das ist zusammengeschnitten.
Mhm.
Oh Gott.
Das wollen wir, wollen wir zum Ende schreiten.
Vielleicht gibt's das nur, dieses eine Mal zu hören, weil ich danach sag, weil ich es danach,
ich, ich, ich werd's, äh, zensieren danach wahrscheinlich.
Wir haben ja gesagt, ich schick's hin und her, also das ist die, die Erstfassung, die
Rohversion, okay?
Ich lass's einfach mal laufen.
Ui.
Das Ende.
Mega.
Das ist super.
Das lassen wir so.
Ja?
Gut.
Das können wir so lassen, ja.
Vielleicht, vielleicht, vielleicht lege ich noch, vielleicht lege ich noch so einen tiefen
Subbass drunter.
Ja, ja, ja, genau, also wir pimpen das noch ein bisschen, aber dann freut mich schon.
Genau, ich hätte gerne noch so eine, äh, wie, wie, wie nennt man das, die, die Ehrfurchts,
äh, die, die Ehrfurchts, äh, die Ehrfurchts, äh, das Ehrfurchtsregister, das wird noch gezogen,
ähm, mit, mit bisschen Rumgebrumme oder so, aber dann ist das, glaube ich, schon, passt
zu uns, ich sag's mal so.
Haben wir doch, haben wir nicht irgendwann mal gesagt, die Folge, in der wir, äh, ein
Endschickle haben, das wird unsere letzte.
Oh, oh.
Okay, äh, tschüss.
Ach ja, es ist genau 0 Uhr jetzt gerade.
Mensch.
Wir hören auf mit einer Schnapszahl.
Es ist nämlich, Mensch, Folge 33, ne?
Also, 33.
Und 0 Uhr 0.
Wir könnten, wir könnten nur einen Schnaps trinken.
Ach Gott.
Nee, nee.
Begeisterung ist groß.
Lass mal lieber.
Okay, ich, äh, ich, ich, ich, ich trinke, ich trinke einen für euch mit.
Okay, alles klar.
Das ist gut.
Ich trinke, ich trinke einen für euch mit.
Ja, super, wunderbar.
Mensch, oh, Wahnsinn.
Mensch.
So viel Input wieder und so viel Neues, ähm, neue APIs, neue Techniken, Wahnsinn.
Cool.
Ja, vielen, vielen Dank, Shep, dass du dabei warst und, äh, uns noch viel beigebracht hast,
was wir noch nicht kannten.
Das war jetzt wirklich Gold wert, äh, und ich hoffe, dass ihr Hörer und Hörerinnen, äh, auch
noch was lernen könnt, aber ich, naja, ihr wisst das natürlich alles schon, wir waren
die Einzigen, die das noch nicht wussten.
Bestimmt.
Genau.
Ja, schön, dass du dir Zeit genommen hast.
Sehr interessant.
Gerne, gerne.
Ja, hat Spaß gemacht.
Das freut mich.
Vielen Dank für die Einladung.
Sehr gerne.
Und, genau, wir sehen uns, äh, hier in diesem Internet.
Auf jeden Fall.
Genau.
So, das hört auch mal bei Working Draft rein.
Ja, auf jeden Fall nochmal an der Stelle.
Da hört ihr, da könnt ihr den, äh, den Shep regelmäßig hören.
Vielleicht nicht immer so elaboriert, aber.
Quatsch.
Ja, bei uns, äh, traditionsgemäß, hat der Gast das letzte Wort.
Ja.
Möchtest du noch was pluggen, oder?
Kannst du gerne jetzt.
Ich, nee, ich hab nichts zu pluggen.
Ich, äh, finde es, äh, auf jeden Fall krass, dass wir so eine lange Folge eingetütet haben.
Hätte ich nicht gedacht.
Äh, deswegen auch nicht nur Hut ab an uns, sondern auch an die Menschen, die das, äh, vielleicht bis zu diesem Zeitpunkt durchgehört haben.
Ähm, genau.
Und ihr könnt ja auch mal Feedback geben, ob das jetzt von der Länge her mehr zu eurem, äh, zum Weg zur Arbeit passt, als die kurzen Folgen.
Vielleicht.
Genau.
Super.
Ähm, bis bald.
Bis dann.
Ciao.