Performance Tuning in Joomla Teil 4: Fitnessübungen

(Geschätzte Lesezeit: 12 - 24 Minuten)

Im dritten Teil dieser Serie habe ich beschrieben, wie man durch die Optimierung der statischen Mediendateien mehr Leistung aus einer Webseite herausholen kann. In diesem Teil spreche ich über den letzten Schliff, der deine Webseite professioneller macht.

(Aufgrund eines kleinen familiären Notfalls erscheint dieser Teil einen Monat später als erwartet),

Dabei geht es vor allem darum, wie deine Webseite mit Suchmaschinen und sozialen Netzwerken interagiert, aber auch ein bisschen (mehr) Leistung ist dabei.

Dies ist eine Übersetzung des Artikels «Joomla 4 Performance Tuning Part II- Basic Settings» von Nicholas Dionysopoulos aus dem Joomla! Community Magazine 03/22 (Link zum Original)

Fitnessübungen für den Aufbau einer Webseite

Wenn du alle bisherigen Empfehlungen umgesetzt hast, bist du zu 90 % auf dem Weg zu einer Webseite, die gut funktioniert, gut platziert ist, und die auch leicht zu pflegen ist.

Wir werden nicht über Techniken sprechen, die entweder veraltet sind (wie das Kombinieren und Minifizieren von CSS und JavaScript - ernsthaft, tue das nicht!) oder für die meisten Menschen umständlich sind (wie der Versuch, Leerzeichen und Zeilenumbrüche aus Ihrer HTML-Ausgabe zu entfernen oder eine Progressive Web Application zu erstellen). Erstere sind sinnlos, letztere haben ein anderes Zielpublikum als die Leute, die diese Serie verfolgen.

Stattdessen werden wir über einige Dinge sprechen, die du tun kannst, um die Leistung deiner Webseite zu verbessern und einige Reibungspunkte mit den Benutzern zu beseitigen. Es ist in der Regel nicht so einfach wie "installiere dies, klicke das, bam, wham". Aber, es ist den geringen Mehraufwand wert. Wenn du dies ein paar Mal machst, wird es dir zur zweiten Natur und deine Kunden werden von der Leistung der von dir gelieferten Webseiten beeindruckt sein.

OpenGraph und Twitter-Karten

Wenn du jemals eine URL in ein soziales Netzwerk wie Facebook (und seine anderen Web-Eigenschaften wie Instagram, Messenger und WhatsApp), Twitter oder LInkedIn oder sogar eine Messaging-Anwendung wie Apple Messages, Slack usw. eingegeben hast, dann hast du vielleicht etwas Interessantes gesehen. Du erhältst eine Art Karte mit einem Bild und einer kurzen Beschreibung des Inhalts der Seite. Möglicherweise erhältst du sogar Links zu den Autoren oder Herausgebern der Inhalte in diesem sozialen Netzwerk. Wie funktioniert diese Magie? «The answer, my friend, is not blowing in the wind», sondern vielmhr in den Meta-Tags im HTML-Quellcode der Seite. Nämlich die OpenGraph- und Twitter Card- Meta-Tags.

Es gibt zwei Möglichkeiten: Du verwendest die Erweiterung eines Drittanbieters, oder du bearbeitest dein Template und schreibst Template Overrides.

Der erste Weg ist wohl viel einfacher. Es gibt mehrere Erweiterungen für Joomla, die dir dabei helfen. Ein einfaches, aber leistungsfähiges Plugin ist Social Magick, das Titelkartenbilder aus einer Kombination von Hintergrund-/Overlay-/Maskenbild, dem vollständigen Inhaltsbild des Artikels und dem Titel - oder einer Kombination daraus - erzeugt. Um es ganz offen zu sagen: Dieses Plugin gehört dem Unternehmen meiner Frau, und ich bin sein Hauptentwickler. Ein weiteres Plugin, das ich verwendet habe, ist Phoca Open Graph, mit dem du deine OpenGraph- und Twitter Card-Tags für deine Inhalte einrichten können. Dieses Plugin verwendet das Bild des gesamten Inhalts Ihres Artikels als Kartenbild. Beide Plugins füllen die anderen OpenGraph-Metadaten aus den Informationen Ihres Artikels aus.

Wenn du deine eigenen Templates oder -Overrides entwickelst, kannst du einen vollständig benutzerdefinierten Code verwenden. Dies gibt dir die absolute Kontrolle, ist aber natürlich viel aufwendiger. Die erste Änderung besteht natürlich darin, dass du das Root-HTML-Element deines Templates so änderst, dass es den Namensraum für OpenGraph enthält, z. B.:

