27. Dezember 2023

So kannst du das Laden von gecachtem JavaScript und CSS verhindern

Dass JavaScript und CSS-Dateien nach einer Änderung im Browser nicht neu geladen, sondern aus dem Cache geladen werden, kann eine nervige Angelegenheit sein. Insbesondere auch auf dem iPhone, auf dem kein „Hard Refresh“ möglich ist.

Um den Browser anzuweisen, immer die aktuelle JS uns CSS vom Server zu laden, reicht es einen sich ändernden Parameter an die Quelle anzuhängen. Also z.B. „style.css?123„. Das lässt sich natürlich auch automatisiert erledigen.

Mit folgendem Code kannst du ermitteln, wann die Datei zuletzt geändert worden ist und diesen Zeitpunkt als Timestamp anhängen. Das hat den Vorteil, dass die geänderte Datei tatsächlich auch nur dann neu geladen wird, wenn sie auch geändert worden ist.

<?php
$file = '/var/www/vhosts/web123/httpdocs/fbnfrtg/tools/custom.js';
$timestamp = filemtime($file);
?>

<script type="text/javascript" src="js/custom.js?<?php echo $timestamp; ?>"></script>

Wichtig: Beim Ermitteln der Timestamp muss der Serverpfad angegeben werden und nicht die URL. Den Serverpfad deines PHP-Skripts kannst ganz einfach wie folgt ermitteln:

<?php echo __DIR__; ?>

Im WordPress-Header kann für das Stylesheet folgender Code genutzt werden:

<?php
    $file = __DIR__.'/assets/css/styles.css';
    $csstimestamp = filemtime($file);
?>

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css?<?php echo $csstimestamp; ?>">

---

Keywords:

• JavaScript nicht cachen
• CSS nicht cachen