I thoroughly check my website 100 times in the past few days with google Pagespeed Insights. On the mobile tests, it keeps pointing out that I have long tasks that take roughly 60-70ms to execute. I think their threshold is 50ms. According to their desktop page, I hardly see such an error.
When I investigated my own javascript code, the code that took the longest was concatenating strings together, and I do this to load the background image to my website.
Here’s what I did.
- I made a picture of a small file size as a background
- I base64 encoded it
- I replaced repeating single characters with function calls to generate the repetition (this alone saved a few hundred bytes).
In the end,the total string size (not including repeats) is about 2000 bytes.
My code is roughly the code shown below (except that actual picture data is used):
function copy(x,y){return x.repeat(y)}
console.time("T");
document.body.style.background="url('data:image/png;base64,UNIZQUE"+copy("A",500)+"UNIAQUE"+copy("B",250)+"UNIQUE"+copy("C",150)+"UNIBQUE')";
console.timeEnd("T");
When I measured the time with my web browser, the log reported a time between 250ms and 300ms.
Is there any way I can cut down the timing of the string processing without inflating the size of the HTML?
I investigated different concatenation methods here on stackoverflow, and the stats reported offered no help because I’m already using the recommended form of concatenation (the +).