<html lang="<?php echo $this->language; ?>" dir="" prefix="og: http://ogp.me/ns#">

Dem aufmerksamen Leser wird auffallen, dass wir ein Präfix anstelle eines XML-Namensraumes verwenden. Dies ist die empfohlene Methode, die in neueren Browsern, d. h. Internet Explorer 10 und höher, funktioniert.

Anschliessend musst du für die Anzeige deiner Kategorien und Artikel Template Overrides erstellen, die die erforderlichen OpenGraph- und Twitter Card-Tags enthalten. Ein Artikel-Template Override (templates/MY_TEMPLATE/html/com_content/article/default.php bzw. ab Joomla 4.1 /media/templates/site/...) könnte zum Beispiel so aussehen:

$imagesRegistry = new \Joomla\Registry\Registry($this->item->images ?? '{}');
$imageIntro = $imagesRegistry->get('image_intro', null);
$imageFull = \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($imagesRegistry->get('image_fulltext', $imageIntro))->url;
$canonicalURL = Route::_(ContentHelperRoute::getArticleRoute($this->item->id), true, Route::TLS_IGNORE, true);
$doc = $this->document;

$doc->setMetaData('og:type', 'blog');
$doc->setMetaData('og:title', $this->item->title);
$doc->setMetaData('og:description', $doc->getDescription());
$doc->setMetaData('og:site_name', $app->get('sitename'));
$doc->setMetaData('og:url', $canonicalURL);
$doc->setMetaData('og:image', $imageFull);
$doc->setMetaData('twitter:card', 'summary_large_image');
$doc->setMetaData('twitter:site', '@Ihr_twitter_handle');
$doc->setMetaData('twitter:creator', '@Ihr_twitter_handle');
$doc->setMetaData('twitter:description', $doc->getDescription());
$doc->setMetaData('twitter:title', $this->item->title);

Eine Override der Blog-Vorlage für eine Kategorie würde ebenfalls einen Code ähnlich dem folgenden benötigen:

$canonicalURL = Route::_(ContentHelperRoute::getCategoryRoute($category->id), true, Route::TLS_IGNORE, true);

$doc->setMetaData('og:type', 'blog');
$doc->setMetaData('og:title', $this->params->get('page_title', $category->title));
$doc->setMetaData('og:description', $doc->getDescription());
$doc->setMetaData('og:site_name', $app->get('sitename'));
$doc->setMetaData('og:url', $canonicalURL);
$doc->setMetaData('og:image', \Joomla\CMS\HTML\HTMLHelper::cleanImageURL($category->params->get('image'))->url);
$doc->setMetaData('twitter:card', 'summary_large_image');
$doc->setMetaData('twitter:site', '@Ihr_twitter_handle');
$doc->setMetaData('twitter:creator', '@Ihr_twitter_handle');

Die Verwendung von Template Overrides funktioniert natürlich am besten, wenn du ohnehin vorhabst, dein eigenes Template zu erstellen, und daher Unmengen von Template Overrides erstellst. Wenn du unsicher bist, verwende die dritte Plugin-Methode.

DNS-Prefetch und das Vorladen externer Ressourcen

Irgendwann früher in der Serie habe ich gesagt, dass Browser nicht auf magische Weise wissen, welche Dateien sie anfordern müssen, wenn sie die Seite laden, sondern sie beginnen mit dem Laden von Dateien, wenn sie herausfinden, dass sie sie brauchen, oder wenn Sie sie mit HTTP/2 Push an den Browser weitergeben. Ich habe ein wenig gelogen. Du kannst dem Browser einige Hinweise geben, damit er mit den Vorbereitungen beginnt, während er noch die ersten paar Bytes Ihres HTML-Inhalts herunterlädt, indem du die DNS-Prefetch- und Preload-Link-Tags verwendest. Aber ich glaube, ich greife mir hier selbst vor.

DNS-Prefetch

Als ich beschrieb, wie ein Browser CSS-, JavaScript- und Bilddateien abruft, die zum Rendern der Seite erforderlich sind, verwendete ich ein vereinfachtes Modell, bei dem der Browser eine Anfrage an "den Server" sendet. Die unausgesprochene Annahme war, dass "der Server" sich auf denselben Server und Domänennamen bezieht wie der, von dem der HTML-Inhalt geladen wird. Bei den meisten Joomla-Webseiten ist dies tatsächlich der Fall. Es kann jedoch sein, dass deine Seite ein externes CDN verwendet, um einige Mediendateien zu hosten, CSS von Google Fonts oder einer ähnlichen Ressource einzubinden, JavaScript von einem externen Dienst zu laden und so weiter und so fort. All diese Ressourcen werden unter einem anderen Domänennamen gehostet als dem, unter dem deine Webseite gehostet wird und der deinen HTML-Inhalt bereitstellt. Dein Browser kann nicht auf magische Weise eine Verbindung zu diesen externen Domänennamen herstellen; Domänennamen müssen zunächst mittels einer DNS-Abfrage in eine IP-Adresse aufgelöst werden.

