elementor / elementor/elementor

📊 🐞 Bug Report: PERFORMANCE ISSUE: Images are forced to load, by passing even browser default lazy loading

Open
#21,996 0 comments 0 reactions 0 assignees View on GitHub
bug mod/b* product/pro type/performance widget/pro/loop-builder
Dominant language
PHP
Stars
7.1k
Forks
1.6k
Avg merge
1d 5h
Merged PRs (30d)
193

Description

### Prerequisites

- [X] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
- [X] The issue still exists against the latest stable version of Elementor.

### Description

With the Loop Grid element, any <img> element inside is forced to load via JavaScript, greatly decreasing page load speed. If the loop grid is set to display 30 listing for instance, it will force the loading of all 30 images directly on page load, bypassing even the browser default lazy loading feature (and any and all from third party lazy loaders).

Test it yourself on this page here : https://templates.element.how/elementor-loop-grid-lazy-loading-test/

On the page I have one loop grid with 12 listings, and one normal image below that. the normal image behaves normally (isn't forced through JS to load early). The 12 images inside the loop grid are loaded on page load from imagesloaded.js

![image](https://user-images.githubusercontent.com/39132584/230977148-ef5d85db-f3a4-4150-8fc9-677e837deeb3.png)

![image](https://user-images.githubusercontent.com/39132584/230977597-c68e2564-3baa-4926-992f-cf290fad1de2.png)

### Steps to reproduce

1. Add an <img> element to show feature image inside a loop template
2. Show the loop template in a loop grid, very far down on a page
3. Check the network tab. all images were forced to load early

### Isolating the problem

- [X] This bug happens with only Elementor plugin active (and Elementor Pro).
- [X] This bug happens with a Blank WordPress theme active ([Hello theme](https://wordpress.org/themes/hello-elementor/)).
- [X] I can reproduce this bug consistently following the steps above.

### System Info


== Server Environment ==
Operating System: Linux
Software: LiteSpeed
MySQL version: MariaDB Server v10.3.29
PHP Version: 7.4.26
PHP Memory Limit: 512M
PHP Max Input Vars: 10000
PHP Max Post Size: 135M
GD Installed: Yes
ZIP Installed: Yes
Write Permissions: All right
Elementor Library: Connected

== WordPress Environment ==
Version: 6.1.1
Site URL: https://templates.element.how
Home URL: https://templates.element.how
WP Multisite: No
Max Upload Size: 128 MB
Memory limit: 512M
Max Memory limit: 512M
Permalink Structure: /%postname%/
Language: en-CA
Timezone: -5
Admin Email: adminmax@gmail.com
Debug Mode: Inactive

== Theme ==
Name: Hello Elementor Child
Version: 1.0.1
Author: Elementor Team
Child Theme: Yes
Parent Theme Name: Hello Elementor
Parent Theme Version: 2.3.1
Parent Theme Author: Elementor Team

== User ==
Role: administrator
WP Profile lang: en_CA
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

== Active Plugins ==
Code Snippets
Version: 3.3.0
Author: Code Snippets Pro

Elementor
Version: 3.12.1
Author: Elementor.com

Elementor Pro
Version: 3.12.1
Author: Elementor.com

Essential Addons for Elementor
Version: 5.6.4
Author: WPDeveloper

HappyFiles Pro
Version: 1.8
Author: Codeer

Safe SVG
Version: 2.1.0
Author: 10up

ShortPixel Image Optimizer
Version: 5.2.1
Author: ShortPixel - Convert WebP/AVIF & Optimize Images

Simple CSS Grid For Elementor
Version: 1.0.0
Author: Maxime

Swift Performance Lite
Version: 2.3.6.5
Author: SWTE

Wordfence Security
Version: 7.9.2
Author: Wordfence

WPvivid Backup Plugin
Version: 0.9.85
Author: WPvivid Team

== Must-Use Plugins ==
closte-requirements.php
Version:
Author:

Swift Performance early loader
Version:
Author:

== Features ==
Custom Fonts: 0
Custom Icons: 0

== Integrations ==

== Elementor Experiments ==
Optimized DOM Output: Active
Improved Asset Loading: Inactive by default
Improved CSS Loading: Inactive by default
Inline Font Icons: Inactive by default
Accessibility Improvements: Active
Additional Custom Breakpoints: Active by default
admin_menu_rearrangement: Inactive by default
Flexbox Container: Active
Upgrade Swiper Library: Active
Default to New Theme Builder: Inactive
Editor Top Bar: Inactive by default
Landing Pages: Active by default
Nested Elements: Active
Lazy Load Background Images: Active
Page Transitions: Active by default
Notes: Active by default
Loop: Active
Form Submissions: Active by default
Scroll Snap: Active by default
Menu: Active

== Log ==

Log: showing 20 of 282023-03-14 10:46:23 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.2',
'to' => '3.11.6',
)]
2023-03-29 11:15:05 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.6',
'to' => '3.12.0',
)]
2023-03-29 11:15:19 [info] elementor::elementor_updater Started
2023-03-29 11:15:19 [info] Elementor/Upgrades - _on_each_version Start
2023-03-29 11:15:19 [info] Elementor/Upgrades - _on_each_version Finished
2023-03-29 11:15:19 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.11.5',
'to' => '3.12.0',
)]
2023-03-29 11:15:19 [info] Elementor Pro/Upgrades - _on_each_version Start
2023-03-29 11:15:19 [info] Elementor Pro/Upgrades - _on_each_version Finished
2023-03-29 11:15:19 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.11.5',
'to' => '3.12.0',
)]
2023-03-29 11:15:19 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.6',
'to' => '3.12.0',
)]
2023-03-29 11:15:19 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor Pro',
'from' => '3.11.6',
'to' => '3.12.0',
)]
2023-04-04 12:03:17 [info] elementor::elementor_updater Started
2023-04-04 12:03:17 [info] Elementor/Upgrades - _on_each_version Start
2023-04-04 12:03:17 [info] Elementor/Upgrades - _on_each_version Finished
2023-04-04 12:03:17 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor',
'from' => '3.12.0',
'to' => '3.12.1',
)]
2023-04-04 12:03:17 [info] Elementor data updater process has been queued. [array (
'plugin' => 'Elementor',
'from' => '3.12.0',
'to' => '3.12.1',
)]
2023-04-04 12:14:28 [info] elementor-pro::elementor_pro_updater Started
2023-04-04 12:14:28 [info] Elementor Pro/Upgrades - _on_each_version Start
2023-04-04 12:14:28 [info] Elementor Pro/Upgrades - _on_each_version Finished
2023-04-04 12:14:28 [info] Elementor data updater process has been completed. [array (
'plugin' => 'Elementor Pro',
'from' => '3.12.0',
'to' => '3.12.1',
)]

