I just checked "PageSpeed Insights" on my website and realized that i have a problem with some files (such as image/js/css) about their expiry time.
My server is linux, i know it worked with htacces but i'm afraid that the administrator does not enable the mod_expires...
Anyway I pretty sure that there is another way to do this and to declare for a expiry time for image/script/css.
How about using mod_headers (still requires .htaccess):
<FilesMatch "\.(jpg|jpeg|gif|png|js|css)$">
Header set Cache-Control "max-age=3600"
</FilesMatch>
For example.
Related
I got a problem with a wordpress website, i got a TTFB of about 8s.
My server is a debian 7 with apache, 3go RAM, hosting at gandi cloud IAAS
If i install a cache module (like SuperCache), when a page is in the cache everything is OK, pages are loading very fast
But for a new page, or with the cache module disabled, it's 8..9 seconds of loading.
My apache2.conf is configured like that :
<IfModule mpm_prefork_module>
StartServers 1
MinSpareServers 1
MaxSpareServers 3
MaxClients 10
MaxRequestsPerChild 3000
</IfModule>
<IfModule mpm_worker_module>
StartServers 1
MinSpareThreads 5
MaxSpareThreads 15
ThreadLimit 25
ThreadsPerChild 5
MaxClients 25
MaxRequestsPerChild 200
</IfModule>
A free-m request says :
total used free shared buffers cached
Mem: 2858 1772 1085 0 166 1152
-/+ buffers/cache: 453 2404
The url of the site is https://www.super-taux.com
If someone got an idea... Thank you very much.
That is the nature of WordPress. The code and page Generation is generally horrific
Your TTFB is not the problem. For WordPress it is pretty good.
Your Server does not caching any of the static content
Character set is not specified
Keep Alive is not enabled
Your Server is Very Fast, 18,766,667 Bytes/Sec. and with the gzip compression the effective speed is 104,249,275 Bytes/Sec.
Base Page Size: 71,932 Bytes
Transmission Speed: 18,766,667 Bytes/Sec.
Compression: 5.6X
HTML Whitespace: 4.0%
Bytes Transmitted: 12,949 Bytes
HTML Transfer Rate: 104,249,275 Bytes/Sec.
The total page load time is the issue.
Typically with WP the order in which the CSS and JS files are loaded delays Start Render. If you test your page load at webpagetest.org, and look at the Waterfall you will see a large amount of time from the page loaded and Start Render.
WebPagetest Waterfall Details
The base page (Line 1) is loaded in 562 milliseconds, Start Render is at 2.789 sec.
Notice line 22 is a .woff2 font file and its Start Offset is 2.511 sec.
Then following that the Start Render begins. This one thing is costing you over 2 seconds.
Each time the Browser runs into a resource (e.g. CSS and Fonts) that can alter page layout, the Browser restarts Rendering. Meanwhile each JS file that has been loaded prior to the last CSS stops Rendering as the Browser parses the JS.
If SuperCache is working for you then you must have static web pages. With static pages you do not have to have WP Generate the pages dynamically.
If you need WP to design your pages then copy the pages rendered by WP and use them as static pages.
This may require you change the links from one page to another.
Then you will also have the ability to correct the order of the resources in the <head> and move all the CSS and Fonts above any JS and move the appropriate JS down to the bottom of the page.
Run the Google PageSpeed Insights
PageSpeed Insights
And follow the link to Eliminate render-blocking JavaScript and CSS in above-the-fold content
You need to fix your Server configuration. it is best to add this to the httpd.conf but a quick fix is to create an .htaccess file that would include the following:
AddCharset utf-8 .html .css .php .txt .js .svg
Header unset ETag
FileETag None
ExpiresActive On
ExpiresByType image/* A31536000
ExpiresByType text/* A2592030
ExpiresByType application/* A2592030
<FilesMatch "\.(js|xml|gz)$">
Header set Cache-Control "max-age=2592030, public"
Header append Vary: Accept-Encoding
</FilesMatch>
<ifModule mod_headers.c>
Header set Connection keep-Alive
</ifModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|swf)(\.gz)?$">
Header set Cache-Control "max-age=31536000, public"
</FilesMatch>
<FilesMatch "\.(html|js|css|xml|gz)$">
Header set Cache-Control "max-age=86401, public"
Header append Vary: Accept-Encoding
</FilesMatch>
Your site has very long time to Start Render (when the user sees something) and to a complete page.
1) You are loading a lot of CSS, which delays rendering. Most of it (193 KB GZipped!) looks like Bootstrap and libraries to support swipebox. Do you really need all of that? For example:
Can you reduce Bootstrap down to the subset you really need (perhaps using Less or Sass)?
Where do you use swipebox? I don't see it on the front page. If you are using a WordPress plugin that's adding it in, many plugins simply add their CSS and JS to every page, whether they are being used on that page or not. This means that everyone has a performance penalty, even if most people will never see the lightbox. There are ways to disable plugins that do this on pages where they are not being used.
2) You are loading a lot of Javascript files (perhaps from plugins). These also delay rendering. If you can limit them to the page(s) they are needed or make them asynchronous, then they will not delay rendering (but they will still slow down the page).
3) You are getting a lot of delay from using SSL/TLS. Do you really need that for every page? Two suggestions:
Use SSL/TLS only on pages that really need it (where the user is going to enter sensitive information).
If you really need to use SSL/TLS, move all of your static content (CSS, JS, images) to a CDN. That way, you will not be getting the SSL/TLS penalty for static files.
4) You use a lot of small images. Consider using a sprite instead. That way, there will only be a few images downloaded, saving a lot of HTTP connections (and extra penalty when using SSL/TLS).
I've been working for a client the past couple of weeks, and I'm absolutely certain that the code I've written has been working fine cross-browser. However, as of yesterday the site has not been downloading content from my server when viewing through Firefox or Safari (to make things even weirder the site loads fine in Chrome / IE).
Update
When I view the site from a proxy, the CSS file listed below loads fine. Now this is getting weird ...
Errors?
Well, as I'm sure many of you would have done I quickly went to validate the HTML and CSS of the pages, wondering if that was causing this issue. But then I ran a test that quite frankly made any validation error unrelated: I tried loading a one-line CSS file directly in my browser.
The link to this CSS file is here
As #Ralph asked below, What is the purpose of supplying us with a CSS file?. The purpose of supplying you with the CSS file is to demonstrate how this one-line CSS file downloads fine in Chrome/IE but not in Firefox/Safari and I cannot understand why that might be.
I do not have control over the server but my client does, and is quite familiar with it. He is currently away so I'm unable to ask him if he's made changes as of 24 hours ago, but I'd like to determine this myself if possible.
Question:
Is there any server configuration that any of you know of that would cause Firefox and Safari to not download both CSS and JS files? I've emptied out the .htaccess file to be sure the error wasn't coming from there.
Notes / attempts I've made
Firefox is retrieving the file (according to firebug, which returns an OK GET Request
The header is text/css as it should be (view the CSS link above and do right click -> page Info
This is an Apache 2.2 server
In Firefox, I've tried to completely re-download the page by doing Control + Shift + R but still, no content is downloaded.
I'm happy to supply any other information as requested.
Thank you for the help.
The problem was that I was using Gzip compression and FireFox / Safari were not working because of it. Removing the compression fixed the problem.
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
The CSS files that I am using load some images like this:
eg: main.css:
.nav{
background-image:url("/www/images/bg.png")
}
<link href="/www/css/main.css?version=1.2" type="stylesheet" />
CSS File is loaded in the HTML as shown above.
I know there is an approach that adds a query string like "?version=1.2" to force the browser to load the css file from the web server not from cache. But my problem is that this works ok for css file, but does nothing to the embedded images.
So what can I do to make the browser download the images embedded in the css or js files when I edit the images, but the names stay the same?
I would like not to:
1. change the image name
2. disable caching
thanks
May be use chrome incognito to make browser get the images every time ?
Adding a query string to the url like ?version=2 only prevents caching when the url changes every time, for instance image.png?random=123, where the value of random is different every time the page loads. The unique url forces the browser to re-fetch the image every time since the url doesn't match the url of the cached image.
Since you're wanting to use a static URL, I would suggest setting your HTTP server settings to send a header to the browser not to cache images. Let me know if you need help with that.
Can you use .htaccess file on your hosting (with mod_expires)?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "access plus 1 minutes"
</IfModule>
EDIT: I saw your edit. Your question is that you want to force client to refresh images when you update them on server, without disabling browser cache?
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/png "modification plus 1 seconds"
</IfModule>
Google's mod_pagespeed plugin for apache will do auto-versioning for you. It's really slick.
http://code.google.com/speed/page-speed/docs/module.html
It parses HTML on its way out of the webserver (works with PHP, rails, python, static HTML -- anything) and rewrites links to CSS, JS, image files so they include an id code. It serves up the files at the modified URLs with a very long cache control on them. When the files change, it automatically changes the URLs so the browser has to re-fetch them. It basically just works, without any changes to your code. It'll even minify your code on the way out too.
Stolen from this post How to force browser to reload cached CSS/JS files?
I have a system where cache max-age is set to 0 and there is problem, when I have made some changes in my style.css fail the changes dont apear to client. Browser will use the old cached version of css.
I have simple question: Does naming css file as style.css?123 will be cached as a new?
Yes, adding a unique query string to the resource's URI will force the client to fetch a "fresh" version (since the client doesn't know that it's merely an update of a previously cached resource). This is known as fingerprinting and you typically use a timestamp or an incrementing version number1 of the CSS file.
Google Web Fundamentals has a great article on HTTP cache optimization. Especially the section titled "Invalidating and updating cached responses:"
How do you get the best of both worlds: client-side caching and quick updates? You change the URL of the resource and force the user to download the new response whenever its content changes. Typically, you do this by embedding a fingerprint of the file, or a version number, in its filename—for example, style.x234dff.css.
Do note, that the fingerprint does not need to be a sequential number. Any value – hash, version, etc. – will do as long as the risk of collisions is limited.
1) This is what's done here on SO, e.g. http://sstatic.net/js/global-login.js?v=12
You can append a unique query string, although this will use bandwidth.
You can rename your CSS file every time you make a change, IE:
main-v1.css
main-v2.css
main-v3.css
And then re-reference it in your pages. This saves bandwidth and forces browsers to reload it.
yes, appending a querystring parameter in each style.css file will force it to cache again.
because browser caches each static component with its url, so when url is changed, the new file will be cached.
You can trick the browser into thinking it's a new stylesheet every second by timestamping your CSS:
<link rel="stylesheet" type="text/css" href="style.css?<?php echo date('l jS \of F Y h:i:s A'); ?>" />
Which will give you this:
<link rel="stylesheet" type="text/css" href="style.css?Thursday 24th of April 2008 04:45:21 PM" />
Taken from: Can We Prevent CSS Caching?
Using .htaccess file, you can define caching control on you files with special extensions.
You could include the following code in a .htaccess file:
<FilesMatch "\.(css)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
For more information about .htaccess file, see Apache .htaccess Guide
hi i have a little problem
i uploaded a new version of my website.
and some users complained that they see some page i changed very very wrong.
anyway after a refresh they see it fine.
i think its because my css file got cached by them on an earlier time...
why isnt the browser downloading the css file by himself on first load?..
he should know the css file changed dosnt he?
thanks in advance
#UpTheCreek's method will work fine. But you can save some trouble by just changing the call and not changing the filename.
screen.css?v=12
This will also force a reload but will only require you to change the call.
he should know the css file changed
dosnt he?
Not necessarily. If your css files have been sent from the server with a max-age directive and/or an expiring date far in the future, browser are instructed to not make conditional requests to your resource (see http://developer.yahoo.com/blogs/ydn/posts/2007/05/high_performanc_2/) so they consider the resource in cache still valid.
In this case in order to force a new request you may need to rename the file or append a random querystring like file.css?848372034 or, even better, a version note like file.css?v=1
If you install the web developer toolbar (for Firefox or IE) you can disable cache. I use this when developing websites. It saves you having to rename your CSS every time you make a minor edit.
If you're on Apache try adding this in your root .htaccess:
<FilesMatch ".(css|jpg|gif|ico|jpeg|png|html)$">
ExpiresActive On
Header set Expires "Mon, 22 Nov 2010 06:00:00 GMT"
</FilesMatch> [L]
Include only file types you don't want cached , eg:
<FilesMatch ".(css|js)$">
If you know when you want to change files, set a future date - your site will be faster if these files are not regularly refreshed.
If you don't set an expiry date, browsers cache these files in proportion to their age.