I am using <link rel="preload" href="/my/resources/..." as="..." /> to preload resources. I am wondering if it's possible to preload everything under a specific path without manually enumerating them?
Something like <link rel="preload" href="/my/css/*.css" as="style" /> (this one I already tried, * gets parsed literally and gives 404, but you get the idea).
Related
Various tools (Google Lighthouse, PageSpeed, etc.) suggest preloading key requests via <link rel=preload> to increase web site performance. For static files whose filename is known and does not change everything is clear. However, how can I specify a versioned file (https://www.example.org/primeicons.e12e3d4e5dfc6a78e9ee.ttf) with changing filenames in the link with the preload hint? In my specific case, it is the PrimeIcons font from PrimeNG.
In the absence of working alternatives, I finally changed the value of the outputHashing attribute from all to bundles in the angular.json file, and additionally included <link rel="preload" href="primeicons.ttf" as="font" type="font/ttf" crossorigin> in the <head> section of index.html.
For the assets, which are served without hash now, this may cause a cache issue after re-deploys in production, but I can personally accept that.
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..
We use cloud typography for a selection of web fonts chosen by a designer. The response time is creating a lag that people have begun to notice.
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
Is there a way, while still respecting CT's licencing model to bring these fonts in locally? Or do I switch to standard web fonts?
To sort of explain my answer/comment...
Say you have something like this for example..
<link type="text/css" rel="stylesheet" href="localfolder/main.css" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
<link type="text/css" rel="stylesheet" href="localfolder/other.css" />
<link type="text/css" rel="stylesheet" href="localfolder/again.css" />
<link type="text/css" rel="stylesheet" href="localfolder/some.css" />
<link type="text/css" rel="stylesheet" href="localfolder/thing.css" />
You can change this to something more like...
<link type="text/css" rel="stylesheet" href="localfolder/css.php" />
<link type="text/css" rel="stylesheet" href="//cloud.typography.com/XXXXXXX/YYYY/css/fonts.css" media="all" />
With the php file of css.php being like this
header("Content-type: text/css");
require "localfolder/main.css";
require "localfolder/other.css";
require "localfolder/again.css";
require "localfolder/some.css";
require "localfolder/thing.css";
exit;
Basically this will combine all of your local CSS into a single script, which you can then use a PHP cache control and gzip to ensure your local CSS is sent as quick as possible in a single http/file request
... And your second link for typography tag will start downloading straight away as well
As soon as your first link tag (the css.php) is finished being downloaded/checked.. It will continue with anything else in the head tag until they are all done.
This may work for you, it really does very per site/design.. Basically most browsers will download only so many files at once... refer to Max parallel http connections in a browser? for some more info on this...
--- Another possible option ---
You can load the page without the typography link/tag.. and then add it dynamically via javascript.. see something like this How to load up CSS files using Javascript? for an example..
The side effect here depending on how the site is designed, would be that you might see old/default fonts for a few seconds or something.. But you can hide this from the user with a re-design possibly or some form of loader..
Otherwise the only other option i can think of is to try finding the same font or similar with google fonts https://www.google.com/fonts as they do load quicker in general.. And the advantage of using a google hosted css/js/lib is that alot of users also already have them cached because they are common across alot of other sites.
Hopefully this can give you some idea's or possibly help with a solution, but it is a tricky question and a good one... This is how i would deal with it if i was in the same situation.
I recently started loading stylesheets on my webpages using just // instead of fighting between http:// and https://. E.g.:
<link href="//example.com/styles.css" rel="stylesheet" type="text/css" />
Now I wonder if the same should be done for the link[rel="canonical"] tags. E.g.:
<link rel="canonical" href="//example.com/index.html" />
If you do it, the purpose of rel="canonical" is somewhat defeated, as the page now has two names (one for http:, one for https:). There's nothing prohibiting it, but it's probably not a good idea.
Pick one or the other and make that the canonical URL.