Auch nur eine von uns? Die neue Website von Taylor Swift unter der Lupe

Was haben die NASA, das Weiße Haus, Angry Birds und Rafael Nadal mit Taylor Swift gemeinsam? Alle ihre Websites laufen auf WordPress. Im Fall von Taylor Swift wurde das kürzlich auch einer breiteren Öffentlichkeit bewusst, als ihre Website während der jüngsten Grammy-Verleihung zwischenzeitlich nicht erreichbar war und Besucher*innen stattdessen von einem WordPress-Logo begrüßt wurden. Innerhalb der WordPress-Community ist das natürlich nicht unbemerkt geblieben – was auch WordPress-Häuptling Matt Mullenweg dazu veranlasste, Tay Tay für die Zukunft Tech-Support anzubieten, um zukünftig Ausfälle zu vermeiden.

Was alle Beispiele zeigen: Allen Unkenrufen zum Trotz kann WordPress durchaus auch für Websites mit enorm viel Traffic eingesetzt werden. Bei so einem prominenten Thema ist es für mich aber sehr spannend zu erfahren, wie so ein Projekt umgesetzt wird. Zeit für einen Blick auf und unter die Haube von taylorswift.com.

Vorsicht, es wird schlaumeierisch und ziemlich WordPress-nerdy! 🤓

Wer und wann

Betreiber der Website ist laut der zuletzt im April 2019 aktualisierten Terms ein Arm der Plattenfirma, nämlich UMG Commercial Services, Inc. im Auftrag von Taylor Nation, LLC, vermutlich eine Geschäftsstrukur der Künstlerin selbst. Ein Blick in die style.css des aktivenThemes lässt die Vermutung zu, dass eine englische Agentur namens Push Entertainment mit der Erstellung der Website beauftragt wurde.

Die Website in dieser Form ist ziemlich neu, am oder um dem 5. Februar 2024 wird sie wohl laut Wayback Machine gelauncht worden sein. Die Vorversion, hier im Stand vom 03. Februar, lief auch schon auf WordPress.

Es gibt natürlich auch einen Online-Shop, und zwar auf der Subdomain store.taylorswift.com, aber der läuft auf Shopify. Vielleicht will Mr. Mullenweg bei der Gelegenheit mal Woo pitchen?

Design

Das Design der Website ist ziemlich reduziert und steht ganz im Licht des offensichtlich des am 19. April 2024 erscheinenden, neuen Albums mit dem Titel „The Tortured Poets Department“. Beige-Töne, körnige Hintergründe und Fotos, sowie eine ziemliche klassisch anmutende Font-Auswahl mit „Big Caslon“ und „Nitti Typewriter“ – alles soweit ganz stimmig und gefällig. Und ein bisschen lahm, but that might be just me. Passendes Favicon und Open-Graph-Image sind da, nix zu meckern hier also. 🥸

Ein Blick auf die Vorversion der Website zeigt, das hier offensichtlich andere Töne angeschlagen werden sollen als zuvor, auch im Vergleich zur ziemlich pompösen Gestaltung der noch laufenden „Eras“-Welttournee.

Oben links in der Ecke findet sich ein Logo, auf das ich ziemlich lange gestarrt habe, um in der zusammengesetzten Buchstabenform ein „Taylor Swift“ zu entdecken – bis mir schließlich aufgefallen ist, dass es sich um die zusammengeschobenen Buchstaben „TTPD“ handelt, also die Anfangsbuchstaben des erwähnten Albumtitels.

Die Menüleiste ist oben sticky und setzt sich auch beim Scrollen nicht etwa durch eine Linie oder einen Schlagschatten ab, so dass der Content der Website hinter demselben Background der Menüleiste verwindet. Kann man machen, ist aber in meinen Augen gestalterisch etwas faul. 🤷‍♀️

Struktur

Die Website besteht oberflächlich aus einem ziemlich simplen One-Pager, mit einigen verlinkten Unterseiten für Nutzungsbedingungen, Datenschutz und Accessibility. Ein Blick auf die Sitemap verrät aber noch einige Unterseiten mehr, etwa Landing Pages für die anstehende „Eras“-Tour in den USA und weltweit, aber auch eine Thank-You-Page für Neuabonnent*innen des Newsletters. So weit, so unspannend.

