PURE CSS ART GALLERY

Loading artwork...

Lynn Fisher

lynnandtonic.com

Normally I illustrate with a single div, but this one has 50! Whew.

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
Firefox 82.0	Windows 10 64-bit	359.67ms	11.33ms	43.00ms	3	-
Chrome 83.0	Windows 10 64-bit	213.82ms	10.35ms	27.56ms	2	-
Firefox 81.0	Windows 10 64-bit	215.00ms	10.50ms	75.50ms	2	-
Firefox 82.0	OS X 10.14	208.00ms	4.50ms	119.00ms	2	-
Safari 14.0.1	iOS 14.2	210.50ms	8.50ms	10.00ms	2	-
Microsoft Edge 18.18362	Windows 10 64-bit	186.20ms	6.30ms	7.00ms	1	-
Chrome Mobile 81.0	Android 9	669.90ms	22.20ms	35.70ms	1	-
Chrome 83.0	Linux 64-bit	109.49ms	9.43ms	23.67ms	1	-
Firefox 78.0	Linux 64-bit	164.00ms	10.00ms	47.00ms	1	-
Firefox 79.0	Windows 10 64-bit	85.00ms	14.00ms	14.00ms	1	-
Safari 14.0	iOS 14.0	191.00ms	13.00ms	9.00ms	1	-
Safari 13.1.2	iOS 13.6.1	499.00ms	11.00ms	6.00ms	1	-
Firefox 83.0	Windows 10 64-bit	46.00ms	7.00ms	17.00ms	1	-
Firefox Mobile 82.0	Android 10	119.00ms	9.00ms	48.00ms	1	-
Firefox 83.0	Linux 64-bit	849.00ms	31.00ms	319.00ms	1	-
Safari 14.0	iOS 14.1	266.00ms	7.00ms	31.00ms	1	-
Firefox Mobile 83.0	Android 10	110.00ms	10.00ms	24.00ms	1	-
Chrome Mobile 86.0	iOS 14.2	293.00ms	6.00ms	17.00ms	1	-
Safari 8+	iOS 14.2	237.00ms	9.00ms	11.00ms	1	-
Chrome 83.0	OS X 10.15.7 64-bit	161.88ms	4.39ms	6.51ms	1	-