DNS-Abfragen können langsam sein, vor allem bei Verbindungen mit hoher Latenz, wie z. B. bei Satelliten- oder Mobilfunkverbindungen oder einfach nur bei minderwertigen WiFi-Verbindungen - wenn die Pandemie vorbei ist und wir wieder von Cafés, Hotels und Flughafen-WiFi-Verbindungen aus arbeiten können. Dies führt zu einer Verzögerung beim Laden der Ressource, die von lästig (grosse Layoutverschiebungen) bis hin zu regelrecht problematisch (eine nicht aufgeschobene, nicht asynchrone JavaScript-Einbindung führt dazu, dass die Seite nicht geladen wird) reichen kann.

Mit DNS-Prefetching kannst du Sie den Browser vorwarnen und ihm im Wesentlichen mitteilen, dass er diese Domänennamen während des Renderns der Seite auflösen muss. Der Browser kann die DNS-Abfragen durchführen, während er darauf wartet, dass eine blockierende JavaScript- oder CSS-Datei endlich geladen wird, und spart dem Benutzer so etwas Zeit bei der späteren Darstellung der Seite.

Ein weiterer guter Grund, den DNS-Prefetch-Hinweis bereitzustellen, ist, wenn du weisst, dass eine Benutzerinteraktion dazu führt, dass eine Ressource von einer externen Site geladen wird. Wenn du z. B. weisst, dass das Anklicken einer "Gefällt mir"-Schaltfläche eine Verbindung zum Domänennamen eines sozialen Netzwerks auslöst, ist es sinnvoll, dem Browser mitzuteilen, dass er den Domänennamen im Voraus auflösen soll, damit die Schaltfläche besser auf die Interaktion des Benutzers reagieren kann.

Dies geschieht am besten in der index.php deines Templates oder im betreffenden Template Override.

Nehmen wir zum Beispiel an, dass deine Webseite ein Bild von cdn.example.com lädt, wenn der Benutzer auf eine Schaltfläche auf der Seite klickt. Wenn der Browser den DNS vor der Benutzerinteraktion auflöst, spart das wertvolle Zeit.

Wenn du dies in der index.php deines Templates tust, musst du Folgendes eintragen:

$this->getPreloadManager()->dnsPrefetch('https://cdn.example.com');

Beachte, dass dieser Code früh in der index.php-Datei des Templates verwendet werden muss, bevor du den Kopf des Dokuments abrufst oder ausgibst. Das Preload-Manager-Objekt des Dokuments wendet Änderungen nur auf den Kopf des Dokuments an.

Innerhalb eines Template Override musst du stattdessen Folgendes eintragen:

$this->getDocument()->getPreloadManager()->dnsPrefetch('https://cdn.example.com');

Pre-Connect

Es ist gut, wenn der Browser die DNS-Abfrage im Voraus durchführt. Wenn du jedoch weisst, dass der Browser höchstwahrscheinlich eine Verbindung zu der externen Webseite herstellen muss, um die zum Rendern der Seite verwendeten Ressourcen wie CSS, JavaScript, Bilder oder Schriftartendateien abzurufen, ist es noch sinnvoller, den Browser anzuweisen, eine HTTP-Verbindung zum externen Server zu öffnen und diese bereitzuhalten. Dies geht noch einen Schritt weiter als der DNS-Prefetch. Es übernimmt die DNS-Auflösung, den TCP-Handshake (Öffnen der Verbindung zum Server) und die TLS-Aushandlung (Vorbereitung auf die Verwendung von HTTPS). Es bleibt eine Verbindung zu diesem Server offen und diese ist bereit zur Nutzung.

Dies funktioniert auf die gleiche Weise wie der DNS-Prefetch, aber du verwendest stattdessen die preconnect()-Methode des Preload-Managers.

Nehmen wir an, du möchtest Google Fonts verwenden. Das bedeutet, dass du CSS von fonts.googleapis.com lädtst, die wiederum die Schriftdateien von fonts.gstatic.com laden. In der index.php-Seite deines Templates musst du also Folgendes tun:

