Website-Änderungen werden nicht angezeigt wegen Browser-Cache?

Hallo zusammen,

ich habe folgendes Problem:

Ich hoste meine Website bei Ionos. Dort habe ich meine Codes (HTML, CSS, JavaScript und PHP) im Webspace abgelegt, der mit der Domain verbunden ist.

Nun habe ich an der Website Änderungen vorgenommen und z.B. eine mobile Ansicht implementiert. Ich habe die alten Code-Dateien überschrieben.

Auf der Website werden diese Änderungen aber nicht angezeigt, wenn man die Website vor kurzem bereits besucht hatte, da der Browser-Cache die alten Daten noch gespeichert hat.

Gibt es hier eine Möglichkeit, das zu verhindern und für die Nutzer direkt die neue Version anzeigen zu lassen?

Ich danke für eure Rückmeldungen :)

4 Antworten

Vom Beitragsersteller als hilfreich ausgezeichnet

VeryBestAnswers

Nutzer, der sehr aktiv auf gutefrage ist

im Thema HTML

25.08.2023, 15:01

Das Browser Cache wird über den Cache-Control header gesteuert (den du mit einer .htaccess-Datei konfigurieren kannst). Bei HTML-Dateien sollte dies ein niedriger Max-Age sein (wenige Minuten/Stunden), damit Änderungen schnell sichtbar werden. Bei JavaScript und CSS Dateien ist hingegen die Empfehlung, eine lange Dauer zu setzen (z.B. ein Monat), und einen Hash-Wert an den Dateinamen anzuhängen. Aus "styles.css" wird dann z.B. "styles-174a53fc.css". Wenn die Datei geändert wird, ändert sich auch der Dateiname, sodass der Browser die Datei neu abrufen muss. Bundler wie z.B. Vite tun das automatisch.

Da du aber keinen Bundler nutzt, wäre das für dich sehr umständlich. Du kannst stattdessen eine Zahl an die Dateinamen anhängen (styles-4.css), die du jedes Mal erhöhst, wenn du eine Änderung vornimmst. Oder du verwendest für alle Dateien eine kurze Cache-Dauer.

Zum Testen kannst du auch manuell das Cache in deinem Browser invalidieren, indem du die Seite mit Strg+F5 oder Strg+Umschalt+R (browserabhängig) neu lädst. Oder du öffnest den Netzwerk-Tab in den Entwicklerwerkzeugen und wählst "Disable cache".

Wenn du jetzt die Cache-Dauer anpasst, wirkt sich das nicht auf Nutzer aus, die die Seite schonmal geöffnet haben und die Dateien noch im Cache haben. Damit bei allen das Cache invalidiert wird, musst du die Dateinamen ändern.

Woher ich das weiß:Berufserfahrung – Software-Entwickler

protel

Beitragsersteller

14.09.2023, 22:10

Vielen Dank für deine ausführliche Antwort! Das hat mir sehr geholfen :)

Babelfish

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

HTML, JavaScript, PHP

25.08.2023, 14:53

Die Cache-Zeit von Webseiten, Skripten, Stylesheets, Bilder, etc. kannst du je nach Webserver zum Beispiel über Einträge in der .htaccess ändern. Wie das bei IONOS funktioniert, kannst du aus deren Hilfe erfahren.

Nachträglich kannst du das aber beim Nutzer nicht mehr ändern. Ist dort im Browser-Cache ein Dokument mit einem bestimmten Cache-Zeitraum, dann „schaut“ der Browser auch erst nach Ablauf der Zeit wieder auf deiner Seite nach.

Um das zu umgehen, kannst du nur die URL ändern. Bei Skripten und Stylesheets kann man das noch relativ leicht machen, bei der Webseite selbst eher nicht. Da musst du einfach warten.

Woher ich das weiß:Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

protel

Beitragsersteller

14.09.2023, 22:10

Dankeschön!

Dorian855

24.08.2024, 16:37

Hallo,

das Problem mit dem Browser-Cache ist bei Website-Updates ziemlich häufig. Wenn Nutzer die Seite bereits zuvor besucht haben, kann es sein, dass sie die alte Version sehen, da der Browser die zwischengespeicherten Daten verwendet, um die Ladezeiten zu verkürzen.

Eine Möglichkeit, dieses Problem zu umgehen, besteht darin, den Cache zu umgehen, indem du sogenannte Cache-Busting-Techniken anwendest. Das bedeutet, dass du z.B. eine Versionsnummer an deine CSS- und JavaScript-Dateien anhängst:

html
Code kopieren
<link rel="stylesheet" href="style.css?v=1.1">
<script src="script.js?v=1.1"></script>

Indem du die Versionsnummer bei jeder Änderung erhöhst, zwingst du den Browser, die neueste Version der Datei zu laden, anstatt die zwischengespeicherte zu verwenden.

Für Nutzer, die die Website schon einmal besucht haben, kannst du empfehlen, den Cache gezielt zu löschen. Hierfür gibt es ein praktisches Chrome-Addon namens "Cache und Cookies Löscher" von Mediahain, mit dem man den Cache und Cookies gezielt löschen kann, ohne den gesamten Browser-Cache leeren zu müssen. Das Addon findest du hier: Cache und Cookies Löscher.

Damit sollten die Nutzer direkt die neuesten Änderungen deiner Website sehen können.

Mirko Marek

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Mediengestalter Digital und Print

01.09.2023, 18:36

Hi protel,

wie unten von Babelfish unten beschrieben, kann man serverseitig mithilfe der .htaccess und auch durch Meta-Angaben in HTML das Cache-Vehalten anpassen.

Leider spielt da auch der Browser dort auch mit. Browser wie Mozilla Firefox und Google Chrome cachen auch den Inhalt. Dieser lässt sich durch diverse Möglichkeiten löschen.

Woher ich das weiß:Berufserfahrung – Ich bin gelernter Mediengestalter Digital und Print(IHK)

Ähnliche Beiträge

Besucherzähler in Website einbauen?

Wie macht man das am besten über HTML, da ich nur HTML Codes in IONOS einfügen kann? Und funktioniert dies überhaupt?

Grüße

...zum Beitrag

WordPress Website nur beim ersten Aufruf des Tages sehr langsam?

Guten Tag zusammen,

es geht um folgendes Problem:

Ich habe schon etliche WordPress-Seiten erstellt. Auch schon sehr viele beim Hoster IONOS. Die Ausgangslage ist identisch und alle anderen Websites haben dieses Problem nicht. Die aktuellste lädt beim ersten Aufruf des Tages min. 30 Sekunden. Danach ist Sie den ganzen Tag über, auch ohne Browsercache, sofort erreichbar.

Habt Ihr eine Idee woran das liegen könnte? Was mir komisch vorkommt ist, dass bei PHP-Memory-Limit der Wert "-1" angezeigt wird. Könnte es damit etwas zu tun haben?

...zum Beitrag

Legal HTML Code von einer Website kopieren?

Hallo,

ich selbst habe eine Website über Jimdo erstellt, möchte jedoch jetzt eine neue Domain von IONOS kaufen und diese dann nutzen. Kann ich einfach den Seitenquelltext von meiner Jimdoseite kopieren und als Seitenquelltext für meine neue IONOS Domain nutzen?

Zumindest wenn ich alle Verlinkungen zu Jimdo wegmache?

...zum Beitrag

http zu https redirect-Fehler auf Wordpress-Seite?

Ich habe eine Wordpress-Website, nennen wir sie example.com, die von IONOS gehostet wird. Es handelt sich um eine HTTPS-Website mit einem funktionierenden SSL-Zertifikat, sodass alle HTTP-Anfragen auf die angeforderte Seite umgeleitet werden sollten, aber dabei das HTTP durch HTTPS ersetzt wird.

Beispiel: http://example.com sollte auf https://example.com umgeleitet werden (das funktioniert). http://example.com/subpage sollte auf https://example.com/subpage umgeleitet werden (das funktioniert jedoch nicht!). Stattdessen passiert Folgendes: http://example.com/subpage leitet auf https://example.com/ um.