Interessanter ist natürlich, dass die Sitemap hier zwei Custom Post Types mit den Slugs video und gig enthüllt. Und die Beiträge dieser CPTs sind öffentlich direkt zugänglich, siehe etwa „Lavender Haze“ oder der noch mehr nach Unfall aussehende Veranstaltungspost „Hard Rock Stadium“. Im Falle von video gibt es sogar eine ziemlich ungestaltete Archive-Seite.

Soll das so? Wohl kaum. 😜

Stack und Infrastruktur

Wie bei der Sitemap schon erkennbar, kommt hier das wohlbekannte SEO-Plugin Yoast zum Einsatz, wie immer auch auf den ersten Blick im Quellcode sichtbar. Der oft kritisierten Code-Kommentar „This site is optimized with the Yoast SEO plugin v20.2.1“ offenbart auch gleich mal einen Hinweis zur Update-Disziplin: Version 20.2.1 wurde am 2. März 2023 veröffentlicht. Seitdem werden wohl das ein oder andere Update veröffentlicht worden sein, oder? 🤷

Nicht ganz so dramatisch steht es um die Aktualität der WordPress-Software: Wir befinden uns hier bei Version 6.2.3, also auf Stand vom Oktober 2023. Nun ja.

Die WP-Core-Blocks werden um die Blocks von Kadence erweitert (wie schon mehrfach beobachtet). Das CSS der Website wird (zumindest teilweise) mit Autoptimize, nun ja, optimiert. Zudem lädt mit Contact Form 7 ein alter Übeltäter seine Assets, obwohl gar kein Formular auf der Website präsent ist: Es gibt zwar ein Newsletter-Abo-Formular, aber das bringt wohl der Newsletter-Dienstleister mit.

Im Quellcode lassen sich noch einige andere Plugins ausmachen:

• appreciation-engine-social-sign-in
• umg-grand-royal-theme-plugin
• push-global
• umg-analytics
• umg-aal

Diese Plugins scheinen alle Eigenentwicklungen zu sein, die offenbar auf vielen Websites von Künstler*innen aus dem Kosmos der Universal Music Group zum Einsatz kommen, wie dieser Index der Website themesinfo.com belegt, etwa auf den Websites von The Velvet Underground, Sex Pistols oder Mumford & Sons.

Die zur Gestaltung der Website eingesetzten Schriftarten werden von Adobe Fonts/Typekit ausgeliefert, für den Newsletter wird ein Service namens Listrak eingesetzt.

Gehostet wird die Website offenbar bei einem Anbieter namens Imperva/Incapsula. Ein CDN scheint hier nicht zum Einsatz zu kommen, nur bei einzelnen Scripten hilft Cloudflare aus.

Speed und Auffälligkeiten

Subjektiv lädt die Website schnell, aber Google zeigt sich in seinen PageSpeed Insights nicht gerade begeistert. Faszinierend, dass hierauf offensichtlich nicht so viel Wert gelegt wird.

Optimierungspotenzial gibt es jedenfalls einiges, darunter auch einige low hanging fruit. Neben den üblichen Vorschlägen von Google fällt beim Herumstochern im Quellcode noch folgendes auf:

• Es werden von Google Fonts die Schriftarten Roboto und Raleway geladen, obwohl sie bei der Gestaltung der Website gar nicht zum Einsatz kommen.
• Offenbar wird zweimal dasselbe Google Analytics Script geladen.
• Es wird ein Google reCAPTCHA Script geladen, obwohl es m.E. im Newsletter-Abo-Formular gar keine Anwendung findet.

Natürlich – und das bemängelt auch Google in seinen PageSpeed Insights – wird ein bunter Strauß anderer Services angeklingelt, was das Laden der Website weiter verlangsamt: Snapchat, Twitter, TikTok, Facebook, DoubleClick etc. (natürlich, ohne dass das in der Datenschutzerklärung auch nur Erwähnung fände).

Accessibility

