I’m new on bricks and I’m trying to speed up the website we just got from a website developer. I have IT background but not much experience in front-end, that’s why I’m asking for help.
We launched our website 20 days ago and we are having very bad results in terms of performance, even though we got WP Rocket (maybe a mistake) and Cloudflare as a CDN. Also we have our hosting on A2 on a reseller one. Do you recommend to upgrade to a dedicated one?
As you can see we have a header element with a background image wich take 9s to load. The image is converted to webp and reduced, but even though is really slow.
Any idea on how we can improve it? Or maybe there are some good practices to apply on those cases.
First off:
I am useing WP Rocket for most of my Projects and I’m very happy with them, so don’t worry, I don’t think you made a mistake - though i haven’t used Cloudflare as a CDN yet.
Even though your header image is a webp and already compressed, try replacing it on the mobiel breakpoint with a smaller version. You can set different images / smaller versions for each breakpoint, and only the necessary ones will get loaded by the browser.
“Advanced Tipp”: I almost never use css-background images these days, since they are inaccessible to screenreaders (no alt-text) and the default image-functions of wordpress (which bricks uses for e.g. the image-element), sends appropriate sizes for smaller devices out of the box. You can use a default image-element as a “background-image” with the help of css-grid and position:absolute.
Try to load as many scripts as possible as deferred and delay their execution in the WP Rocket settings. Be sure to exclude essential scirpts like your e.g. GDPR-Banner (in my case complianz and bricks-scripts). Otherwise things like your burger menu is not gonna work on initial button-press.
Thank you for your response!
I’ve changed the background image to an image as you suggested and I get some improvement, especially in Desktop. But, it is still loading very slowly in mobile.
Also, I tried to delay as much scripts I could but it is impacting a different part of the website. So I had to exclude lots of them like this:
Excuse me, my bad. It seems that I don’t really removed the background image from all the breakpoints.
Now, It seems that is much better, especially in mobile. In desktop is 2,1s which is not good either bad.