Das Hauptproblem dabei ist, dass die Google Search Console fälschlicherweise einen Umleitungsfehler für jede Unterseite erkennt, die sie zu indexieren versucht, obwohl die Indexanfrage speziell für die HTTPS-Seite (https://example.com/subpage) gesendet wurde.

Ich verwende die neueste Version von Wordpress. Die derzeit installierten Plugins sind:

Advanced Import
Duplicate Page
Elementor Pro
IONOS Assistant (deaktiviert)
IONOS Help (deaktiviert)
IONOS Journey (deaktiviert)
IONOS Login
IONOS Loop (deaktiviert)
IONOS Navigation
IONOS Performance
IONOS Security
Music Player for Elementor
Title Remover
WPvivid Backup Plugin
Yoast SEO Premium

Diese Teile meiner .htaccess-Datei könnten für das Problem verantwortlich sein:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{SERVER_PORT} 80
    RewriteRule ^(/(.*))?$ https://%{HTTP_HOST}/$1 [R=301,L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
    # ENGINE ON
    RewriteEngine on

    # set hostname directory
    RewriteCond %{HTTPS} on
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:https-%{HTTP_HOST}]

    RewriteCond %{HTTPS} off
    RewriteRule .* - [E=IONOS_PERFORMANCE_HOST:%{HTTP_HOST}]

    # set subdirectory
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_METHOD} GET
    RewriteCond %{REQUEST_URI} !(.*)/$
    RewriteCond %{REQUEST_FILENAME} !.(gif|jpg|png|jpeg|css|xml|txt|js|php|scss|webp|mp3|avi|wav|mp4|mov)$ [NC]
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}/]

    RewriteCond %{REQUEST_URI} /$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:%{REQUEST_URI}]

    RewriteCond %{REQUEST_URI} ^$
    RewriteRule .* - [E=IONOS_PERFORMANCE_DIR:/]

    # gzip
    RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:]
    <IfModule mod_mime.c>
        RewriteCond %{HTTP:Accept-Encoding} gzip
        RewriteRule .* - [E=IONOS_PERFORMANCE_SUFFIX:.gz]
        AddType text/html .gz
        AddEncoding gzip .gz
    </IfModule>

    # Main Rules
    RewriteCond %{HTTP_ACCEPT} .*text/html.*
    RewriteCond %{ENV:INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{ENV:REDIRECT_INITIAL_REQUEST_METHOD} ^$
    RewriteCond %{QUERY_STRING} ^$
    RewriteCond %{REQUEST_URI} !^/(wp-admin|wp-content/cache)/.*
    RewriteCond %{HTTP_COOKIE} !(wp-postpass|wordpress_logged_in|comment_author)_
    RewriteCond /homepages/9/d4297862886/htdocs/./wordpress/wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} -f
    RewriteRule ^(.*) /wp-content/cache/ionos-performance/%{ENV:IONOS_PERFORMANCE_HOST}%{ENV:IONOS_PERFORMANCE_DIR}index.html%{ENV:IONOS_PERFORMANCE_SUFFIX} [L]
</IfModule>

und/oder:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

Meine Permalink-Einstellung in Wordpress ist wie folgt:

https://example.com/%category/%postname%/

...zum Beitrag

CSS @media Maximum Width überschreiben?

Guten Morgen,

mein Vater hat eine Website auf MyWebsite von IONOS. Er hat dort einen Buchungskalender, der unter 1025 Pixel Weite nicht angezeigt wird aufgrund folgenden CSS Codes;

@media screen and (min-device-width: 1024px) {
            .mediumScreenDisabled { display:block }
            .smallScreenDisabled { display:block }
        }
        @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } }
        @media screen and (max-device-width: 568px) { .smallScreenDisabled { display:none } }
                @media screen and (min-width: 1024px) {
            .mobilepreview .mediumScreenDisabled { display:block }
            .mobilepreview .smallScreenDisabled { display:block }
        }
        @media screen and (max-width: 1024px) { .mobilepreview .mediumScreenDisabled { display:none } }
        @media screen and (max-width: 568px) { .mobilepreview .smallScreenDisabled { display:none } }

Der @media screen and (max-device-width: 1024px) { .mediumScreenDisabled { display:none } } -Teil verhindert das Anzeigen des Kalenders und möchte deshalb die maximale width ändern.

Allerdings gibt es auf MyWebsite selbst wohl keine Option dazu und der IONOS Support meint, dass sie für Drittanbieter Snippets keinen Support anbieten (dabei bin ich mir ziemlich sicher, dass das von denen kommt, da der Kalender in einem iframe eingebunden ist).

Gibt es eine Möglichkeit über CSS die Eigenschaft separat nochmal zu überschreiben, wenn ich das Snippet von oben nicht manipulieren kann?

Danke und LG

...zum Beitrag

Github repository?

Ich habe nun erfolgreich ein repository erstellt und es erkennt auch wenn ich eine Änderung im visual Studio Code mache. Kann das entsprechend commiten und so.

Aber ich habe auch ein Bild da drin das ich auf meiner Website anzeigen lassen will. Nur wird das aber nicht angezeigt auf meiner Website. Was kann ich da machen?

...zum Beitrag

Bild wird nicht im Browser angezeigt?

Hallo,

ich bin gerade dabei eine Website zu schreiben mit HTML und CSS und gerade scheitere ich daran mein Logo richtig zu verlinken. Ich hab es genauso wie bei meiner anderen Website gemacht wo es funktioniert aber hier nicht. Weiß jemand vllt weiter? Dankeschön schonmal. :)

