Answer the question
In order to leave comments, you need to log in
Answer the question
In order to leave comments, you need to log in
First of all, you need to profile the render load through a profiler, "twitching" means fps drawdown, and fps drawdown means that main thread tasks don't fit into 16ms to provide 60fps.
If you open the site in Firefox, it immediately indicates a possible cause: "This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla /Perform... "
A quick look shows that this is indeed the case - you have included jquery.sticky.js , created already in 2012 and implementing what is now done through position: sticky or IntersectionObserverby attaching a handler to the event scroll
. This leads to the fact that for every movement of the page, a JavaScript handler is launched and creates changes in the DOM that lead to the need to recalculate styles, and even layout'a.
Changes to the DOM are generally quite an expensive operation, and layout recalculation is even more so, so it is logical that on weaker CPUs of mobile devices this does not fit into the time budget.
In general, the reason for the rather poor performance is that you took the path of least resistance by taking a ready-made theme for WordPress. They are usually heavily overloaded with scripts due to the desire to make them flexible and versatile, which, of course, works to the detriment of performance.
So start by replacing jquery.sticky.js with a normal solution, and then double-check the result with a profiler and see what else you can throw away. Your page visually clearly does not require those 900kb of scripts that you load on it.
Check if you have a lot of elements with absolute positioning, most often their excess is the cause of twitching on mobile devices.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question