PURE CSS ART GALLERY

Loading artwork...

Ben Evans

www.benevansdesign.co.uk

No images, just CSS. Probably doesn't work on Edge and it's going to struggle on mobile

Edit on Codepen

Async `<link>`

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

localStorage

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

Cache-API

Total

…s

Download

Start: …ms

Duration: …ms

Render

Start: …ms

Duration: 1…ms

Browser	OS	Async	localStorage	Cache-API	Tests	Improvement
Chrome 83.0	Windows 10 64-bit	350.73ms	15.26ms	36.46ms	50	-
Chrome 84.0	Windows 10 64-bit	585.09ms	25.36ms	46.99ms	48	-
Chrome 83.0	OS X 10.15.5 64-bit	291.32ms	11.33ms	35.76ms	17	-
Chrome 83.0	OS X 10.15.4 64-bit	277.97ms	11.78ms	43.79ms	9	-
Chrome 83.0	OS X 10.14.6 64-bit	431.49ms	13.92ms	37.07ms	8	-
Safari 13.1.1	iOS 13.5.1	392.57ms	9.14ms	11.43ms	7	-
Chrome 83.0	Linux 64-bit	412.71ms	18.94ms	44.25ms	6	-
Chrome 84.0	Linux 64-bit	341.44ms	14.94ms	27.63ms	6	-
Chrome 84.0	OS X 10.15.6 64-bit	264.11ms	10.46ms	25.15ms	6	-
Chrome 84.0	OS X 10.15.5 64-bit	144.55ms	9.84ms	27.62ms	6	-
Chrome 84.0	OS X 10.14.6 64-bit	402.04ms	12.61ms	34.82ms	6	-
Chrome Mobile 83.0	Android 10	895.08ms	45.48ms	84.14ms	5	-
Chrome Mobile 83.0	Android 9	711.08ms	40.06ms	116.40ms	5	-
Firefox 78.0	Windows 10 64-bit	131.80ms	12.80ms	84.20ms	5	-
Firefox 77.0	OS X 10.15	77.20ms	10.60ms	52.60ms	5	-
Firefox 84.0	Windows 10 64-bit	243.25ms	10.50ms	27.50ms	4	-
Firefox 85.0	Windows 10 64-bit	258.00ms	11.50ms	67.25ms	4	-
Chrome 80.0	Windows 10 64-bit	442.63ms	19.78ms	40.01ms	4	-
Safari 13.1.1	OS X 10.15.5	228.75ms	13.00ms	58.00ms	4	-
Opera 68.0	Windows 10 64-bit	270.15ms	13.05ms	38.68ms	4	-
Firefox 77.0	Windows 10 64-bit	103.50ms	13.75ms	57.00ms	4	-
Firefox 78.0	Linux 64-bit	508.00ms	18.75ms	70.75ms	4	-
Firefox 77.0	Ubuntu 64-bit	134.00ms	29.00ms	50.33ms	3	-
Chrome Mobile 83.0	Android 8.1.0	396.03ms	46.00ms	90.77ms	3	-
Firefox 79.0	Windows 10 64-bit	180.67ms	30.67ms	80.00ms	3	-
Chrome 84.0	Windows Server 2008 R2 / 7 64-bit	319.45ms	16.05ms	79.64ms	3	-
Chrome Mobile 84.0	Android 10	673.67ms	32.43ms	70.97ms	3	-
Chrome 84.0	OS X 10.13.6 64-bit	311.69ms	16.51ms	25.49ms	3	-
Firefox 79.0	Ubuntu 64-bit	91.33ms	15.67ms	37.67ms	3	-
Firefox 83.0	Windows 10 64-bit	65.00ms	10.33ms	29.00ms	3	-
Firefox 84.0	OS X 10.15	183.00ms	10.50ms	22.00ms	2	-
Chrome 57.0	Linux 64-bit	141.65ms	14.49ms	27.07ms	2	-
Safari 14.0.3	iOS 14.4	132.00ms	5.50ms	19.50ms	2	-
Android Browser 4.0	Android 9	383.95ms	40.75ms	83.45ms	2	-
Chrome 81.0	Linux 64-bit	274.35ms	21.70ms	46.31ms	2	-
Chrome 81.0	Windows 10 64-bit	428.14ms	21.06ms	75.40ms	2	-
Firefox 76.0	Windows 10 64-bit	138.50ms	14.50ms	28.50ms	2	-
Safari 13.1	OS X 10.15.4	212.50ms	6.50ms	24.00ms	2	-
Chrome Mobile 81.0	Android 9	490.65ms	42.95ms	82.70ms	2	-
Chrome 83.0	Windows Server 2008 R2 / 7 64-bit	213.57ms	20.70ms	25.75ms	2	-
Chrome 83.0	OS X 10.13.6 64-bit	387.80ms	15.78ms	83.14ms	2	-
Chrome 85.0	Windows 10 64-bit	870.79ms	14.80ms	34.84ms	2	-
Chrome Mobile 83.0	iOS 13.5	929.50ms	12.50ms	16.50ms	2	-
Firefox 77.0	Linux 64-bit	260.00ms	36.00ms	144.00ms	2	-
Safari 14.0	iOS 14.0	156.00ms	9.50ms	11.00ms	2	-
Firefox 80.0	Windows 10 64-bit	139.00ms	17.00ms	19.00ms	2	-
Firefox 80.0	OS X 10.15	339.50ms	15.50ms	150.50ms	2	-
Opera 69.0	Windows 10 64-bit	498.92ms	39.74ms	59.46ms	2	-
Chrome Mobile 84.0	Android 9	529.80ms	45.85ms	83.55ms	2	-
Safari 14.0	OS X 10.15.6	127.50ms	10.50ms	17.00ms	2	-