HTML:

CSS:

ORNDER:

Mein HTML und CSS Code befindet sich im TEST 2 Ordner also so eigentlich:

TEST 2/BILDER/LOGO.eps

So sieht es bis jetzt aus:

...zum Beitrag

Wieso übernimmt CSS die Änderung hier nicht?

Hi ich muss für die Uni eine Website nachbauen. Mein Problem ist, dass ich eine Tabelle mit unterschiedlichen Cellgrößen gestalten muss, CSS aber für alle die gleiche größe nimmt. (HTML-File darf ich nicht verändern)
Hier der Code:

Wie es aussehen soll:

Wie es bei mir aussieht:

Hilfe wäre wirklich super, ich blick da nämlich nicht hinter

...zum Beitrag

Wie versende ich eine selbst programmierte Website per Email?

Ich habe eine Website für ein Thema in der Schule programmiert. Jetzt möchte ich gerne diese Website (eigentlich die Datei) über Email an meinen Lehrer versenden. Leider gibt es jedes mal ein Problem dabei, unzwar wird die geschickte Website nicht so angezeigt, wie sie sollte. Es sieht bisschen so aus, als wäre der ganze CSS Code dadurch gelöscht wurden (man sieht nichts außer normaler Schrift, keine Bilder usw.). Ich habe auch schon probiert sie als Zip-Datei zu schicken, doch auch das hat nichts gebracht. Gibt es dafür eine Lösung? Ich könnte mir auch vorstellen, dass das Versenden über Email der Fehler ist, allerdings weiß ich leider nicht weiter.

Vielen Dank an jeden, der vielleicht eine Lösung hat :)

...zum Beitrag

Zweite Sprache mit Js?

Hallo, ich will meine Website zweisprachig machen und die Texte mit Js ändern angepasst an den Nutzer. Meine Frage wäre ob ich dasselbe auch für den Titel, die Description und den href lang tag machen kann, sodass es auch beim suchen übersetzt angezeigt wird, oder muss der JacaScript-Code zuerst geladen werden?

...zum Beitrag

Website HTML und CSS Fehler?

Hallo,

ich soll als Hausaufgabe eine Website (nur HTML und CSS) programmieren (wir haben bis jetzt nur die Basics gemacht).

Ich habe nun die Grundstruktur in HTML so gemacht, wie ich es brauche und bin nun beim CSS Teil angekommen, welcher mir etwas Kopfschmerzen bereitet.

Ich habe mal Screenshots vom bisherigen Code eingefügt (Die Website soll laut Lehrer ganz einfach sein, das Impressum muss nur einen Beispieltext enthalten und den Code für den footer aus der Landingpage habe ich noch nicht an die anderen Seiten angepasst, da ich noch mit CSS am experimentieren war).

Falls der Code an sich besser weiterhilft, habe ich hier noch den Dropbox Link:
https://www.dropbox.com/scl/fi/fgwyg3w7m4hfqdnbl3f3n/Website.zip?rlkey=1ea3d4quzggbn8xgnk9x9gvk3&dl=0

Nun habe ich folgende Probleme/Dinge, die ich auf der Website haben möchte, aber nicht hinbekomme:

Ich möchte einen festen Header haben (wie der auf gutefrage), bei welchem die anderen Seiten mittig angeordnet sind
Der footer soll wie bei Amazon ganz unten sein und auch in einem farbigen Kasten, welcher sich über den ganzen Bildschirm zieht
Die Texte im Footer sollen einmal links(2023), mittig(impressum) und rechts(Namen) ausgerichtet sein (irgendwie konnte ich den Link zum Impressum nicht verschieben)
Die Seite muss nicht 100% responsible sein, sondern soll sich nur an verschiedene Browser anpassen (Laut Lehrer mit Hilfe von prozentualen Werten anstatt Pixeln)
Auf der Landingpage möchte ich das Hintergrundbild haben und der Text (welchen ich noch hinzufügen muss) soll erst nach dem Bild kommen, wenn man runter scrollt
Auf der Impressum Seite soll der Beispieltext zum Uhrheberrecht nicht von ganz links nach ganz rechts auf dem Bildschirm gehen, sondern nur bis zu etwa der Mitte und dann einen Zeilenumbruch (soll sich nicht verschieben, wenn ich es mit anderem Browser benutze)

Ich habe schon selbst versucht, die oben genannten Dinge irgendwie zu fixen, aber entweder klappt es nicht oder meine Website stellt sich einmal auf den Kopf. Da wir auch erst die Basics in CSS hatten, weiß ich leider nicht mehr, als das, was ich schon gemacht habe.

