I am trying to improve my site load speed. When checking on the network requests, there is something that doesn't make sense to me:
How can the content that is going to be requested (css and js files) is being download before the html content has been downloaded?
I have tried with a hard reload and empty cache from chrome, but this has happened again. Morover, the files seem to be dowload from the server and not from the cache.
Another thing I don't get, is why chrome is pating the bar chart almost all with blue, when the majority of the time is waiting for the server to respond (TTFB).
Thanks in advance!
There's a couple of possibilities:
The HTML doesn't download all at once. It's possible for the server to send part of the page, pause, then send the rest. If the part that's sent first contains references to CSS, JS, image, font, or other files, the browser can start downloading those files as soon as it sees them referenced.
HTTP 2.0 supports "server push", a scheme where the web server can indicate to the client through HTTP headers that it should start downloading specific other files. Judging from some of the file names in your network tab, you're using Cloudflare; they use server push for some features, including "Rocket Loader".
Related
When navigating my site, my browser is loading the JS files from cache, but not the CSS files. This happens both running a local server and on the live site (to me and apparently to other users, which is apparent since the logs show mostly .css files getting loaded).
I've tried the other solutions (example): I am clicking around on hyperlinks (not refreshing) and my Chrome Devtools do not have "Disable Cache" checked.
Here is the initial request (using CTRL+F5 for a hard refresh):
Then navigating back to that page creates another request:
(Note: there is no Cache-Control sent in the second request, proving that I indeed did not refresh)
As expected, the server responds with a 304 Not-Modified for the .css file, but I don't understand why it's making a trip to the server at all (notice below the .js file is retrieved without a server request).
I believe you can look at the issue first-hand on your own machine by going to https://up.codes. I'm using Chrome 71.0.
Why are the CSS files not being cached?
#Allen found the issue (Vary header included cookie and the cookie was changing between requests), but I'll show how to fix it for the case of Flask for posterity. You can use Flask's #app.after_request() hook to make sure Flask does not add cookie when it hits this line:
#app.after_request
def add_header(response):
url = request.url
if ('.css' in url or '.js' in url or '.svg' in url or '.png' in url or
'.gif' in url) :
# Flask adds to the header `Vary: cookie` meaning the client should
# re-download the asset if the cookie changed. If you look at the Flask
# source code that comes next after the below return, it will add
# `Vary: cookie` if and only if session.accessed is true.
session.accessed = False
return response
Your server responded with different session cookie when requesting these css files, and your header set with Vary: Cookie, which caused the browser to send request again because of the session cookie change.
Check out for your web.config's compilation attribute, if its:
<compilation debug=”true”/>
CSS will get continually downloaded by clients on each pageview request and not cached locally within the browser.
If its set to false, the resource is only downloaded once to the client and cached there.
Check out this post: Chrome will not cache CSS files. .js files work fine
Chrome uses multiple types of caches.
Blink (the rendering engine that Chrome uses) uses an in memory cache and a disk cache. It uses this cache for images, fonts and js files.
As long as a file of that type is still in the memory cache or the file cache it will be loaded from there and skip the WebRequest API, this means that no call is made to the server.
I don't know exactly why css files are not being cached by Blink, but this is the reason why you see an HTTP request for css files and not for js ones.
Note, that if, for some reason, the js file is evicted from the memory cache and the disk cache you will see an HTTP request for the js files also.
I've got an odd question. Say I have two HTML pages index1.html and index2.html. In both the pages is some jpg image called "Hello". When I use the browser to point to say www.testing.com/index1.html the browser will load index1.html and the image Hello.
Now my question is when I go click on some link in index1.html that takes me to index2.html, will the browser look to go to back to the server to get image Hello or will it use the Hello image used in index1.html?
It depends on the caching headers the server sends out alongside the image.
There are several ways in which caching can be done.
When a resource is served with an expiry date in the future, the browser will use its cached copy until that date is reached (or the cache is emptied or a refresh forced.
Another way is for the server to listen to the If-modified-since request header. The server can then check whether the resource has been modified since that date. If it hasn't, it will return a 304 not modified status; otherwise, the updated resource.
The Apache Caching guide is a (lengthy) introduction to the subject.
To see in your browser what caching rules apply, open its developer tools and look for the "Net" tab. It's a list of all the requests that were made in connection with the current page. It'll tell you whether a resource was loaded from the server, or a cached copy used.
For example, this result on a Stack Overflow image from Chrome's developer tools:
suggests the image was cached. When I click that row, I can switch to the "header" view, where I can see the exact caching instructions the server sends:
It means that as long as the browser has a cached copy of the image, it will keep on using that without ever checking with the server until December 17, 2014.
Different browsers handle this differently. It can also depend on user settings. Users can set the browser to cache nothing if they so desire.
I have a special kiosk-solution with chrome where I need chrome to upon application start, load the start-url from cache, not try to fetch it online.
The reason is that this is, like I said, a kiosk-mode presentation, is is a screen standing in the public that reboots every night, and if the reboot happens while the ISP has downtime on the internet connection, chrome will only show an error page.
If I can get it to load the cached version of the page though, instead of trying to fetch it online, then the last valid version of the page will show, and through some nifty ajax-workings of mine ;) it will automatically update after a while. If THAT update fails, the currently displayed version of the page will remain until a subsequent update succeeds.
See my problem?
In a browser like firefox I could do it by starting the browser in off-line mode and after page load switch it to online-mode. Only FF doesn't work for me in the particulat project, and Chrome doesn't seem to have an off-line mode?
You could use HTML5 Offline Web Applications to accomplish that. It's probably very easy to set up in your case, just add a file like the following to your app's directory:
CACHE MANIFEST
index.html
help.html
style/default.css
images/logo.png
images/backgound.png
NETWORK:
server.cgi
This manifest should contain all the files you'll need to display some useful information and later grab current content via AJAX. There's also a NETWORK section, where you have to specify things that should not be cached (ie the script that delivers your Updates via AJAX).
You can load the manifest file by adding a manifest attribute to your tag (cache-manifest is the name of the file above):
<html manifest="cache-manifest">
Make sure your server delivers the cache manifest with a MIME-type of
text/cache-manifest MIME
Type or copy-paste the below flag setting into the chrome address bar.
chrome://flags/#enable-offline-mode
scroll down to enable offline stale mode.
Restart your browser.
If an offline version of the page is available in the system cache it will load up when you are not connected.
PROBLEM:
Today, we modified a static html web page in a client's website -
we added a couple of images and modified the font. And FTPed the file to client's web server.
We realized we made a mistake with the font-size, corrected it, and FTPed the file again.
Even with a 100 refreshes, the website was displaying only the file (with wrong font) that we had FTPed the first time.
We FTPed the corrected file several times, but the file with the wrong font was the only file being served by the web server.
OUR GUESS:
We think that the web server cached the file that we had FTPed the first time, and is serving it back to us on subsequent requests even though the file had changed.
We tried the following techniques (but were unsuccessful):
We added a parameter to the querystring (?R=33343545)
We tried the technique suggested below - i.e. posting to the webpage in question, but got a "405 Method not allowed. The HTTP verb used to access this page is not allowed."
http://www.mnot.net/blog/2006/02/18/invalidation
Please advise if we were on the right path and if there is anything else that we can try in such situations ?
EDIT:
We would like to find out if there is a way (similar to the 2 methods above) to do it just from the browser..and not touch the settings on the webserver.
Right now I have FILE to allow users to download a file. I don't like that because it forces them to leave the current page and have to reload it (which takes a few seconds) when they want to go back
What is the easiest way to have users download a file?
Have the server send a Content-Disposition: attachment header for the resource in question. It'll then be presented to the user (if they have a sane browser) as a file to "save", rather than as a new page.
For certain types of resources this may mean you write a proxy script in PHP, or perhaps you can configure your webserver to do it.
Use this method:
FILE
The most reliable way to force a download without a server-side solution is to ZIP the file and then link to this archive. Provided that there aren't any limitations on using ZIP files almost every web browser I've encountered will download the file to the user's computer.
If you don't have server-side support, which I am just assuming because you're asking about the HTML and not a scripting language, you cannot always make a file download form the browser. This is because not every web browser is configured the same and the default application on the user's computer may also be set to something you can't predict.
Also, you should use the linking method that #craig1231 suggested so that the file download request is happening in a new window.
FILE
This will cut down on some of the time needed to refresh pages and, in most cases, when the web browser encounters a ZIP file as the URL of the window it will close the window once the file starts to download.