The site I’m currently working on is rendering so slow it’s unusable currently—any insights into why?
I read @peej 's topic concerning the blur filter being a very CPU-intensive filter to run in browsers, but even after applying the filter to the parent class across all the elements it’s used on, the site is still unstable when trying to view across browsers and devices.
Here’s my read-only link:
Any help here is appreciated, as I’m a designer by trade.
Thanks!
It would be helpful if you could share a published URL to the page, so inspection in a browser is possible.
@webdev Apologies for missing this—new here.
Here’s the published development link for the site:
If it’s any help I tried the site on my phone and desktop and it seemed a touch slow but it wasn’t outside the range of the average site IMO. Google PageSpeed gave you a score in the 60’s which isn’t the best, but far from unusable.
Might it be your internet connection?
Hey, thanks so much for taking the time to help—
My current connection is very strong:
482.4 Mbps download, 521.7 Mbps upload speed.
It seems to be having trouble for me across devices (chrome app on ipad and iphone) where, as I’m scrolling down the page, elements are very delayed in loading, resulting in the page appearing blank as I scroll.
It sounds as though you aren’t experiencing this issue though. I’m wondering if it has something to do with the filter: blur() on the page, or the SVG imagery throughout the page(s)?
Hmm. The SVGs are super light weight so I don’t think they would be the issue. An alternative to the blur could be applying a blur to your elements in a program like Figma and exporting them as SVGs. That could reduce the lag if blur is the culprit.
However, I have no delay loading the page. Maybe clear your browser cache and see if that helps?
Diagnosing performance issues on a loaded site can only be done using a browser’s developer tools. Fortunately, there is decent documentation available on them. However, it is non-trivial to figure out what is wrong or where the problem lies.
If that is beyond what you feel you can do, creating a test page or duplicate project and removing suspected problem elements/animations, and testing for a baseline lets you see their impact on the user experience. You can then load things back one at a time and test the reintroduced elements. Through that process, you can deduce where the root problems lie.
No short or easy path here.
@webdev Thanks for the guidance here—really appreciate your time.
I’ll give this approach of copying/reducing elements a try, and see if I can pinpoint the problem.
SOLVED:
The filter: blur() was the issue—I had applied it globally across individual divs on the site, and when I replaced those elements with simple gradient backgrounds, performance improved drastically site-wide.
@Optimus0087 @webdev Thanks for helping take a look at this!