Es wäre sehr hilfreich, wenn mir einer, der sich damit auskennt, weiterhelfen könnte und mir erklären kann, wie ich die oben genannten Kriterien umsetzen kann.

Ich bedanke mich schonmal sehr bei euch.

Grüße Alex

...zum Beitrag

html Widget programmieren mit Django Datenbank?

Hallo,

ich habe eine Django Datenbank erstellt, und möchte mein html Widget für meine Webseite damit verwalten. Die Datenbank funktioniert soweit, ich kann Datensätze hinzufügen, bearbeiten und entfernen. Wenn ich den Link in den Browser eingebe wird meine Tabelle im Browser auch mit allen Daten angezeigt und aktualisiert wenn ich in der Datenbank etwas ändere. Bette ich den html code nun aber in meine Webseite ein, wird die Tabelle angezeigt, aber ohne den Inhalten aus der Datenbank. Kann mir bei dem Problem vielleicht jemand helfen.

Vielen Dank schonmal im Voraus.

Das ist der html Code:

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Stil für die gesamte Tabelle */
    table {
      border-collapse: collapse;
      width: 65%;
      margin: 20px auto;
      border: 1px solid #ccc;
      position: relative;
    }
    th, td {
      text-align: left;
      padding: 8px;
      border-right: 1px solid #ccc;
    }
    th {
      background-color: #8B0000;
      color: white;
      text-align: left;
    }
    tr:nth-child(even) {
      background-color: #f2f2f2;
    }
    tr:nth-child(odd) {
      background-color: #ffffff;
    }
    td:last-child {
      border-right: none;
    }
    th:nth-child(1), td:nth-child(1),
    th:nth-child(4), td:nth-child(4) {
      width: 100px;
    }
    td:nth-child(2), th:nth-child(2),
    td:nth-child(3), th:nth-child(3) {
      width: 85px;
    }
    h1 {
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Nächste Veranstaltungen</h1>
  <table>
    <tr>
      <th>Titel</th>
      <th>Datum</th>
      <th>Zeitraum</th>
      <th>Örtlichkeit</th>
    </tr>
    <!-- Schleife für die Anzeige der nächsten drei Veranstaltungen -->
    {% for event in upcoming_events %}
    <tr>
      <td>{{ event.Titel }}</td>
      <td>{{ event.Datum|date:"l, j. F Y" }}</td>
      <td>{{ event.Zeitraum }}</td>
      <td>{{ event.Örtlichkeit }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>

...zum Beitrag

Wordpress Stile werden überschrieben bei externem HTML Code - wie behebe ich dad?

Moin moin,

ich habe mal eine Frage. Ich bin nicht wirklich der erfahrene Coder, habe aber folgendes Problem: ich möchte auf meiner WordPress Website in einen Beitrag einen externen HTML Code, genauer einen Rechner mit einbinden. Ganz einfach über die Gutenbergfunktion HTML Code einfügen. Wenn ich das mache, wird der Rechner zwar angezeigt und funktioniert auch, jedoch werden alle globalen Stile, die die sonst auf meinen anderen WordPress Beiträgen vorhanden sind überschrieben. Beispielsweise sind die Schriftgrößen alle verschieden und viel größer als normal und irgendwie sieht alles verzerrt aus. Welche Möglichkeiten habe ich das zu vermeiden?

Vielen Dank schon mal im Voraus für die Antwort. Ihr seid die Besten:)

Liebe Grüße,

Henri

...zum Beitrag

Die URLs der Unterseiten werden immer noch mit der System Domain angezeigt?

Ich hab eine Website über WordPress gebaut. Der Hoster ist hierbei IONOS. Ich hab die Seite anfangs auf einer System Domain von IONOS laufen lassen damit die Seite noch nicht auffindbar ist…

Als ich die Website dann aber auf die richtige Domain umgestellt habe, wird nur die Startseite mit der richtigen Domain angezeigt die Unterseiten immer noch mit mit der System Domain.
Das komische ist, wenn ich auf WordPress auf die verschiedene Unterseiten gehen werden dort von WordPress die richtigen Domains in der Seitenleiste angezeigt und sind auch darüber aufrufbar…

wenn ich mich aber auf der Webseite durchklicke z.B. die Unterseite Impressum anklicke wird in dem Feld bei Google wo die URL angezeigt wird wieder nur die System Domain von IONOS angezeigt…

ich wäre sehr dankbar wenn mir jemand helfen kann!!

danke im Voraus!

...zum Beitrag

Was möchtest Du wissen?

Deine Frage stellen