Ein Beispiel: Das LG München entschied im Februar 2022, dass diese Praxis einen DSGVO-Verstoß darstellen kann, wodurch Webseitenbetreiber Schadensersatzansprüchen ausgesetzt sein könnten.

Warum Google Fonts lokal einbinden?

Die Lösung ist, die Google Fonts lokal auf dem eigenen Server zu speichern. Dadurch:

• wird keine Verbindung zu Google aufgebaut,
• sind die Fonts DSGVO-konform,
• werden die Ladezeiten deiner Webseite verbessert,
• behältst du die volle Kontrolle über Font-Varianten und Gewichte.

DSGVO-konforme Google Fonts mit WordPress-Plugins

Für WordPress gibt es Plugins, die die lokale Einbindung automatisch übernehmen. Mein Favorit: OMGF – Optimize My Google Fonts.

Funktionen von OMGF:

• Scannt dein WordPress-Theme und Plugins nach genutzten Google Fonts
• Lädt die Fonts automatisch herunter
• Bindet die Fonts lokal ein
• Spart Ladezeit und Bandbreite

Schritt-für-Schritt-Anleitung: Google Fonts lokal einbinden

1. OMGF installieren: Im WordPress-Plugin-Verzeichnis nach „OMGF“ suchen und aktivieren.
2. Fonts scannen: Das Plugin erkennt alle verwendeten Google Fonts.
3. Fonts herunterladen: OMGF lädt die Fonts automatisch auf deinen Server.
4. Lokale Einbindung aktivieren: Fonts werden direkt vom Server ausgeliefert – DSGVO-konform.

Manuelle Einbindung von Google Fonts

Wenn du kein Plugin nutzen möchtest, kannst du die Fonts auch manuell herunterladen und über CSS einbinden. Das erfordert allerdings:

• Regelmäßige Updates der Fonts
• Kenntnisse in CSS und WordPress-Theme-Struktur

Fazit

Die lokale Einbindung von Google Fonts ist heutzutage Pflicht, um DSGVO-Verstöße zu vermeiden, und steigert gleichzeitig die Performance deiner WordPress-Webseite. Mit Plugins wie OMGF geht die Umsetzung einfach und schnell.

Tipp: Kombiniere die lokale Font-Einbindung mit Caching-Plugins wie WP Rocket oder LiteSpeed Cache, um die Ladezeiten zusätzlich zu verbessern.

Melde dich bei mir für weitere Unterstützung!

Benötigst du Hilfe bei der lokalen Einbindung von Google Fonts, helfe ich dir gerne weiter. Stell eine Anfrage, damit ich dich bei deinem Projekt unterstützen kann!

Eine einfache Möglichkeit, die Einwilligung der Nutzer einzuholen, besteht darin, eine Checkbox in das Kommentarformular einzufügen. Dies kann ohne zusätzliche Plugins direkt über die functions.php-Datei des WordPress-Themes erfolgen.

Schritt-für-Schritt: DSGVO-Checkbox für Kommentare ohne Plugin

1. Backup erstellen: Bevor Änderungen an der functions.php vorgenommen werden, sollte ein vollständiges Backup der Website erstellt werden.

2. Code in functions.php einfügen: Öffne die functions.php-Datei des aktiven Themes oder besser noch des Child-Themes und füge folgenden Code hinzu:

// Funktion dem Standard WP Kommentar Formular hinzufügen

add_filter( ‚comment_form_default_fields‘, ‚webshaped_comment_form_privacy_input‘ );

// Checkbox für das Standard WP Kommentar Formular setzen