JS: showing 10 of 10JS: 2023-03-22 18:26:55 [error X 1][https://templates.element.how/wp-admin/load-scripts.php?c=1&loadchunk_0=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,regenerator-runtime,wp-polyfill,wp-&loadchunk_1=hooks&ver=6.1.1:4:51824] Cannot read properties of undefined (reading 'replace')
JS: 2023-03-23 16:48:08 [error X 4][https://templates.element.how/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.11.5:3:1087291] Cannot read properties of null (reading 'getBoundingClientRect')
JS: 2023-03-23 17:15:39 [error X 2][https://templates.element.how/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.11.5:3:656177] elementorFrontend.elements.window.jQuery is not a function
JS: 2023-03-23 17:15:43 [error X 14][https://templates.element.how/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.11.5:2:4825] Cannot read properties of undefined (reading 'attributes')
JS: 2023-03-24 17:15:27 [error X 34][https://templates.element.how/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.11.5:3:791668] Cannot read properties of undefined (reading 'localized')
JS: 2023-03-28 21:14:57 [error X 1][https://templates.element.how/wp-content/plugins/elementor/assets/js/editor.min.js?ver=3.11.5:3:542576] Cannot read properties of undefined (reading 'get')
JS: 2023-03-28 21:57:48 [error X 4][https://templates.element.how/wp-content/plugins/elementor-pro/assets/js/preloaded-elements-handlers.min.js?ver=3.11.6:2:54662] undefined is not iterable (cannot read property Symbol(Symbol.iterator))
JS: 2023-03-30 19:16:06 [error X 1][https://templates.element.how/elementor-custom-loop-slider-template/:808:1] swiper is not defined
JS: 2023-04-03 21:49:44 [error X 119][https://templates.element.how/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.12.0:2:1878] Cannot read properties of undefined (reading 'stop')
JS: 2023-04-03 21:49:46 [error X 110][https://templates.element.how/wp-content/plugins/elementor/assets/js/frontend-modules.min.js?ver=3.12.0:2:1923] Cannot read properties of undefined (reading 'start')

PHP: showing 4 of 4PHP: 2023-03-23 11:56:11 [notice X 10][/home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor-pro/modules/theme-builder/classes/conditions-manager.php::168] Undefined index: editor_post_id [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-03-27 05:40:59 [notice X 3][/home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor-pro/core/utils.php::373] Undefined index: name [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2023-03-27 16:27:36 [notice X 5][/home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php::150] Undefined index: condition_type [array (
'trace' => '
#0: /home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(150): Elementor\Core\Logger\Manager -> rest_error_handler()
#1: ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_template_json_item()
#2: /home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(120): class type array_map()
#3: /home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(59): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_templates_json()
#4: /home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor/data/base/endpoint.php(158): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> get_items()
',
)]
PHP: 2023-04-03 11:42:06 [notice X 2][/home/6040e8d4c1ac18116c8a835b/public_html/wp-content/plugins/elementor/core/common/modules/ajax/module.php::175] Undefined index: data [array (
'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

== Elementor - Compatibility Tag ==

Elementor Pro: Incompatible
Essential Addons for Elementor: Compatible
Simple CSS Grid For Elementor: Compatibility not specified

== Elementor Pro - Compatibility Tag ==

Essential Addons for Elementor: Compatible

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.