$this->getPreloadManager()->preconnect('https://fonts.googleapis.com', []);
$this->getPreloadManager()->preconnect('https://fonts.gstatic.com', []);

Ähnlich verhält es sich mit dem Preconnect. Wenn du dies innerhalb eines Template Overrides tust, musst du $this durch $this->getDocument() ersetzen, da der Ausführungskontext ein anderer ist.

Vorladen von Ressourcen

In manchen Fällen sind die Dateien, die geladen werden müssen, für den Browser nicht sofort ersichtlich, wenn er nur den HTML-Code Ihrer Seite analysiert. Einige Ressourcen können von einer CSS- oder JavaScript-Datei referenziert werden. Wenn das passiert, denkt der Browser: "Na toll, ich muss noch eine weitere Datei auf meine Download-Liste setzen". Dies kann sich nachteilig auf die Leistung deiner Webseite auswirken, da diese Datei wichtig sein kann, z. B. eine Schriftartdatei oder ein Bild, das eine Layoutverschiebung verursacht, oder eine extern gehostete JSON- oder JavaScript-Datei, deren Notwendigkeit erst dann deutlich wird, wenn der Browser die Analyse und Ausführung eines anderen Teils von JavaScript abgeschlossen hat. Letzteres ist sehr häufig der Fall, wenn JavaScript-Code von Diensten Dritter eingebunden wird.

Auch hier kannst du den Browser vorwarnen, indem du ihm mitteilst, dass er irgendwann eine bestimmte Datei abrufen muss. Indem du ihm den Hinweis sehr früh im HEAD-Abschnitt des HTML-Dokuments gibst, kann der Browser den Abruf dieser Datei optimieren, d. h. er kann mit dem Herunterladen im Hintergrund beginnen, während sein Haupt-Thread damit beschäftigt ist, auf blockierendes CSS und JavaScript auf der Seite zu warten und es zu analysieren.

Genau wie das DNS-Prefetching funktioniert das Vorladen von Ressourcen durch die Verwendung des pre;pad manager-Objekts von Joomla.

Wenn ich zum Beispiel eine Schriftartdatei von der index.php-Seite des Templates vorladen möchte:

$this->preloadManager->preload('https://cdn.example.com/my_font.woff2', ['as' => 'font', 'crossorigin' => 'anonymous']);

Es ist wichtig, ein paar Dinge zu beachten.

Anders als beim DNS-Prefetch gibst du eine vollständige URL zu einer Datei an.
Das as-Attribut ist obligatorisch und teilt dem Browser den Verwendungszweck der Datei mit, z. B. Schriftart, Bild, Video usw.
Das crossorigin-Attribut ist für moderne Browser im Wesentlichen obligatorisch und weist sie an, wie sie die Authentifizierung von Anfragen handhaben sollen. Wenn es auf anonymous gesetzt wird, werden keine Cookies, HTTP-Authentifizierung oder clientseitige SSL-Zertifikate gesendet und sind immer erlaubt. Die Einstellung use-credentials lässt Cookies, HTTP-Authentifizierung oder clientseitige SSL-Zertifikate zu, unterliegt aber den Cross-Origin-Ressourcenrichtlinien der Webseite, die die Anfrage effektiv verhindern können, so dass Ihre Bemühungen, dem Browser Hinweise zu geben, zunichte gemacht werden.
Vorgeladene Ressourcen müssen innerhalb einer "kurzen Zeitspanne" verwendet werden, die bei den meisten Browsern zwischen 5 und 10 Sekunden liegt. Wird die Ressource innerhalb dieser Zeit nicht verwendet, wird sie aus dem Speicher-Cache entfernt, was bedeutet, dass der Browser sie nicht verwendet, und der Browser gibt eine verärgerte Meldung in der Konsole aus - und du wirst in den Leistungskennzahlen deiner Seite abgestraft!

Schriftarten austauschen

Dies ist eine wichtige Funktion, wenn du benutzerdefinierte Schriftarten verwenden. Standardmässig versucht der Browser zu erraten, ob er überhaupt Text anzeigen soll, solange Ihre benutzerdefinierte Schriftart noch nicht geladen und analysiert wurde. Wenn deine CSS-Schriftart keine Fallback-Systemschriftart enthält, ist das Standardverhalten "block", was bedeutet, dass dein Browser überhaupt keinen Text anzeigt, bevor er die von dir angegebene benutzerdefinierte Schriftart abruft.

Hast du schon einmal eine Webseite besucht, auf der überhaupt kein Text angezeigt wurde, und hast du frustriert auf eine grösstenteils weisse Seite mit ein paar Bildelementen hier und da gestarrt, bis plötzlich der ganze Text da war? Ja, das ist der Grund.