Eine komplette Accessibility-Prüfung würde hier den Rahmen sprengen – und außerdem bin ich hier auch nicht der Experte. Aber einige kursorische Beobachtungen sollen nicht fehlen. So ist die Navigation der Website per Tastatur erschwert – für die Menüpunkte ist kein focus– oder active-Status definiert. Links im Fließtext auf Unterseiten sind zwar unterstrichen, aber haben noch nicht mal einen hover-Status. Beim Labeling scheint etwas durcheinander zu sein: aria-label=Taylor Swift - I Can See You sehe ich da zum Beispiel. Die Überschriften-Ordnung scheint auch eher willkürlich zu sein: Auf eine nicht sichtbare h1 folgt dann direkt eine h3, und so geht es munter weiter. Das Newsletter-Formular fällt auch durch: Welches Feld gerade im Fokus ist beziehungsweise wo der Cursor sich gerade befindet, kann man nur raten.

Vor allem aber: Der Kontrast von hell-beigen Text auf dem körnigen, dunkel-beigen Untergrund ist aus Barrierefreiheitsperspektive wohl kaum ausreichend, was sich fatalerweise gerade im Accessibility-Statement mit einem Fließtext in sehr kleiner Textgröße und geringem Zeichenabstand zeigt. Und ein besonderes Bonmot findet sich im Footer: In einer Schriftgröße von unglaublichen 5px steht dort sichtbar, aber unlesbar der folgende Hinweis: „If you are using a screen reader and are having problems using this website, please call 866-682-4413 for assistance.“ So etwas erinnert irgendwie an SEO-Maßnahmen aus den frühen Nuller-Jahren, bei denen Massen redundanter Texte vollgestopft mit Keywords in minimaler Schriftgröße in hellgrau auf weißem Hintergrund platziert wurden. 🧐

„UMG is proud of its ongoing efforts to ensure that the Website and Web Store, respectively, are accessible to everyone…“, so heißt es im Accessibility-Statement. Nunja, Barrierefreiheit bleibt hier wohl eher ein Lippenbekenntnis.

Schluss

Look what you made me do – das hat doch mal wieder Spaß gemacht! Was bleibt festzuhalten? Im Hause Swift wird auch nur mit Wasser gekocht, um diese abgegriffene Formel noch einmal herauszukramen. Es ist lustig zu sehen, dass auch bei solch einem Projekt mit den selben oder ähnlichen Tools gearbeitet wird, die ich auch verwenden würde. Die Website wird sicherlich die verfolgten Ziele (Ka-Chiiing! 💰) erfüllen, Optimierungspotenzial gibt es aber wohl doch.

Eine prominentere Botschafterin für WordPress kann man sich jedenfalls kaum vorstellen. Vielleicht kann Matt Mullenweg mal ein kleines Swag-Paket schnüren – The Time Person of the Year 2023 im WordPress-Shirt, das wäre doch mal was!

Warum habe ich dieses kleine Review unternommen? Nun, abgesehen von der Tatsache, dass es Spaß macht, Schlauberger zu spielen, versuche ich, meine eigenen Web-Projekte zu verbessern, indem ich die Arbeit anderer unter die Lupe nehme. Im Grunde habe ich so alles gelernt, was ich über Web-Entwicklung weiß – und habe offensichtlich noch nicht ausgelernt.

Wie schon bei anderen Reviews plagt mich jetzt natürlich die Sorge, dass meine eigene (etwas in die Jahre gekommene) Website und andere meiner Projekte auseinander genommen werden. Oder vielmehr noch in diesem Fall: dass ich ins Fadenkreuz beleidigter Swifties gerate! Ich flehe um Erbarmen! (Aber ich freue mich natürlich über schlaue Tipps!) 🙀

Die Titelgrafik beruht auf einem Foto von jurvetson/Flickr, veröffentlicht unter CC BY 2.0 Deed, via Wikimedia Commons. Bearbeitungen und zusätzliche Illustrationen sind von mir.

Alle Screenshots von taylorswift.com dienen lediglich Dokumentationszwecken.

---

Jetzt bist du an der Reihe: Wie gefällt dir die neue Website von T-Swizzle? Was habe ich übersehen? Wie findest du dieses Review? Schreib’s mir in die Kommentare! 👇