I was asked a question in an interview "if a website request is made in browser, its response including html, images, js files are coming to the browser in a single round trip or multiple internal round trips with server?" and interviewer told that it is done through multiple round trips (internally).
However I am not convinced, because wherever I search and i get the answer as a single response. Any help to understand it better?
If you look inside a html file you'll find references to external resources like
<img src="{name of image file etc}"/>
<link rel="stylesheet" href="[filename of stylesheet]" />
<script src="..." />
These are some elements within a html file that trigger multiple requests.
So a request to a web page may appear like a single response, it's actually an aggregate response - made up of lots of resource responses, such as stylesheets, images and javascript files.
Related
I have a static only site which is hosted on Google App Engine. Infront of this sits Cloudflare CDN.
I have ran Googles Page insights to give me an idea how my website is performing, it is not performing well according to Google. I want Google to see it is performing well for SEO purposes.
This is the report I get from Google:
2 types of recommendations come:
1) Eliminate render-blocking JavaScript and CSS in above-the-fold content
Show how to fix
2) Leverage browser caching
For problem 1 I have tried many things I have read on Google. I have tried adding 'aync defer' to the link attribute. I have tried to make the media = print so that the browser would first render the html then apply the css later. I have tried moving the links to the stylesheets into different locations around the html document. Essentially I have tried to follow this: https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery.
As of right now my html page (my website is just on static html page) structure looks like this:
<html>
<head>
<!-- all links/references to css files and javascript files -->
</head>
<body>
</body>
</html>
My second issue is browser caching which I do not understand why I am getting this error. Google App engine caches the files and then on top of that Cloudflare CDN sets the cache headers (and also gzip) on the documents so that the browser caches it (below is the Cloudflare caching components turned on).
I can see the browser is caching the static files and using those cached files in chrome tools when I run the page:
This is really the first time I have created a production static website so I may be misunderstanding many things, but I am looking how eliminate those 2 issues.
Cheers
I don't know if google is measuring this but it is often advised to load Bootstrap and Jquery from the following addresses as they are used by a lot of website and hence are already in browsers caches even if they never visited your website. (The same can certainly be found for font-awesome).
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/YOUR_BOOTSTRAP_VERSION/js/bootstrap.min.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/YOUR_JQUERY_VERSION/jquery.min.js"></script>
I'm working on a large asp.net web project that has had a number of different developers/consultants making changes to it over the last few years. I've noticed that depending on the developer, paths to images and other static content may contain the correct casing, all lower case, or something completely random. The browser appears to be making multiple requests for the same asset due to the difference in casing. For example -
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="http://cdn.sstatic.net/stackoverflow/img/sprites.png" />
<img src="http://cdn.sstatic.net/stackoverflow/Img/sprites.png" />
</body>
</html>
Aside from searching for every image in the project and normalizing the casing, is there anything that can be done here? Perhaps something I can put in the page response headers to tell the browser to ignore casing, etc.
Well, the browser (it's not just Chrome that does it, any browser that doesn't is buggy) has to do this because there's no way for it to know that you happen to be using a case-insensitive mapping, so <http://cdn.sstatic.net/stackoverflow/img/sprites.png> and <http://cdn.sstatic.net/stackoverflow/Img/sprites.png> are completely different URIs.
There's a few things you can do.
First find-replace those that are:
Particularly commonly used.
Particularly heavy files.
Particularly commonly mis-spelt.
Not likely to result in you find-replacing something that ruins unrelated code.
Another thing you can do is to force canonicalisation of case in a handler that when invoked for a URI that doesn't match your case-canonicalisation rules, 301's to the form that does. This means that rather than grab 3 different 10kb images you'll grab 1 10kb image and have 2 or 3 redirects of a couple-hundred bytes. That said, below a certain file size then cost of an extra request out-weighs the saving.
Finally you can use a filter (a stream object that Response.Filter is set to, that writes to the previous value of Response.Filter) or code in the PreRender step that scans for local URIs (if you change the case of URIs on other sites you could result in 404s) and outputs them correctly.
How should I reference my css file (which is in the non-secure area) from a webpage in the secure area. I've considered duplicating it (moving one in to the secure area) but this seems very inefficient.
Any advice much appreciated.
(p.s. there will most likely be a few follow up questions ha ha)
You can always avoid the issue by using a relative/rooted path:
<link rel="stylesheet" href="/css/screen.css">
If you must use a full URL, I'm not sure why you can't use the https protocol (which is the correct solution), but there's one more option: don't specify a protocol at all.
<link rel="stylesheet" href="//example.com/css/screen.css">
http://paulirish.com/2010/the-protocol-relative-url/
If the browser is viewing that current page in through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll typically* request it with HTTP. This prevents that awful "This Page Contains Both Secure and Non-Secure Items" error message in IE, keeping all your asset requests within the same protocol.
However:
Caveat: When used on a <link> or #import for a stylesheet, IE7 and IE8 download the file twice. All other uses, however, are just fine.
So if you must specify a full URL, the best/proper way is this:
<link rel="stylesheet" href="https://example.com/css/screen.css">
There's really no alternative. Relative paths to images and resources in the CSS file itself should work just fine with either approach, and won't trigger the security error. If you need absolute URLs in the CSS file, then you can use the same trick.
Is there a way to use an image with an app_offline file? I'd like to keep the app_offline looking like the rest of the website - same header, etc, which includes an image.
I did try finding a way to do this but I can't seem to do so. The forum posts that I've ran across say it's not possible, since the app_offline forces all requests (even those for images and css) to redirect to the app_offline page, but I'm hoping that someone here will have an answer. Obviously, I can embed the css into the HTML, rather than pointing to the site's .css file, but I'm not sure how to get around the image issue.
You could try base64 encoding the image, ie.
<img src="data:image/gif;base64,BASE64STRINGHERE" width="80" height="15" />
The reason you need to do it like this is that IIS sees the image as a request and app_offline.htm being present in the root is telling IIS to redirect ALL requests therefore this includes any MIME types from images to music etc
I am using WebRequest to retrieve a html page from the web and then displaying it using Response.Write.
The resulting page looks different from the original mostly in font and layout.
What could be the possible reasons and how to fix it?
Most probably, the HTML you retrieve contains relative URLs for loading images, stylesheets, scripts. These URLs are not correct for the page as you serve it from your site. You can fix this by converting all of the relative URLs into absolute URLs or by including a BASE tag in the head of the HTML, pointing to the URL of the original page.
Be advised though that deeplinking to images and other resources is considered bad practice. The source site may not like what you are doing.
The reason might be that the original html page contains relative (to the original site) paths to the stylesheet files so when you render the html in your site it cannot find the css.
Does the remote web site include CSS, JavaScript, or images?
If so, are any of the above resources referenced with relative links (i.e.: /javascript/script.js)?
If so, when the browser receives the HTML from your server, the relative links (which were originally relative to the source server) are now relative to your server.
You can fix this by either changing the HTML to use absolute links (i.e.: http://www.server.com/javascript/script.js). This is more complicated than it sounds: you'll need to catch <link href="..."/>, <a href="..."/>, <form action="..."/>, <script src="..."/>, <img src="..."/>, etc.
A more limited solution would be to place the actual resources onto your server in the same structure as they exist on the original server.
The remote site might look at the User-Agent and serve different content based on that.
Also, you should compare the HTML you can retrieve from the remote site, with the HTML you get by visiting the site in a browser. If they are not different, you are probably missing images and/or css and javascript, because of relative paths, as already suggested in another answer.