function webshaped_comment_form_privacy_input( $fields ) { $req = get_option( ‚require_name_email‘ ); $aria_req = ( $req ? “ aria-required=’true'“ : “ );

// Elemente dem Kommentar Formular hinzufügen

$fields[‚datenschutz‘] = ‚<div class=“comment-form-datenschutz“><input id=“datenschutz“ class=“my-class“ name=“datenschutz“ type=“checkbox“‚ . $aria_req . ‚ />‘ . ‚<label class=“my-class“ for=“datenschutz“>‘ . __( ‚DIESEN TEXT KANNST DU INDIVIDUELL BESTIMMEN > Mit der Nutzung dieses Formulars erkläre ich mich mit der Speicherung und Verarbeitung meiner Daten durch diese Webseite einverstanden. Weitere Informationen habe ich in der <a href=“/datenschutz/“>Datenschutzerklärung</a> gelesen und akzeptiere sie.‘ ) . ( $req ? ‚ <span class=“required“>*</span>‘ : “ ) . ‚</label></div>‘; return $fields; }

add_filter( ‚preprocess_comment‘, ‚webshaped_verify_comment_meta_data‘ ); function webshaped_verify_comment_meta_data( $commentdata ) {

// Für den Fall, dass die Checkbox leer ist und ein Gast einen Kommentar veröffentlichen möchte: Fehlernachricht anzeigen

if ( empty( $_POST[‚datenschutz‘] ) and ! current_user_can( ‚read‘ ) ) {

wp_die( __( ‚<strong>FEHLER</strong>: Die Datenschutzbox wurde nicht akzeptiert.<br><br><a href=“javascript:history.back()“>« Zurück</a>‘ ) ); } return $commentdata; }

Dieser Code fügt eine Checkbox mit einem Link zur Datenschutzerklärung hinzu und macht das Setzen der Checkbox erforderlich.

3. Überprüfung der Datenschutzerklärung: Stelle sicher, dass die Datenschutzerklärung auf der Website vorhanden und aktuell ist. Der Link zur Datenschutzerklärung wird automatisch durch get_privacy_policy_url() eingefügt.

4. Testen: Überprüfe das Kommentarformular auf der Website, um sicherzustellen, dass die Checkbox korrekt angezeigt wird und das Kommentieren ohne Zustimmung nicht möglich ist.

⚠️ Wichtige Hinweise

• Theme-Updates: Änderungen an der functions.php können bei einem Update des Themes überschrieben werden. Es wird empfohlen, ein Child-Theme zu verwenden, um diese Änderungen beizubehalten.
• Rechtliche Beratung: Die bereitgestellte Checkbox dient lediglich als Beispiel. Es wird empfohlen, rechtlichen Rat einzuholen, um sicherzustellen, dass die Implementierung den spezifischen Anforderungen der DSGVO entspricht.

🔄 Alternative: Verwendung eines Plugins

Für Nutzer, die keine Änderungen am Code vornehmen möchten, gibt es Plugins, die die DSGVO-Checkbox für Kommentare hinzufügen können. Ein Beispiel ist das Plugin WP Comment Policy Checkbox, das unter Einstellungen > Diskussion konfiguriert werden kann.

🧠 Fazit

Die manuelle Integration einer DSGVO-Checkbox in das Kommentarformular von WordPress ist eine effektive Möglichkeit, die Zustimmung der Nutzer zur Speicherung ihrer Daten einzuholen. Durch die Verwendung eines Child-Themes und die regelmäßige Überprüfung der Datenschutzerklärung kann die DSGVO-Konformität der Website gewährleistet werden.

Melde dich bei mir für weitere Unterstützung!

Benötigst du Hilfe bei DSGVO-Thematiken rund um WordPress (oder andere CMS), helfe ich dir gerne weiter. Stell eine Anfrage, damit ich dich bei deinem Projekt unterstützen kann!

Viel Zeit bleibt nicht: Verzögert sich der Seitenaufbau, wenn User deine WordPress Webseite ansteuern, ist der Absprung nur einen Klick entfernt. Rückkehr ungewiss. Auf die Zufriedenheit deiner User wirkt sich Pagespeed unmittelbar aus. Studien zeigen, dass 47% der Befragten erwarten, dass eine Webseite in maximal zwei Sekunden oder weniger geladen wird.

Die Optimierung des Pagespeed ist also ein Muss. Doch was genau wird unter „Pagespeed“ überhaupt verstanden? Hier lohnt es sich genauer hinzusehen:

• Einerseits wird mit Pagespeed die gesamte Dauer des vollständigen Aufbaus einer Internetseite bezeichnet.
• Gemeint ist aber auch die „time to first byte“, also die Dauer zum Laden des ersten Bytes. Diese oft unterschätzte Komponente, die in erster Linie von deiner Serverpower abhängt, wird z.B. von Google als Rankingfaktor gemessen und bewertet. Verbessern kannst du diesen Faktor z.B. mit einem optimierten WordPress Hosting.

Mit der Auswahl eines optimierten Hostingtarifs ist es aber nicht getan. Onpage helfen einige Tricks und Tools, um den Seitenaufbau deiner Webseite nachhaltig zu verbessern. Hier stelle ich drei Tipps aus meiner eigenen WordPress Praxis vor.

1. WordPress Cache Plugin: WP Fastest Cache

Warum kompliziert, wenn es auch einfach geht. Mit einem simpel zu installierenden WordPress Plugin kannst du den Seitenaufbau durch Caching effektiv beschleunigen. Beim Caching werden Webseiten nicht bei jedem Aufruf neu generiert. Stattdessen wird eine zuvor auf dem Server zwischengespeicherte Version der Webseite abgerufen.

Ein Plugin, das dieses Caching vollautomatisch übernimmt, ist WP Fastest Cache. In der Grundversion ist das Plugin kostenlos. Auch hier gibt es schon einige Einstellungsmöglichkeiten und Erweiterungen. So kannst du z.B. wählen, dass Seiten aus dem Cache nur abgerufen werden, wenn man nicht als Admin im WordPress Backend eingeloggt ist.

Selbst habe ich WP Fastest Cache aus der Vielzahl an verfügbaren WordPress Cache Plugins für eigene Projekte und Kunden ausgewählt. Das Plugin leistet mir bei der Pagespeed Optimierung seit mehreren Jahren gute Dienste und wird ständig vom Autor aktualisiert.

In der erweiterten Premium Version sind zusätzliche Funktionen wie Lazy Load oder Bilder-Optimierung mit an Bord. Ob sich die Investition in die kostenpflichtige Version lohnt, muss im Einzelfall entschieden werden. Selbst setze ich auf die Premium-Version und unterstütze so auch den Autor bei der Weiterentwicklung dieses praktischen Tools.

2. Bilder optimieren mit WordPress Plugin: Smush

Bilder und sonstige mediale Inhalte können den Seitenaufbau stark verlangsamen. Auch hier ist Optimierung stark anzuraten. Plugins helfen dabei, Bilder direkt auf dem Server nach dem Upload zu komprimieren. Mit Lazy Load werden Bilder und weiterer Content erst während des Scroll-Vorgangs geladen. Auch das hilft, mehr Speed auf deine WordPress Webseite zu bekommen.

Mein favorisierter Tool für die Bilderoptimierung ist Smush von WPMU DEV. Das Plugin ist in einer kostenlosen und einer kostenpflichtigen Premium-Version verfügbar. Wirklich einsatzbereit ist das WordPress Plugin meiner Erfahrung nach nur in der Premium-Version. In der kostenlosen Standard-Version sind die Funktionen stark eingeschränkt. Außerdem können hier nicht unbegrenzt Bilder komprimiert werden.

Die Investition in die Pro-Version kann sich aber lohnen. Mit Smush Pro gelingt es, den Seitenaufbau durch das Komprimieren von Bildern deutlich zu beschleunigen. Auch Lazy Load kann einfach aktiviert werden. Die Bedienung des Plugins ist einfach und intuitiv. Außerdem unterstützt Smush auch die Konvertierung deiner Bilder ist das weboptimierte WebP-Format.

3. Seitenaufbau beschleunigen über HTACCESS

Über die automatisch von WordPress genierte .htaccess-Datei im Stammordner deiner WordPress Installation kannst du deinen Webserver auch anweisen, Dateien serverseitig zu komprimieren. Aber Vorsicht: Nicht alle Hoster erlauben es, hier Einstellungen individuell vorzunehmen! Deshalb ist dieser Tipp eher an Profis gerichtet. In jedem Fall sollte nach der Änderung der .htaccess-Datei geprüft werden, ob die Webseite noch fehlerfrei läuft.

Auf den Projekten meiner Digitalmanufactur setze ich grundsätzlich auch auf Komprimierung über die .htaccess-Datei. Der zusätzliche Code sieht dann beispielsweise wie folgt aus. Er wird einfach in der .htaccess-Datei ergänzt.

# Serve resources with far-future expires headers.
#
# (!) If you don't control versioning with filename-based
# cache busting, you should consider lowering the cache times
# to something like one week.
#
# https://httpd.apache.org/docs/current/mod/mod_expires.html

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"

  # CSS
    ExpiresByType text/css                              "access plus 1 year"

  # Data interchange
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rdf+xml                   "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"

    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/ld+json                   "access plus 0 seconds"
    ExpiresByType application/schema+json               "access plus 0 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/vnd.microsoft.icon              "access plus 1 week"
    ExpiresByType image/x-icon                          "access plus 1 week"

  # HTML - Behält die Website eine Stunde im Cache, neues wird erst nach Ablauf einer Stunde
  # angezeigt. Wenn nicht gewuenscht, bei 3600 eine Null eintragen
    ExpiresByType text/html                             "access plus 0 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-javascript              "access plus 1 year"
    ExpiresByType text/javascript                       "access plus 1 year"

  # Manifest files
    ExpiresByType application/manifest+json             "access plus 1 week"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"

  # Media files
    ExpiresByType audio/ogg                             "access plus 1 year"
    ExpiresByType image/bmp                             "access plus 1 year"
    ExpiresByType image/gif                             "access plus 1 year"
    ExpiresByType image/jpeg                            "access plus 1 year"
    ExpiresByType image/png                             "access plus 1 year"
    ExpiresByType image/svg+xml                         "access plus 1 year"
    ExpiresByType image/webp                            "access plus 1 year"
    ExpiresByType video/mp4                             "access plus 1 year"
    ExpiresByType video/ogg                             "access plus 1 year"
    ExpiresByType video/webm                            "access plus 1 year"

  # Web fonts

    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 year"
    ExpiresByType font/eot                              "access plus 1 year"

    # OpenType
    ExpiresByType font/opentype                         "access plus 1 year"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 1 year"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 1 year"
    ExpiresByType application/x-font-woff               "access plus 1 year"
    ExpiresByType font/woff                             "access plus 1 year"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 1 year"

  # Other
    ExpiresByType text/x-cross-domain-policy            "access plus 1 week"
</IfModule>

<IfModule mod_deflate.c>
# Insert filters / compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/vtt 
AddOutputFilterByType DEFLATE text/x-component
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE application/atom+xml 
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE application/ld+json 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/font-woff2
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-web-app-manifest+json font/woff
AddOutputFilterByType DEFLATE font/woff 
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon 

# Exception: Images
SetEnvIfNoCase REQUEST_URI \.(?:gif|jpg|jpeg|png|svg)$ no-gzip dont-vary

# Drop problematic browsers
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>

#Alternative caching using Apache's "mod_headers", if it's installed.
#Caching of common files - ENABLED
<IfModule mod_headers.c>
<FilesMatch "\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|txt|woff2|woff)$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

# Set Keep Alive Header
<IfModule mod_headers.c>
    Header set Connection keep-alive
</IfModule>

# If your server don't support ETags deactivate with "None" (and remove header)
<IfModule mod_expires.c> 
  <IfModule mod_headers.c> 
    Header unset ETag 
  </IfModule> 
  FileETag None 
</IfModule>

<IfModule mod_headers.c>
<FilesMatch ".(js|css|xml|gz|html|woff|woff2|ttf)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

Fazit: Pagespeed Optimierung trägt zum Erfolg deiner WordPress Seite bei

Schon diese drei Tipps unterstützen bei der Aufgabe, den Seitenaufbau von WordPress Webseiten effektiv zu beschleunigen. Am Anfang der Optimierung steht aber die Auswahl eines schnellen Servers oder Hosters, am besten mit speziellen WordPress Tarifen. Als zweiten Schritt sollte man sich mit der onpage Optimierung befassen. Die oben beispielhaft genannten Plugins und Tipps helfen dir dabei, die WordPress Pagespeed Optimierung konzentriert anzugehen.

Melde dich bei mir für weitere Unterstützung!

Benötigst du Hilfe bei der Pagespeed Optimierung deiner WordPress Webseite, helfe ich dir gerne weiter. Neben den oben genannten Tools und Tipps setze ich auch weitere Tools zur Optimierung ein. Am Anfang der Zusammenarbeit steht eine Analyse deines Vorhabens. Dann stimme ich die weiteren Maßnahmen auf die individuellen Anforderungen ab. Stell eine Anfrage, damit ich dich bei deiner Projektidee unterstützen kann!