Member Avatar for Ankur_tces

I have a project in which there are several static .html pages.
My problem is that i am showing google map on the page by giving the reference of google API because of that it take lot's of time to load the page. What i want is that after loading first time from the server,if the user hits the same page again then it should retrieve the same page from the cache since the content of the page doesn't change at all.

So kindly provide me the syntax along with an example in .html page.

so how to cache a html page ???

  • 4 Contributors
  • 3 Replies
  • 285 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by jhon786

Dani AI

Generated

Static HTML pages that include the Google Maps JavaScript will still issue live network requests for the API and for map tiles, so the interactive map portion cannot be fully satisfied from a cached HTML file. As observed, treat the static page cache and the map load as two separate problems: ensure reliable server-side caching for the HTML, and change when/how the map loads so the page appears fast on repeat views.

Server-side response headers are the authoritative way to cache HTML (meta tags are unreliable across browsers, as hinted). For example, set Cache-Control on HTML responses and use long max-age for immutable assets with filename versioning for invalidation. Example configurations:

# Apache (mod_headers)
<FilesMatch "\.(html|htm)$">
  Header set Cache-Control "public, max-age=3600"
</FilesMatch>
# Nginx
location ~* \.(html|htm)$ {
  add_header Cache-Control "public, max-age=3600";
}

Framework-level caching (as suggested) is useful when the site is generated dynamically; static-file hosting + correct headers is simpler for pure HTML.

To avoid blocking page render, defer the Maps JS and show a cached image or placeholder until interaction. Two practical patterns:

  • Lazy-load the Maps API after load or on demand:
function loadMaps(){
  var s = document.createElement('script');
  s.src = 'https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap';
  document.head.appendChild(s);
}
window.addEventListener('load', loadMaps);
  • Use a Static Maps image that is cacheable and swap it for the interactive map on click.

Service Workers provide powerful client-side caching (precache HTML and static assets, serve cache-first), but do not attempt to cache third-party map tiles or violate provider terms. Minimal SW example:

self.addEventListener('install', e => {
  e.waitUntil(caches.open('site-v1').then(c => c.addAll(['/','/index.html','/styles.css'])));
});
self.addEventListener('fetch', e => {
  e.respondWith(caches.match(e.request).then(r => r || fetch(e.request)));
});

Combine: server headers + asset versioning, lazy-load or static-image fallback for the map, and optionally a Service Worker for offline/fast repeat loads. Always include a cache-busting strategy (versioned filenames or updated cache name) so updates reach users when content changes.

Recommended Answers

All 3 Replies

Member Avatar for BlackHawck

You can try this for caching your pages
Codeigniter

Member Avatar for almostbob

loading the googlemaps url, means the page is NEVER cached, that url executes every time the page loads, the whole page will never be pulled from the cache, but the elements of the page each image chunk that creates the map, will be

you can give an apparent speed increase by using onload
1;to fire the googlemap api in javascript if you code the mapwrap the entire thing in a function, and call the function onload,OR
2;you can use onload to change the source of the map element

either way the page works, before the map is fully rendered

you can set expiry times in .htaccess

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/html "access plus 1800 seconds" 
ExpiresByType image/gif "access plus 360 days"
ExpiresByType image/jpg "access plus 360 days"
ExpiresByType image/png "access plus 360 days" 
ExpiresByType application/x-javascript "access plus 360 days"
ExpiresByType text/css "access plus 360 days"
ExpiresByType text/javascript "access plus 360 days"
ExpiresByType image/x-icon "access plus 360 days"
</IfModule>
Edited by almostbob because: n/a
Member Avatar for jhon786

See this Meta HTTP-EQUIV CACHE-CONTROL

The Meta HTTP-EQUIV CACHE-CONTROL is specifically used by Internet Explorer.

The allowed values are:

* Public - may be cached in public shared caches
* Private - may only be cached in private cache
* no-Cache - may not be cached
* no-Store - may be cached but not archived

How to use meta http-equiv="Cache-control" in your HTML

<meta http-equiv="Cache-control" content="description">
Example of the meta tag http-equiv="cache-control"

Add the following meta tag in the source of your web-page. The difference in spelling at the end of the tag is either you use " /> = xml or "> = html.


<meta http-equiv="Cache-control" content="public"><meta http-equiv="Cache-control" content="private"><meta http-equiv="Cache-control" content="no-cache"><meta http-equiv="Cache-control" content="no-store">

source page:

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.