I want to use the resource hint "prerender" (W3C) to speed up a website, but prerender is depricated in Chrome since v58. I read that NoState-Prefetch should be used instead (Google Dev), but I don't find anything on how to use it.
Does anybody know how I can prerender a site with the current version of Chrome or how to use "NoState-Prefetch"?
I'm grateful for every suggestion. Many thanks in advance.
Prerender is not deprecated, in fact it's part of the w3 standards. Though the standards are clear in that the user agent SHOULD fetch, however later it describes that it May preprocess, and adds a point later that the user agent might decide not to do anything.
Chrome initiated the prerender resource hint, previously it meant that the whole page should be pre-rendered in a hidden renderer process, but currently chrome does NoState-Prefetch which is less powerful than a full render but should still save time - in case the browser actually do it.
You can take a look at the following document to dig deeper, into why chrome changed the implementation of prerender, and when/what does No-State Prefetch do exactly.
To check that the browser did prerender locally:
go to chrome://net-export/ ( this will export a log of all the network activities happening from all chrome windows, apps, and extensions)
go to the website where you want to check prerendering, give it some time to idle and do the prerendering
save the json file from the net export page, and load it into https://netlog-viewer.appspot.com/
After its loaded, check the Prerender page found in the menu in the left side
Related
I am using the following tag to prerender:
<link rel="prerender" href="//address.se/sv/get-started.html">
I am running the website locally at the moment. Is there any test I can run (perhaps via the chrome inspector) to see if my browser finds and prerenders the file?
Yes you can test if prerender is happening locally, though it is little harder and requires tools beyond the regular developers tools.
Notice that at the time this question was asked, prerender was doing something different than what it does now, previously it used to prerender the whole page in a hidden renderer process, now it does something less powerful than that (NoState Prefetch)
To check what has been pre-rendered:
go to chrome://net-export/ ( this will export a log of all the network activities happening from all chrome windows, apps, and extensions)
go to the website where you want to check prerendering, give it some time to idle and do the prerendering
save the json file from the net export page, and load it into https://netlog-viewer.appspot.com/
After its loaded, check the Prerender page found in the menu in the left side
When I'm viewing the downloaded resources for a page in the Chrome web inspector, I also see the HTML/JS/CSS requested by certain extensions.
In the example above, indicator.html, indicator.js and indicator.css are actually part of the Readability Chrome extension, not part of my app.
This isn't too big a deal in this particular situation, but on a more complex page and with several extensions installed, it can get quite crowded in there!
I was wondering if there was a way to filter out any extension-related resources from this list (i.e. any requests using the chrome-extension:// protocol).
Does anyone know how I could achieve this?
Not quite the solution I was after (I'd have preferred a global setting), but there is now a way to filter out requests from extensions, as mentioned by a commenter on the issue I originally opened.
In the network tab filter box, enter the string -scheme:chrome-extension (as shown below):
This is case-sensitive, so make sure it's lowercase. Doing this will hide all resources which were requested by extensions.
Just enter "-f" in Network field
Was having the same question when my extension adds a lot of noise in the network tab.
Some extensions also fire a lot of data like data:text/image etc, you can append more filter with - like:
-scheme:chrome-extension -scheme:data
Another way to get the http/https requests is to just use scheme:https without - because the resources that extensions request are usually from their local bundle:
scheme:https
An Incognito Window, can be configured to include or exclude extensions from the extensions page of Chrome settings.
One alternative is to go to "Network Request blocking" tab and add "chrome-extension:" to the list, thus extension requests will be blocked and coloured red so it's easy to visually filter them out.
you can simply enable this option and requests from extension will be group.
Update: It can only group requests that create by the extension that draw iframe, such as cVim
We're going to create a data-driven mobile HTML5 app. I was thinking we can just access it using the default browser on each platform. I read about caching behavior of browsers on latest versions of iOS and Android, but wasn't able to find any information about the possibility of telling the browser, by using some sort of headers or whatever, to store a particular resource, HTML or JS or CSS or an image, indefinitely in cache until a certain date, for ex. Is that even possible?
The idea here is users open the application regularly but not often. Their browsing will fill the cache with other data; we need to "pin" or "anchor" our app to stay there despite cache being filled, like "higher priority".
Any other suggestions would be welcome (ie., creating a "shell" native app, etc.)
These links answered the question:
http://www.w3schools.com/html/html5_app_cache.asp
http://www.html5rocks.com/en/tutorials/appcache/beginner/#toc-updating-cache
I am trying to understand the lifecycle of an HTML page. I cannot find any good resources on it online. So I opened up the f12 tool in ie and did some experiments on my own. Based on that I have drawn some conclusions, can someone please tell me if I am right?
My observation
1>When a page is requested over HTTP first the HTML skeleton is received by the browser. At this time nothing is displayed to the user.
2>Based on what is in the HTML skeleton some more additional requests are sent out for the resources (external JavaScript,css,images etc)
3>The browser waits until it receives a HTTP status code for the script and css resources.
4>Once the HTTP status code for the css and JavaScript is received, only then the browser starts loading the document top to bottom, executing whatever embedded JavaScript it encounters on the way.
5>If the embedded JavaScript on the top refers to an HTML element on the bottom, the JavaScript will fail.
6>Once the entire document finishes loading, then the jquery event $(document).ready is fired. (That is if I am using JQuery)
7>The browser does not wait for resources other than scripts and css, so resources like images could get loaded later after the page is displayed to the user.
You pretty much got it correct.
But it depends upon the code (especially point 5, 6 and 7). For example, if the JS at the top is within $(document).ready, then it will not fail.
Secondly, I would prefer Firefox F12 or Chrome F12 over IE. They are much much detailed and developer friendly. See the NET tab in them to understand further. It will show you the exact order in which the resources are called and loaded, which is what you were mainly looking for.
Chrome saying while I am accessing my site, after searching I cleaned my code from the site but chrome still showing then I removed all files from my site and just upload index.html (blank file) but warning is still showing.
Chrome warnings will be based on black-lists which record where malware has been found in a site or domain, this isn't a live "scan" and does not necessarily mean that malware is on that page or at that specific time. It is not clear from your question if you've created a new folder and index.html and you are also seeing a malware warning when browsing to that URL, or if you've replaced your site content with an empty folder and index.html and that warning is still showing. Once you have taken the steps to disinfect the site then you can request a review which should help remove the warning http://support.google.com/webmasters/bin/answer.py?hl=en&answer=163633.
The malware warning should be taken seriously even if you are confident in your own site content as crackers use automatic toolkits to find vulnerabilities in websites and inject code into them to infect visitors, as these kits are largely automatic there isn't the protection in obscurity you might otherwise assume.
If you've not been able to find and fix the issue Chrome is warning about, you owe it to your visitors- and your own reputation- to take the site content down until you can resolve the problem.
Google Chrome's malware blacklists should be based on same data used by Google's safebrowsing advisory. You can access this information for a particular site (e.g. stackoverflow.com) via the following url:
http://www.google.com/safebrowsing/diagnostic?site=stackoverflow.com
Just replace the domain with your own and it should give you some indication why your site generated malware warnings in Chrome.
1.In the top-right corner of the browser window, click the Chrome menu Chrome menu.
Select Settings.
Click Show advanced settings.
Under "Privacy," uncheck the box "Protect you and your device from dangerous sites."