Glücklicherweise kann man dem Browser mit dem CSS-Attribut font-display mitteilen, dass er etwas anderes tun soll. Wenn du es auf "swap" setzt, wird der Browser ungeduldig und greift auf die Standardschriftart zurück, während er auf den Download der benutzerdefinierten Schriftart wartet. Wenn die benutzerdefinierte Schriftart heruntergeladen ist, auch wenn es mehrere Minuten dauert, wird die Seite mit der neuen Schriftart neu gerendert. Wenn du ihn auf Fallback einstellst, wird der Browser ebenfalls ungeduldig sein, aber wenn die benutzerdefinierte Schrift nicht innerhalb von Sekunden geladen wird, bleibt er bei der Fallback-Systemschrift und ignoriert die benutzerdefinierte Schrift ganz.

Wenn du Google Fonts verwendest, genügt es, in der URL /css? durch /css2? zu ersetzen und &display=swap hinzuzufügen. Zum Beispiel wird das Laden von Noto Sans zu:

Am besten ist es, gute Ausweichschriften einzurichten und die Schriftartanzeige auf Swap zu setzen. Für Icon-Schriften solltest du Block verwenden, so dass ein Leerraum angezeigt wird, während die Icon-Schrift geladen wird.

Apropos Ausweichschriftarten: Du solltest die Standard-Systemschriftarten als Ausweichschriftarten verwenden. Serifenlose Schriftarten können zum Beispiel einen Fallback von

BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", Helvetica, Arial, sans-serif

die neuere und ältere Apple-Geräte, Windows 7 bis 11, Android und Altsysteme abdeckt und die serifenlose Standardschriftart der Benutzeroberfläche auf jeder Plattform bevorzugt. Die Idee dahinter ist, dass der Benutzer eine vertraute Schriftart anstelle der typischerweise hässlicheren serifenlosen Standardschrift sieht. Auf Apple-Geräten wird beispielsweise die Systemschriftart San Francisco anstelle der Schriftart Helvetica verwendet.

Favicons

Als die Dinosaurier noch die Erde beherrschten und 800x600 Pixel als "hohe Auflösung" galten - das war um 2001 - gab es 16x16 Pixel grosse Favicons in 256 Farben, die ursprünglich dazu gedacht waren, ein Site-Logo in den Lesezeichen des Benutzers zu präsentieren. Zwei Jahrzehnte später sind diese Symbole nicht mehr quadratisch, 16 Pixel gross, 256 Farben und auf Lesezeichen beschränkt.

Favicons werden natürlich immer noch für Lesezeichen und in Webseiten-Tabs verwendet, genau wie vor 20 Jahren. Sie werden auch zur Anzeige von Symbolen auf den Startbildschirmen von Smartphones und Tablets verwendet, wenn du eine Verknüpfung für die Webseite erstellst. Ausserdem werden sie von Diensten Dritter verwendet, um ein Logo für deine Webseite zu erstellen. Wenn du noch nichts von dieser Verwendung gehört hast, schau dir diesen CodePen von Drittanbietern an.

Um die Sache noch komplizierter zu machen, gibt es mehrere Grössen, die von verschiedenen Generationen von Smartphones, Tablets, Browsern und Betriebssystemen benötigt werden. Eine gute Referenz für alle diese Faktoren findest du hier auf GitHub.

Wenn wir eine Liste erstellen würden, die alle Geräte, Browser und Betriebssysteme von 2013 bis einschliesslich 2022 unterstützt, kämen wir auf Folgendes:

Eine ICO-Datei mit 16x16, 24x24, 32x32, 48x48 und 64x64 Pixeln.
Sieben PNG-Dateien in den Grössen 32x32, 128x128, 152x152, 167x167, 180x180, 192x192 und 196x196 Pixel.
Eine 144x144 Pixel grosse PNG-Datei und eine Hintergrundfarbe für die Windows Modern UI-Seitenkacheln, die veraltet sind, aber noch nicht entfernt wurden (und in Windows 7 sehr häufig verwendet werden, was die Leute aus irgendeinem Grund immer noch nutzen).

Um sie zu Joomla hinzuzufügen, musst du die index.php-Datei der Vorlage bearbeiten und diese vor der Ausgabe des HEAD des HTML-Dokuments einfügen. Unter der Annahme, dass bei dir die Dateien in images/logos/favicon gespeichert sind, haben wir den folgenden Code:

