elementor / elementor

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.
https://elementor.com/
GNU General Public License v3.0
6.58k stars 1.42k forks source link

📊 🚀 Dynamic code loading in responsive mode / Performance improvements #19048

Open Michaelgimii opened 2 years ago

Michaelgimii commented 2 years ago

Prerequisites

What problem is your feature request going to solve? Please describe.

If the content on the website is different on the tablet and mobile, we have to do one design for the desktop, and one design for the mobile and tablet. So, we have to hide some parts for the desktop and on the other hand, we have to hide some parts for the tablet and mobile. The problem is that if we add content and hide that content on the desktop, if we view the website with the desktop, the hidden content codes will still be loaded and this will greatly affect this performance.

To take a closer look at this, I created a test website. On this website, I added 14 product carousels. Since the carousel style was different on desktops and mobiles, I dedicated 7 carousels to the desktop, and 7 carousels to tablets and mobiles. (I actually hid the carousels on the tablet and mobile. Via the responsive section in Advanced Settings) In this case, the result of google page speed was 55. (For performance) After that, I deleted all the mobile and tablet carousels and assigned the desktop carousels to both the desktop and the mobile and tablet. (That is, there were only 7 carousels) This time the Google page speed result reached 85!

Describe the solution you'd like

If we hide content for the desktop, its code will not load on the desktop. Also, if we hide content inside the tablet or mobile, its codes will not be loaded on the tablet and mobile. In general, code should be loaded where it is displayed. If they are hidden, there is no reason to load the code. This severely impairs performance.

Describe alternatives you've considered

No response

Additional context

No response

rami-elementor commented 2 years ago

Hi @Michaelgimii ,

It's an interesting approach but it has it's own issues. What about web creators that need to style pages for both Landscape and for Portrait views? removing the markup based on initial screen size may break sites for sites that style for different screen orientations.