Resource Hints and CloudFlare


#1

I’ve deployed prefetch, dns-prefetch, preconnect and preload via page header links. CloudFlare only supports url prefetching and only on an Enterprise plan. It would be great to see see added support for more resource hints for all plan levels, including free. Regardless, I’m wondering if (i.e. due to caching, server push), CloudFlare interferes with resource hints implemented on the origin server?


#2

I can say that currently you can preload images and CF won’t interfere. For example open your network monitor and load https://www.sparklersonline.com/wedding-sparkler-photo-gallery/ - you’ll see it load about 80 images from the […]/icon/[…] directory. These are preloaded with javascript (and a coldfusion query output mix in there):

$(window).load(function(){
	preload([
		<cfoutput query="photos">
			"/media/photo_gallery/icon/#urlname#.jpg"<cfif photos.recordcount neq photos.currentrow>,</cfif>
		</cfoutput>
	]);
});

function preload(arrayOfImages) {
	$(arrayOfImages).each(function(){
		$('<img/>')[0].src = this;
	});
}

Then when you click an image to launch Lightview, the icons at the bottom of the screen are visible instantly.