$doc = \Joomla\CMS\Factory::getApplication()->getDocument(); $baseUrl = \Joomla\CMS\Uri\Uri::base();
// Good old 16px square favicon
$doc->addFavicon($baseUrl . 'images/logos/favicon/favicon-16.ico');
// Default fallback: 152x152 pixels
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-152.png', 'apple-touch-icon-precomposed', 'rel');
// Windows Modern UI tile $doc->setMetaData('msapplication-TileColor', '#d43431'); $doc->setMetaData('msapplication-TileImage', $baseUrl . 'images/logos/favicon/favicon-144.png'); // All other sizes
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-196.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "196x196"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-192.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "192x192"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-180.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "180x180"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-167.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "167x167"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-152.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "152x152"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-128.png', 'apple-touch-icon-precomposed', 'rel', ['sizes' => "128x128"]);
$doc->addHeadLink($baseUrl . 'images/logos/favicon/favicon-32.png', 'icon', 'rel', ['sizes' => "32x32"]);

Das offensichtliche Problem ist, dass du dich daran erinnern musst, all diese Änderungen vorzunehmen, was unpraktisch sein kann. Du kannst dies etwas automatisieren, indem du nur zwei Dateien in Ihren Ordner images/logos/favicon hochlädst:

favicon.ico, die Sie immer noch selbst erstellen müssen, aber Sie können sich damit begnügen, nur das alte 16x16px grosse Symbol einzubinden
favicon.png ein 512x512 Pixel grosses transparentes PNG mit der hochwertigen Version Ihres Logos

$doc = \Joomla\CMS\Factory::getApplication()->getDocument();

/**
* Generate favicons.
*
* You need to upload two files to the $basePath folder, by default images/logos/favicon :
* - favicon.ico which includes 16x16, 24x24, 32x32, 48x48 and 64x64 pixel images.
* - favicon.png a 512x512 pixel transparent PNG
*
* @param string $basePath Path with your favicons relative to your site's root
* @param int[] $favIconSizes List of sizes to generate e.g. [32, 57, 152], see https://github.com/audreyr/favicon-cheat-sheet
* @param string|null $tileColor HTML hex color for the IE Modern UI tile icon, null to skip generating it
* @param int $defaultSize Fallback favicon size when the browser doesn't request a specific dimension
*/
$faviconGenerator = function (string $basePath, array $favIconSizes, ?string $tileColor, int $defaultSize = 152) use ($doc) {
$ensureSize = function (int $size) use ($basePath) {
$filePath = JPATH_SITE . '/' . $basePath . '/favicon-' . $size . '.png';

if (!file_exists($filePath))
{
try
   {
    (new \Joomla\CMS\Image\Image(dirname($filePath) . '/favicon.jpg'))
    ->resize($size, $size)
    ->toFile($filePath, IMAGETYPE_PNG, ['quality' => 9]);
    }
catch (\Exception $e)
{
}
}

return basename($filePath);
};

$baseUrl = \Joomla\CMS\Uri\Uri::base(false) . $basePath . '/';

// Fallback .ICO file
$doc->addFavicon($baseUrl . 'favicon.ico?' . $doc->getMediaVersion());
// Default favicon
$doc->addHeadLink($baseUrl . $ensureSize($defaultSize) . '?' . $doc->getMediaVersion(), 'apple-touch-icon-precomposed', 'rel');
// Internet Explorer Modern UI (formerly Metro) tile icon, classic Edge
if (!is_null($tileColor))
{
$doc->setMetaData('msapplication-TileColor', $tileColor);
$doc->setMetaData('msapplication-TileImage', $baseUrl . $ensureSize(144) . '?' . $doc->getMediaVersion());
}
// All other favicons
foreach ($favIconSizes as $size)
{
$doc->addHeadLink($baseUrl . $ensureSize($size) . '?' . $doc->getMediaVersion(), 'apple-touch-icon-precomposed', 'rel', ['sizes' => "{$size}x{$size}"]);
}
};
$faviconGenerator('images/logos/favicon', [
// Favicons size reference: https://github.com/audreyr/favicon-cheat-sheet
32, // Default fallback for most desktop browsers.
// 57, // Deprecated: Standard iOS home screen (iPod Touch, iPhone first generation to 3G), old Android
// 72, // Deprecated: First- and second-generation iPad
// 76, // Deprecated: iPad home screen icon
// 96, // Deprecated: GoogleTV icon
// 114, // Deprecated: iPhone retina touch icon with iOS <= 6
// 120, // Deprecated: iPhone retina touch icon with iOS >= 7
128, // Chrome Web Store icon & Small Windows 8 Star Screen Icon
// 144, // Deprecated: IE10 Metro tile for pinned site, iPad Retina with iOS <=> 6
152, // iPad Retina with iOS >= 7
167, // iPad Retina with iOS >= 10 (in practice iOS will still use 152×152)
180, // iPhone Retina
192, // Google Developer Web App Manifest Recommendation
// 195, // Deprecated: Opera Speed Dial icon (Not working in Opera 15 and later)
196, // Chrome for Android home screen icon
// 228, // Deprecated: Opera Coast icon
], '#d43431');

