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 91.0	Windows 10 64-bit	355.29ms	16.11ms	29.76ms	42	-
Chrome 90.0	Windows 10 64-bit	367.94ms	14.58ms	42.56ms	38	-
Chrome 89.0	Windows 10 64-bit	345.74ms	21.34ms	33.90ms	23	-
Chrome 91.0	OS X 10.15.7 64-bit	295.01ms	11.99ms	26.81ms	20	-
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	-
Firefox 88.0	Windows 10 64-bit	326.44ms	9.67ms	21.22ms	9	-
Safari 14.0.3	OS X 10.15.6	226.75ms	6.63ms	18.38ms	8	-
Chrome 83.0	OS X 10.14.6 64-bit	431.49ms	13.92ms	37.07ms	8	-
Chrome 84.0	Linux 64-bit	354.53ms	14.28ms	27.11ms	7	-
Chrome 90.0	OS X 10.15.7 64-bit	293.97ms	10.30ms	27.71ms	7	-
Safari 13.1.1	iOS 13.5.1	392.57ms	9.14ms	11.43ms	7	-
Chrome 91.0	Linux 64-bit	530.43ms	24.87ms	36.67ms	7	-
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 89.0	OS X 10.15.7 64-bit	265.20ms	16.68ms	45.30ms	6	-
Firefox 89.0	Windows 10 64-bit	744.17ms	98.00ms	130.83ms	6	-
Safari 14.0.3	iOS 14.4.2	152.67ms	7.50ms	20.17ms	6	-
Chrome 83.0	Linux 64-bit	412.71ms	18.94ms	44.25ms	6	-
Firefox 78.0	Linux 64-bit	480.67ms	24.67ms	118.50ms	6	-
Firefox 84.0	Windows 10 64-bit	225.20ms	9.80ms	37.40ms	5	-
Chrome 89.0	OS X 11.2.3 64-bit	225.87ms	10.37ms	28.15ms	5	-
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 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	-
Firefox 87.0	Windows 10 64-bit	237.25ms	9.00ms	18.00ms	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	-
Chrome 90.0	Linux 64-bit	504.49ms	41.86ms	152.08ms	4	-
Firefox 77.0	Windows 10 64-bit	103.50ms	13.75ms	57.00ms	4	-
Chrome Mobile 90.0	Android 10	623.08ms	36.38ms	91.22ms	4	-
Chrome Mobile 90.0	Android 11	275.33ms	17.58ms	39.30ms	4	-
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	-
Safari 14.0	OS X 10.15.6	155.67ms	8.67ms	14.00ms	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 86.0	Windows 10 64-bit	379.33ms	15.00ms	95.00ms	3	-
null null	null	685.98ms	18.01ms	28.87ms	3	-
Chrome Mobile 89.0	Android 10	426.77ms	35.73ms	78.30ms	3	-
Opera 75.0	Windows 10 64-bit	683.56ms	47.32ms	101.49ms	3	-
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	-