My webpage looks completely different when hosted compared when viewed locally
Question
It's just a simple page for now however the background colour and image do not appear properly on the uploaded site, but are fine in the local files. Moreover, the website appears different when using with and without the www prefix.
[EDIT - I see either a white blank page, or one with a squashed logo in the middle of the page. I've tried with chrome, edge, on mobile and desktop, and with/without incognito mode.]
https://imgur.com/fk8UufL [ what it looks like through swed...]
https://imgur.com/aqTTwPP [ what it looks like through www.swed...]
and what it looks like locally
I've checked it using the W3 markup validation service and corrected those errors. I can't see any errors on the console either, and have had other people check, and checked on my phone as well, so it can't be a cache problem.
<!DOCTYPE html>
<html lang="en">
<head>
<title> swedge.</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="/favicon.ico">
<meta charset="UTF-8">
</head>
<body>
<div><img src ="swedge.png" alt = "">
</div>
</body>
</html>
CSS
body
{
background-color: #333333;
}
div {
top:0;
left:0;
}
div img {
position:fixed;
top:0;
left:0;
height: 200 px;
width: 200px;
}
I've had a search around but everything seems to point to either errors in the code, or a cache needing cleared.
1 answers
solution1
2 ACCPTED 2019-06-17 20:42:59
As now two other persons mentioned here: For us the online version looks just like your screenshot. This is good news for you, but why did it not work for you but for us?
This is a very usual problem encountered in web development and caused by caching. You most likely opened the webpage before you deployed the final version. Your browser or a CDN server cached the old files and when you reloaded the page after the final deployment those old files broke the web page as the page is now half new and half old.
The easiest way to check for caching issues is to open the web page in an incognito window/tab. The incognito mode does not share the caches, thus it is like you would open the webpage for the first time. After closing and opening a new incognito window, caches are reset again.
In Chrome you can also left click on the reload icon while the developer tools are open and select "hard reload" to manually invalidate all caches and reload everything.
Please not that both methods will not work when the caching issue is caused by a CDN server, as your browser will receive the outdated files again from the CDN. In this case you need to wait until the CDN drops your files from the cache.
You can control this behaviour with the cache control headers (browser and CDN). Shorter or no cache times will reduce this issue but will increase the load on your servers.
Edit: You mentioned in an other comment that, you already tried incognito mode. This means that the issue is most likely caused by a CDN. You can check the HTTP response headers for caching directives.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.