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
Chrome 91.0	Windows 10 64-bit	251.62ms	4.90ms	10.94ms	16	-
Chrome 90.0	Windows 10 64-bit	252.06ms	6.53ms	10.09ms	11	-
Chrome 89.0	Windows 10 64-bit	405.92ms	6.96ms	13.46ms	7	-
Chrome 91.0	OS X 10.15.7 64-bit	414.62ms	3.98ms	10.72ms	6	-
Chrome 90.0	OS X 10.15.7 64-bit	317.50ms	4.95ms	13.33ms	6	-
Chrome 91.0	Linux 64-bit	404.88ms	10.68ms	13.04ms	5	-
null null	null	648.28ms	5.62ms	71.63ms	4	-
Firefox 89.0	Windows 10 64-bit	286.50ms	6.25ms	19.25ms	4	-
Firefox 78.0	Linux 64-bit	237.00ms	11.33ms	127.00ms	3	-
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	-
Safari 14.0.3	OS X 10.15.6	390.00ms	2.00ms	6.50ms	2	-
Firefox 86.0	Windows 10 64-bit	179.00ms	4.00ms	48.50ms	2	-
Firefox 87.0	Windows 10 64-bit	368.00ms	3.50ms	11.50ms	2	-
Chrome 89.0	OS X 10.15.7 64-bit	159.17ms	3.55ms	7.94ms	2	-
Firefox 87.0	Ubuntu 64-bit	311.50ms	9.00ms	19.00ms	2	-
Chrome 90.0	Linux 64-bit	249.27ms	6.41ms	39.71ms	2	-
Safari 14.0.3	iOS 14.4.2	410.00ms	4.00ms	15.00ms	2	-
Chrome Mobile 91.0	Android 10	381.30ms	16.45ms	28.90ms	2	-
Microsoft Edge 18.18362	Windows 10 64-bit	186.20ms	6.30ms	7.00ms	1	-
Firefox 52.0	Windows XP	906.00ms	14.00ms	518.00ms	1	-
Safari 13.0.4	iOS 13.3	270.00ms	8.00ms	253.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 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	-
Safari 14.0.1	OS X 10.15.6	118.00ms	4.00ms	11.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	-
Safari 14.0.2	OS X 10.15.6	233.00ms	8.00ms	20.00ms	1	-
Firefox 84.0	Ubuntu 64-bit	220.00ms	8.00ms	37.00ms	1	-
Safari 8+	iOS 14.4	229.00ms	3.00ms	10.00ms	1	-
Chrome Mobile 87.0	iOS 14.4	153.00ms	3.00ms	18.00ms	1	-
Safari 14.0.3	OS X 10.15.7	203.00ms	3.00ms	8.00ms	1	-
Safari 14.0.3	OS X 10.14.6	637.00ms	3.00ms	8.00ms	1	-
Chrome 89.0	OS X 10.14.6 64-bit	112.83ms	3.18ms	6.04ms	1	-
Chrome 89.0	Windows Server 2008 R2 / 7 64-bit	1544.21ms	6.78ms	11.40ms	1	-
Chrome 89.0	OS X 11.2.3 64-bit	180.35ms	2.92ms	6.01ms	1	-
Chrome 89.0	OS X 11.2.2 64-bit	258.79ms	5.66ms	33.15ms	1	-
Chrome 89.0	OS X 11.2.0 64-bit	167.43ms	3.80ms	8.80ms	1	-