A hard reload tells Chrome: "Ignore everything you've saved from this page and download it fresh from the server." It re-fetches the HTML, CSS, JavaScript, images, and fonts instead of loading them from Chrome's local cache.
The shortcut:
- Windows/Linux: Ctrl + Shift + R (or Ctrl + F5)
- Mac: ⌘ + Shift + R (Command + Shift + R)
That's the answer most people came here for. The rest of this article covers what's actually happening, when a hard reload helps, and when you need something stronger.
What Chrome's cache does (in plain terms)
When you visit a webpage, Chrome downloads everything the page needs: the HTML document, CSS stylesheets, JavaScript files, images, fonts. This can be megabytes of data.
Chrome stores copies of these files on your computer. The next time you visit the same page, Chrome checks: "Do I already have this file? Is it still valid?" If so, it loads the file from your local disk instead of downloading it again. That's the cache. It makes pages load faster and reduces bandwidth usage.
The problem: sometimes the website changes but Chrome still serves the old cached version. You see outdated styles, broken layouts, old JavaScript behavior, or stale content. A hard reload fixes this by telling Chrome to skip the cache and download fresh copies.
The 3 reload types in Chrome
Chrome has three distinct reload behaviors, and they do different things.
Normal reload (F5 or Ctrl + R)
Chrome sends a request to the server for each resource, but includes information about what's in the cache. The server can respond with "304 Not Modified" (use what you have) or send a new version. This is a polite reload: Chrome asks the server if anything changed, but if the server says nothing changed, Chrome uses the cached files.
When it works: Most of the time. If the server is correctly configured with cache headers, a normal reload gets you the latest content.
When it doesn't work: When the server's cache headers tell Chrome to keep using the old version for a long time (aggressive caching). The browser never even asks the server. It just loads from cache.
Hard reload (Ctrl + Shift + R or Ctrl + F5)
Chrome re-downloads the main page and all its directly linked resources (CSS, JS, images) from the server, ignoring the cache. It sends requests without cache validation headers, so the server always sends fresh files.
When it works: When a website pushed an update but your browser is stuck showing old CSS or JavaScript. A hard reload forces Chrome to get the new versions.
When it doesn't work: Some resources are loaded dynamically after the initial page load (via JavaScript fetch() or import() calls). A hard reload refreshes the initial page resources but these secondary requests might still use cached versions. Sub-resources loaded through iframes or third-party scripts can also continue using cached data.
Empty cache and hard reload (DevTools only)
This is the nuclear option. Chrome clears all cached files for the current site, then does a hard reload. Every single resource, including dynamically loaded ones, gets re-downloaded. Nothing from the cache is used.
How to access it:
- Open DevTools: press F12 (Windows/Linux) or ⌘ + ⌥ + I (Mac)
- With DevTools open, right-click the reload button in the browser toolbar
- Select "Empty Cache and Hard Reload"
This option only appears when DevTools is open. Without DevTools, right-clicking the reload button does nothing special.
When to use it: When a hard reload didn't fix the problem. This is common on single-page applications (SPAs) built with React, Angular, or Vue, where JavaScript bundles are loaded dynamically and a regular hard reload misses them.
All the shortcuts in one place
Hard reload on Chrome mobile (Android/iOS)
Chrome on phones doesn't support keyboard shortcuts, and there's no DevTools right-click option. You have two alternatives.
Quick method: Pull down on the page and release to refresh. This is a normal reload, not a hard reload. It's equivalent to F5, not Ctrl + Shift + R.
Actual hard reload (clear site cache):
- Tap the three-dot menu (⋮)
- Go to Settings > Privacy and security > Clear browsing data
- Select "Cached images and files" (leave other options unchecked if you don't want to lose cookies or history)
- Set the time range to "All time"
- Tap Clear data
- Go back to the page and reload it
This clears the cache for all sites, not just the one you're having trouble with. Chrome mobile doesn't offer per-site cache clearing from the settings menu. If you want to clear cache for a single site, tap the three-dot menu, go to Settings > Site settings, find the specific site, and tap Clear & reset.
When a hard reload fixes the problem
You updated your website but still see the old version. You deployed new CSS or JavaScript, but Chrome cached the old files with long expiry headers. A hard reload forces Chrome to download the new files.
A page looks broken after a browser update. Chrome occasionally changes how it handles certain CSS or JavaScript features. If the page was cached with old rendering assumptions, a hard reload lets Chrome re-render with the current engine.
Forms or buttons stopped working. If the site updated its JavaScript and your browser is running an old cached version, interactive elements can break. The HTML might reference functions that exist in the new JavaScript but not in the cached old version.
Login loops or session errors. Cached redirects or authentication tokens can cause login pages to loop or throw errors. A hard reload can fix this, though sometimes you need to clear cookies too (which a hard reload doesn't do).
When a hard reload doesn't fix the problem
The issue is server-side. If the server is returning wrong data, no amount of cache clearing on your end will help. Open an incognito window (Ctrl + Shift + N / ⌘ + Shift + N). Incognito starts with an empty cache and no cookies. If the problem appears in incognito too, it's not a caching issue.
Service workers are caching content. Some modern web apps use service workers to cache content independently of Chrome's built-in cache. A hard reload doesn't clear service worker caches. To fix this: open DevTools, go to the Application tab, click Service Workers in the left sidebar, and click Unregister. Then reload the page.
DNS is cached. Your computer or router might cache the old IP address for a website. A browser hard reload doesn't clear DNS cache. On Windows, open Command Prompt and run ipconfig /flushdns. On Mac, open Terminal and run sudo dscacheutil -flushcache; sudo killall -HUP mDNSResponder.
A CDN is serving stale content. Content delivery networks cache pages at the edge, closer to users. Even if the origin server has new content, the CDN might still serve the old version. This is a server/infrastructure problem, not something a browser reload can fix. Wait for the CDN cache to expire, or ask the site owner to purge the CDN cache.
For developers: preventing cache problems for your users
If you build websites, you can prevent most cache issues by using cache-busting filenames. Instead of serving styles.css (which Chrome caches and might not re-download), serve styles.a1b2c3.css where the hash changes every time the file content changes. Build tools like Webpack, Vite, and esbuild do this automatically.
With hashed filenames, you can set aggressive cache headers (cache for 1 year) because the filename itself changes when the content changes. Chrome caches the file forever, but when you deploy a new version, the HTML references a new filename, and Chrome downloads it fresh. Your users never need to hard reload.
If you're not using hashed filenames, set appropriate Cache-Control headers. For HTML documents, use no-cache (forces Chrome to revalidate on every visit). For static assets like images and fonts, use max-age=31536000 (one year) with hashed filenames.
FAQ
What does a hard reload do in Chrome?
A hard reload forces Chrome to re-download the webpage and all its resources (CSS, JavaScript, images) from the server instead of using locally cached copies. It's the fix for when a website updated but your browser still shows the old version.
What's the hard reload shortcut for Chrome?
Windows/Linux: Ctrl + Shift + R (or Ctrl + F5). Mac: ⌘ + Shift + R (Command + Shift + R). These work in all Chrome versions on desktop.
How do I hard reload Chrome on my phone?
Chrome mobile doesn't have a hard reload shortcut. Go to Settings > Privacy and security > Clear browsing data, select "Cached images and files," and tap Clear data. Then reload the page.
What's the difference between hard reload and empty cache and hard reload?
Hard reload re-downloads page resources but some dynamically loaded content might still use cache. Empty cache and hard reload (accessible by right-clicking the reload button with DevTools open) clears ALL cached files for the site first, then reloads. Use the second option when the first doesn't fix the problem.
Does a hard reload clear cookies?
No. A hard reload only affects cached files (CSS, JavaScript, images, fonts). Cookies, saved passwords, form data, and local storage are not affected. To clear cookies, go to Chrome Settings > Privacy and security > Clear browsing data and check "Cookies and other site data."
Why do I need to hard reload after a website update?
Browsers cache files to make pages load faster. When a website updates its files, your browser might still have the old versions cached. If the cache hasn't expired, Chrome won't check for new versions. A hard reload bypasses the cache and downloads fresh files from the server.
