Every page on a site I built for a client works fine on Chrome and Firefox. All pages load fine on Safari except for the blog page if it is cached. Manually empty the cache and all is well. https://spiritoftheenvironment.org/blog/
Does anyone know of a snippet I can use or something I can do to prevent this problem from occurring?
Thanks for your assistance in advance.
Looks like you are using goCMS for the blog?
What isn’t loading when the page is cached?
Is it old data, images or something else?
Correct, using goCMS for blog
It is the menu (TopBar) that isn’t loading. It loads messed up on the side. The posts themselves load fine[quote=“teefers, post:2, topic:35379, full:true”]
Looks like you are using goCMS for the blog?
What isn’t loading when the page is cached?
Is it old data, images or something else?
[/quote]
Correct, using goCMS for blog
It is the menu (TopBar) that isn’t loading. It loads messed up on the side. The posts themselves load fine
I see a little “Flash of Unstyled Content” but only for a second.
Then it formats correctly.
What steps can you give to recreate what you are seeing?
When I go to the blog page in Safari, https://spiritoftheenvironment.org/blog/, then go to any other page and then using the menu go back to the blog page, the menu bar is messed up.
Thanks for your assistance on this.
Okay,
What I see happens at least a little on every page I tried on your site. It eventually “corrects” itself and applies the styling.
I’m testing on Safari 14.0 (14610.1.28.1.10) with a quick internet connection (1 mega-bit per second).
Here is what I see:
Now it looks like you are running Foundations 1.9.1, and I don’t remember if that has a pre-loader included with it. But you could try that. The preloader stops thinks from displaying until the site is loaded. It can make the site appear to be slower.
The other thing I noticed is that you don’t appear to be caching any CSS files? That’s usually done with .htaccess file directives. The two largest CSS files are both set not to cache:
So another fix would be to add cache control to you htaccess file (an example here):
# BEGIN Expire headers
<IfModule mod_expires.c>
# Turn on the module.
ExpiresActive on
# Set the default expiry times.
ExpiresDefault "access plus 2 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/svg+xml "access 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 600 seconds"
</IfModule>
# END Expire headers
Chrome and Firefox are very aggressive about caching, so even though you aren’t telling them to cache they often do.
Thanks so much. I will give those a try.
Much appreciated
I added the sample (hope it was a good sample) to the htaccess. It did not solve the problem.
I just checked, and the Cache is working for the CSS files. I can’t get it to fail on my end.
I noticed that you are using two cross-site trackers (addthis and sharethis) and thy are very slow. Safari blocks cross site trackers unless you change the default settings. Don’t know if that is causing the problem or not.
Since you added the cache for the CSS files I don’t even get the “Flash of Unstyled Content” like I did before.
@teefers This is a bit off-topic so I apologize. I know how to copy/paste your code for htaccess. But I don’t really know what all the “bits” mean. When you have the time could you explain what this bit of code is really doing? I think it’s something I’d like to add to some of my projects but I’m definitely guessing at what it all means.
The example above is one of two common ways for Apache to communicate with the browsers to “hold on to certain files longer” assuming they have the cache space available.
This method uses the mod_expires Apache module. This module controls the setting of the Expires HTTP header and the max-age directive of the Cache-Control HTTP header in server responses. They can set the expiration date to be relative to either the time the source file was last modified, or to the time of the client access.
# BEGIN Expire headers
<IfModule mod_expires.c>
# Turn on the module.
ExpiresActive on
ExpiresByType text/css “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
</IfModule>
# END Expire headers
The other method is Caching with the mod_header module of Apache. Here is a sample setting a one month max-age for certain files that match(.js and .css):
# BEGIN mod headers
<ifModule mod_headers.c>
# Turn on Expires
# Month
<FilesMatch “\.(js|css)$”>
Header set Cache-Control “max-age=2419200”
</FilesMatch>
</ifModule>
# END mod headers
Both methods work, I find the first method mod_expires easier to set up and understand. But you may prefer the latter.
ExpiresActive on makes sure that the ExpiresActive Module is turned on.
ExpiresByType text/css “access plus 1 month” Set the expiration date documents of the specified content -type (e.g., text/html) based on this “access” plus 1 month. You can also set it up to use modification instead of access, if you want the cache rules based on modification date.
You can use any of the following time “types”
You can also turn off caching for a type by specifying `` ExpiresByType text/css “now”`.
This uses RegEx(regular expressions) to match files by the files extension in a FilesMatch block. It then sets the cache in seconds with a max-age directive.
In Apache there are almost an unlimited way of doing many things.
Addthis and sharethis is on all pages and it is just this one page that doesn’t work for me (or my client unfortunately) so I don’t think that would be the problem - however, I will still take a look at it to avoid future issues and/or to speed up the page.
Thanks for all of your assistance.
I wouldn’t assume that because something works on one or a bunch of pages that it will work on all pages. This page differs from the other pages, goCMS and maybe more. Just suggesting that you might remove these as a process of elimination.
That’s what I would start doing next. Is a process of elimination. I also noticed you are using Nick Cates depth (Base and Banner). There might be a compatibility issue?
I can’t get it to fail on my Safari (or any other browser I tried). And since you turned on caching, it doesn’t even really flicker for me. Perhaps someone else can check and get it to fail.
I haven’t used Foundation 1 for sometime, but I don’t think there is any compatibility issues with goCMS and F1.
Thanks for pointing that out. You are absolutely correct about potential conflicts on different pages and I will remove those to test it.
Thanks again
After stripping everything from the page and adding back stacks, the conflict is between TopBar and Go CMS which is totally perplexing because I have 2 other sites for which I use a duplicated page and everything works fine with the other sites. I tested a different menu stack and it worked fine, so I am just going to change the menu and be done with it.
Thanks for all your help.
@teefers Thanks for the explanation. Very thorough and it helped me a lot. Great to know about the ability to add this kind of code to HTACCESS. I really do appreciate the explanation, and the time you took to provide it!
This subject is of interest to me.
If a person views one of my photo album pages, then I publish a change, when they view the same page again the thumbs and captions are mixed up.
I then have to tell them to clear the cache etc.
So what configuration of your code would help stop this?
Thanks.
Which photo album are you using?
What is “mixed up” mean here?
Are new images missing?
Are old images showing up?
Are the captions on the wrong imsge?
A URL is always helpful, and even screenshots wouldb’t hurt.
The RW supplied photo album.
Once I upload a change, thumbs can appear duplicated or with wrong captions .
Often a page refresh does not work until the cache is cleared.
It is this site.
I don’t have a lot of experience with the built-in Album plugin. I can tell you that part of the problem is that plugin uses a generic name for the thumbnail images an example:
files/page1-1000-thumb.jpg for the first image in the gallery, and files/page1-1001-thumb.jpg for the second and so on.
If you change the image order, or replace an image, it seems like the plugin uses the same filename for the thumbnails. The first image thumbnail will always have the same filename, no matter what image it represents.
My guess is that the thumbnails are getting cached (they are jpegs, so you would expect this).
So now you could set all jpegs to for a short time. The disadvantage do doing it that way is your site is an image heavy site. Photo and art sites tend to be that way. If you set the cache to quick, it could really affect the site’s performance.
So even though I said the first option is easier to understand, the second option is more flexible.
So here is what I would start with as a htaccess file for caching. Please keep in mind I haven’t tested this code:
# BEGIN mod headers
<ifModule mod_headers.c>
#set all images PDF’s CSS and JS to one month
<filesMatch “\.(gif|ico|jpg|jpeg|mp4|mpeg|png|svg|swf|webp|pdf|css)$”>
Header set Cache-Control “max-age=2592000, public”
</filesMatch>
#Set ThumbNail images to 600 seconds (10 minutes)
<filesMatch “thumb\.jpg$”>
Header set Cache-Control “max-age=600, public”
</filesMatch>
#set html and php to 10 min
<filesMatch “\.(html|htm|php)$”>
Header set Cache-Control “max-age=600, public”
</filesMatch>
</ifModule>