Analytics und Cookie-Hinweise

Da du, wie wir alle im Internet surfst, bist du sicher schon lange von den Cookie-Bannern genervt, die an jeder Ecke des Internets auftauchen. In den meisten Fällen sind die einzigen Cookies, die nicht zwingend erforderlich sind, diejenigen, die von Analysediensten wie Google Analytics verwendet werden. Wenn auf deiner Seite ein Cookie-Banner angezeigt werden muss, nur weil du Analysedienste verwendest, solltest du einmal darüber nachdenken, ob du die von Google Analytics oder ähnlichen Diensten bereitgestellten Funktionen wirklich benötigst.

In den meisten Fällen brauchst du diese erweiterten Funktionen nicht. Wenn du nur grundlegende Analysen darüber benötigst, wie viele Personen deine Seiten besucht haben, ob sie über eine organische Suche oder einen Link gekommen sind, und aus welchem Land sie stammen, musst du nicht weiter suchen als in deinem Hosting-Panel, wo du höchstwahrscheinlich bereits AWstats oder eine ähnliche Lösung findest. Diese funktionieren über die Analyse der Zugriffsprotokolle des Webservers und benötigen keine Cookies, und ergo auch keine Cookie-Banner auf deiner Webseite.

Eine andere Lösung ist die Verwendung eines selbst gehosteten Analysedienstes wie Matomo (früher Piwik). Er bietet die meisten Funktionen von Google Analytics, aber da es sich um eine First-Party-Lösung handelt, die DSVGO- und CCPA-konform ist, brauchst du nicht einmal ein Cookie-Banner anzuzeigen. Es können sogar Daten aus Google Analytics importiert werden, so dass du die Kontinuität deiner Daten gewährleisten kannst, wenn dies für deinen Geschäftszweck wichtig ist.

Indem du die Notwendigkeit eines Cookie-Banners beseitigst, erleichterst du die Navigation auf deiner Webseite und sorgst für weniger Frustration bei deinen Nutzern. Das Wissen, dass du dies tun kannst, ohne die Daten zu opfern, die du für Geschäftsentscheidungen benötigst, und ohne deine Besucher zu zwingen, ihre Daten an Dritte weiterzugeben, die mit dem Verkauf personalisierter Werbung Geld verdienen (Google ist in erster Linie ein Werbenetzwerk, falls du es noch nicht bemerkt hast), ist doch einigermassen erfrischend.

Ach ja, und dann noch dies: keine Cookie-Banner verwenden zu müssen macht die Rendering-Leistung deiner Seite erst noch viel besser!

Dark Mode

Höchstwahrscheinlich gibt es das Design deiner Webseite nur in einem Farbschema, und wahrscheinlich ist es ein "helles" Thema, d. h. ein heller Hintergrund mit dunklem Text. Dies war in den letzten zwei Jahrzehnten bei den meisten Webseiten der Fall und entspricht dem, was die meisten Betriebssysteme früher nur als Option anboten.

Für manche Benutzer ist dieses Farbschema unzugänglich, und die Verwendung invertierter Bildschirmfarben ist schlicht und ergreifend keine gute Lösung; alle Farben werden invertiert, einschliesslich der Illustrationen und Bilder, was zu einem unangenehmen Erlebnis führt. Auch macht ein Dark Mode Farbschema deine Webseite zugänglicher. Ausserdem wird deine Webseite dadurch für Menschen attraktiver, die dunkle Farbschemata gegenüber hellen bevorzugen - ein guter Punkt, den du berücksichtigen solltest, wenn die Zielgruppe deiner Webseite Geeks und Gamer sind.

Wenn dein Template Bootstrap 5 verwendet, kannst du mit meinem DarkMagic-Plugin eine automatische Unterstützung für den Dark Mode hinzufügen.

In meinem eigenen Blog habe ich mehr darüber geschrieben, was der Dark Mode ist, warum und wie man ihn verwendet, und ich habe eine Präsentation zum Thema Dark Mode gehalten. Ich werde einfach auf diese Ressourcen verlinken, anstatt mich in diesem bereits sehr langen Artikel zu wiederholen.

