How can I cache an html document in a users browser? - html

I recently visited a website called neocities.org
I was surprised to see how extremely fast their pages loaded after a refresh because it's grabbing content from my browser cache..
exe. apple.neocities.com suyu.neocities.org
After some exploring I found that their site caches all content in the browser with a status 304. It also shows 'cache' on the html document line within the network tab on inspect element.
How can I accomplish this?
Do I need to have http/2 enabled to do this?
I have tried numerous things and nothing worked.
I did enable gzip though which was also enabled on these sites.
I put the code below in my .htaccess
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
I would like to enable some sort of caching that caches every file on my website in a users browser with a status of 304 instead of grabbing the file from the server each time.

Related

Expiring Headers not detected by Speed Check Services

I've set this expiring headers rules
<IfModule mod_expires.c>
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/js "access plus 1 year"
</IfModule>
but when I go to test it inside pingdom, gtmetrix, pagespeed and so on, I see that they advice me to set the expiring headers. I need to add something else to my code? Or those service don't detect the expiring headers? Or what else to solve this problem?
I'm Using cloundflare to speed up image loading. Maybe this? But they advice me also to add expiring headers for css, js. But I've yet add all of them.

How do I Update Fi Star Health Questionnaire with New/Updated Questions?

I am trying to update the Fi-Star Health Questionnaire and am getting into some issue which I am not sure how to solve, tried already many different things.
Basically, everything looks very clear and straight forward, I updated the schema file we are using: dataLoadQuestionnaire_QSE_beta.csv in the HQSE_curl_tester directory
and then tried to run the load command (see below):
~/HQ/HQSE_code/HQSE_curl_Tester$ sudo curl -X POST -H "Content-Type :
multipart/form-data" --form stream="#dataLoadQuestionnaire_QSE_beta.csv"
127.0.0.1:8080/questionnaire.mng.rest/rest/ktek/questionnaire/load -v
* Hostname was NOT found in DNS cache
* Trying 127.0.0.1...
* Connected to 127.0.0.1 (127.0.0.1) port 8080 (#0)
> POST /questionnaire.mng.rest/rest/ktek/questionnaire/load HTTP/1.1
> User-Agent: curl/7.35.0
> Host: 127.0.0.1:8080
> Accept: */*
> Content-Type : multipart/form-data
> Content-Length: 20910
> Expect: 100-continue
> Content-Type: multipart/form-data; boundary=------------------------
b73558337a
324ed0
>
< HTTP/1.1 100 Continue
< HTTP/1.1 200 OK
* Server Apache-Coyote/1.1 is not blacklisted
< Server: Apache-Coyote/1.1
< Date: Mon, 29 Feb 2016 08:17:57 GMT
< Content-Type: application/json
< Transfer-Encoding: chunked
<
* Connection #0 to host 127.0.0.1 left intact
{"Boolean":false}
I tried with using http 1.0, and tried to send different headers, but i seem to continue to get this connection to host left intact and boolean false, and so my live questionnaire doesn't get updated.
Need help with this.
Anyone knows how to work with Fi-Star Health Questionnaire SE and can help?
This feature is not supported.
Changing a live (active) questionnaire is not supported.
You have to create a new questionnaire.

browser caching .htaccesss is not working

My code for Leverage browser caching doesn't seem to work i have written the following in the .htaccess but when i ran PageSpeed insights i get the Leverage Browser:
Can somebody kindly advice on what i am doing wrong?
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType images/dots.gif "access plus 1 month"
ExpiresByType images/homepage/1.5mw_installed.jpg "access plus 1 month"
ExpiresByType images/homepage/350kw_optimizers.jpg "access plus 1 month"
......
ExpiresByType stylesheets/responsive.css "access plus 1 month"
ExpiresByType stylesheets/teal.css "access plus 1 month"
ExpiresByType stylesheets/style.css "access plus 1 month"
ExpiresByType stylesheets/websymbols/websymbols-regular-webfont.woff "access plus 1 month"
</IfModule>
## EXPIRES CACHING ##
Thank you in advance
#==== CACHE FILES FOR 1 WEEK ====
<IfModule mod_expires.c>
ExpiresActive On
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
ExpiresDefault "access plus 7 days"
</FilesMatch>
</IfModule>
You can change which files you want to cache in the list (remove or add).
Change the ExpiresDefault to change how long files are cached for.
This code is tested and works. Google Page Speed recognises it.

Controlling Cache Expirations

After running my webpage through Google Webmaster Tools' PageSpeed analyzer, it has reported to me that none of my resources are being cached. Below is the code in my .htaccess file taken directly from H5BP. Am I correct in assuming the below expirations are set correctly and something is wrong in my implementation or do I have to set explicit expirations for each file name and not broad generalizations?
# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Feed
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
# CSS and JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
</IfModule>
That looks good.
Either you don't have the mod_expires module installed (1 in a million don't) or some other .htaccess or httpd.conf directive is disabling these somewhere else. Please use the page speed tool to grab the actual headers sent by your files, and paste.

Changing the cache settings of the page

I want to disable browser caching for my site. How do I do that? I load an audio file according to the image in my page, image gets refreshed all the time but audio remains the same only in Mozilla, whereas it is working fine for Chrome. So I want to disable the caching process. So that Mozilla doesn't load the audio file from the cache.
I recommend doing this through your .htaccess file. All of the following code is taken from html5 boilerplate. Basically this is a cache control list that contains every type of web resource you can think of. So if you want your audio to have no cache just set the the appropriate line in the snippet to the value "access plus 0 seconds".
Hope this works for you.
# ----------------------------------------------------------------------
# Expires headers (for better cache control)
# ----------------------------------------------------------------------
# These are pretty far-future expires headers.
# They assume you control versioning with filename-based cache busting
# Additionally, consider that outdated proxies may miscache
# www.stevesouders.com/blog/2008/08/23/revving-filenames-dont-use-querystring/
# If you don't use filenames to version, lower the CSS and JS to something like
# "access plus 1 week".
<IfModule mod_expires.c>
ExpiresActive on
# Perhaps better to whitelist expires rules? Perhaps.
ExpiresDefault "access plus 1 month"
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest "access plus 0 seconds"
# Your document html
ExpiresByType text/html "access plus 0 seconds"
# Data
ExpiresByType application/json "access plus 0 seconds"
ExpiresByType application/xml "access plus 0 seconds"
ExpiresByType text/xml "access plus 0 seconds"
# Feed
ExpiresByType application/atom+xml "access plus 1 hour"
ExpiresByType application/rss+xml "access plus 1 hour"
# Favicon (cannot be renamed)
ExpiresByType image/x-icon "access plus 1 week"
# Media: images, video, audio
ExpiresByType audio/ogg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType video/mp4 "access plus 1 month"
ExpiresByType video/ogg "access plus 1 month"
ExpiresByType video/webm "access plus 1 month"
# HTC files (css3pie)
ExpiresByType text/x-component "access plus 1 month"
# Webfonts
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
ExpiresByType application/x-font-ttf "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
# CSS and JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType text/css "access plus 1 year"
</IfModule>