Run a series of performance tests to gather data on SVG rendering and add the result to the documentation

[technopagan]

SVG will very likely take a little longer to render than a base64-encoded raster image. And the Gaussian Blur applied to the simple SVG shapes created by Primitive is probably quite CPU intensive.

Let's run a series of performance tests, ideally on WPT, to compare LQIP raster image rendering performance vs. SQIP rendering performance and also compare CPU utilization.

[axe312ger]

On it: https://github.com/axe312ger/svg-loading-animation

[axe312ger]

This should give first insights -> https://www.webpagetest.org/video/compare.php?tests=180311_3P_9f773f087d147a15afc024baf79af660,180311_V4_d102f7b12f48338f65a9beb7e300f956,180311_MJ_ba24c447b0f39b7106c9107fd08d322f,180311_R4_1bc9120c70d8b2349858da76f7f3cdf2,180311_V7_92b11675be8759a8def165edc0c48bd4

[ChrisRobston]

I have a page where I have a lot of images and SQIP for them. I noticed that page have issues with rendering, especially when I fast scroll it, and especially on mobile. This is caused by this SVG and blur effects that is really CPU intensive.

Is there any workaround? This SQIP technique is so beautiful and I don't want to throw it out because of that glitches. Right now I am using SQIP as an url() for background-image. May be I should use base64 or just insert plain SVG? Will it make difference?

[axe312ger]

You can use css blur but this will round your corners. You may use a wrapping div, set it to overflow: hidden and zoom your sqip by 10% with translate: scale(1.1)

A little bit more ugly but is more performant.

[ChrisRobston]

@axe312ger thanks for tips! For now I decided to detect mobile and not show SQIP for them at all. Mobile layout should be simpler anyway.

One more question, if you please. What about resolution? Does it have any impact in case of SVG? I'm little confused, since 100x100 and 2000x2000 images have same filesize. What about rendering? Dimensions have any impact? (my current SQIP's are pretty big, but I scale them down with CSS since parent element is much smaller, not sure how it performs)

[axe312ger]

Feel free to play with the code in https://github.com/axe312ger/embedded-svg-loading-impact-research.

Maybe create a set of pages using SQIP with blur having 4,6,8,10,15,20,40,60,80 pictures and see how it impacts mobile loading time with mobile devices. Measurements can be done with http://webpagetest.org/