AMP

Als ich mit der Arbeit an dieser Artikelserie begann, wollte ich AMP (Accelerated Mobile Pages) für Webseiten empfehlen. Jetzt bin ich mir da nicht mehr so sicher.

Falls du es noch nicht wusstest: AMP ist eine Untermenge von HTML mit einigen Eigenheiten, die das Laden auf mobilen Geräten beschleunigen - oder zumindest den Anschein erwecken, dass dies der Fall ist. Es ist viel restriktiver als eine normale responsive Webseite. Der Reiz des AMP-Standards besteht darin, dass Google AMP-Inhalte in den Suchresultaten bevorzugt, wenn ein Nutzer eine Suche über die Google-Anwendung auf einem Smartphone durchführt.

Der Nachteil ist, dass AMP sehr stark Google-spezifisch ist und ausserhalb des Google-Ökosystems nicht unterstützt wird. Ausserdem sehen Nutzer, die auf Suchergebnisse klicken, die auf die AMP-Seiten Ihrer Webseite verweisen, in der Adressleiste ihres Browsers google.com und nicht Ihre Webseite. Meiner Meinung nach sind dies grosse Nachteile, die dich von deinem Publikum isolieren.

Die Tatsache, dass ein Mitglied des AMP-Beratungskomitees vor kurzem gekündigt hat, weil es der Meinung war, dass Google das gesamte AMP-Projekt zu seinem eigenen Vorteil gekapert hat, und dass der Generalstaatsanwalt von Texas eine Kartellklage gegen Google eingereicht hat, die die Vorzugsbehandlung von AMP in den Suchergebnissen beenden würde, lässt mich daran zweifeln, ob es überhaupt Sinn macht, AMP auf einer Webseite einzuführen. Meiner Erfahrung nach ist die Integration alles andere als einfach, wenn du ein eigenes Template für deine AMP-Seiten erstellen möchtest.

Und schliesslich, basierend auf den Analysen, die ich auf meiner eigenen Webseite gesammelt habe, bringt AMP nicht wirklich so viel Traffic, wie es eigentlich sein sollte. Der grösste Teil meines Traffics kommt von direkten Links von anderen Seiten, von der organischen Suche, die zu meiner regulären responsiven Vorlage führt, und von sozialen Medien. AMP war kaum ein Fleck auf dem Radar der Traffic-Quellen.

Anstatt dir also zu sagen, wie du AMP auf deinen Seiten integrieren kannst, werde ich lieber sagen, dass du es wahrscheinlich nicht tun solltest. Wenn du es jedoch unbedingt implementieren möchtest, gibt es Lösungen für Joomla. Ich habe wbAMP verwendet, aber ich muss warnen, dass die Erstellung einer benutzerdefinierten Vorlage ziemlich kompliziert ist. Zwischen dem Schreiben des ersten Entwurfs dieser Serie und heute habe ich AMP von meiner Webseite entfernt.

Immer, wenn hier von «ich» die Rede ist, ist selbstverständlich der Autor des Originals des Artikels gemeint.

Fortsetzung folgt

Es gibt noch einen letzten Teil dieser Serie. Darin geht es um einige allgemeinere, nicht-Joomla-spezifische Dinge, die du tun kannst, um deine Seiten attraktiver für Menschen und nicht nur für Suchmaschinen zu machen und sie schnell zu halten. Bis dahin, viel Spass beim Aufbau einer Webseite!

Über den Autor dieses Artikels

brendan hedges Dieser Beitag wurde im Original von Nicholas Dionysopoulos verfasst. Nicholas ist der Entwickler von Akeeba Backup. Ursprünglich war er Maschinenbauingenieur, wurde aber, als er Mambo - den Vorläufer von Joomla - im Jahr 2004 entdeckte, zum Webentwickler.

Er ist der Autor von mehreren beliebten Erweiterungen für Joomla und ein häufiger Mitwirkender am Joomla-Kern. Er lebt derzeit an der Küste von Athen, Griechenland mit seiner Frau, seiner Tochter und zwei Katzen. Er dankt der Joomla-Gemeinschaft dafür, dass sie ihm ein Geschäft und eine Familie gegeben hat - er hat seine Frau Crystal (sie schreibt auch für das Joomla Magazin) auf einer Joomla-Konferenz kennengelernt, immerhin!

Wenn er nicht gerade Code, Dokumentation oder Artikel für Joomla und seine Erweiterungen schreibt, bastelt er gerne an mechanischen Tastaturen, spielt D&D und schaut Sci-Fi-Serien.