Here is my link code and I can not see this Javascript resource load when page refreshed:-
<link rel="preload" href="/dist/build.gbk.js" as="script">
How can I ensure that link worked or not?
Update :
<link rel="preload" href="main.js" as="script">
This means that the browser will preload the JavaScript file, but not actually use it yet.
To use it, you could do this when desired:
var preloadedScript = document.createElement("script");
preloadedScript.src = "main.js";
document.body.appendChild(preloadedScript);
This is useful when you want to preload a script, but then defer executing it until exactly when you need it.
Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content
Related
I preload the stylesheet like this.
<link rel="preload" href="public/style.css" as="style" onload="this.rel='stylesheet'">
Since preload is not supported in all browser, I add follwing at end of body
<link rel="stylesheet" href="public/style.css>
This will load the stylesheet twice. Is there a way to do it better? That is, without making the browser re-parse the stylesheet?
Make sure to unchecked the disable cache while testing in the chrome dev tool. Otherwise, it will not use already preloaded cached links.
With disabled cache:
Without disabled cache:
I'm trying to preload an SVG logo on my blog, but Chrome keeps giving me a bunch of warnings and I don't seem to be able to fix them.
Logo: https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg
Preload link: <link rel="preload" href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg" as="image" type="image/svg+xml" crossorigin="anonymous" />
I'm getting the following warnings in Chrome:
A preload for 'https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.
And:
The resource https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it has an appropriate as value and it is preloaded intentionally.
Any pointers?
Looks like removing the crossorigin attributes fixes it:
<link rel="preload"
href="https://keestalkstech.com/wp-content/uploads/2019/05/ktt-logo.svg"
as="image"
type="image/svg+xml" />
I tried below and works well. Not sure though if it is the best way to do it
fetch('svg-path').then(() => {
// do load it into your dom using any library you use
// and it should load without flickering
})
So far works well for me.
I have a page that embeds another page, let’s call it frame.html:
<iframe src="sub-page.html">
On sub-page.html, it loads some CSS and an image:
<link rel="stylesheet" href="sub-page.css">
<img src="sub-page.svg" alt="Sub-Page">
I at first thought that I could speed up the loading of these sub-subresources by adding <link rel=preload> to frame.html:
<link rel="preload" href="sub-page.css" as="style">
<link rel="preload" href="sub-page.svg" as="image">
…but that doesn’t seem to help, looking at the resulting waterfall graphs.
The specs for preload links seem to emphasize that it’s only for subresources of the current page, but since you can preload font files that are called from a stylesheet, it’s plausible that resources of a frame could also count. Am I missing something, like the correct use of the crossorigin attribute?
Yes.
Turns out I was looking at an old, unpurged version of the page when I was trying my performance tests.
<link rel=preload> absolutely can preload subresources of an <iframe>’d page..
Has anyone tried successfully to reduce loading times of Typekit by using preload or prefetch? i.e.
<link rel='preload' href='...' as='font'>
<!-- and/or -->
<link rel='prefetch' href='...'>
Is it a practical or possible in the current Typekit loading setup?
You could try preloading Typekit's script:
<link rel="preload" href="https://use.typekit.net/[YOUR_KIT_ID].js" as="script">
I've tested this and it does seem to work. The 'loading order' of waterfall changes — the Typekit script moved up to tie second with my main (deferred) javascript file. As for performance, I'm not seeing much improvement — if any at all.
As of today, link rel='preload' is not implemented by any browser.
I have tried using link rel='prefetch', and Chrome did prefetch that font, however, it ignored the prefetched font and downloaded it again when it needed it.
I am working on a project for school and wanted to use the less library. I tried something like
<link rel="stylesheet/less" type="text/css" href="style.less">
but this didn't work, I got the error
XMLHttpRequest cannot load file:/// [..] /style.less. Cross origin requests are only supported for HTTP.
Meaning I basically need to run a server for this implementation. However, since this is supposed to be a stand-alone project for a non-technical class, running a server is out of the question. So, my question is:
How do I use less at document level, the same way one would write the css equivalent
<style>div{color:#F00}</style>?
Searching the google for "document level less" returned no related results.
You can't use LESS at document level. Less is a pre compiler for CSS, so you should use the end product in your site (css). You don't need a webserver to show html + css local in a webbrowser. You can compile your LESS to CSS client side (by including less.js) or server side, the source code bundles a compiler.
Also read: Is there a way to bypass Javascript / jQuery's same origin policy for local access?
for example the file like below works also when i load it from my local files in a webbrowser:
<html>
<head>
<link rel="stylesheet" media="(max-width: 767px)" href="green.less" />
<link rel="stylesheet" media="(min-width: 768px)" href="red.less" />
<script type="text/javascript">less = { env: 'development' };</script>
<script src="less.js" type="text/javascript"></script>
</head>
<body>
<p>color this text</p>
</body>
</html>
update
When you are sure javascript works and less.js loads and you don't see your styles still, their probably will be an error or typo in your LESS files. If there is an error, your LESS file won't compile, so their will be any CSS and you won't see any styling.
By default less.js don't show errors in the browser. Add <script type="text/javascript">less = { env: 'development' };</script> to your source to allow LESS errors shown in your browser (from: https://stackoverflow.com/a/11289000/1596547).
Example: