#3167034 "Leverage the 'loading' html attribute to enable lazy-load by default for images"
Related #3167034
Merge request reports
Activity
added 1 commit
82 82 if ($node->nodeName == 'img') { 83 83 // Without dimensions specified, layout shifts can occur, 84 84 // which are more noticeable on pages that take some time to load. 85 list($width, $height) = getimagesize($file->getFileUri()); 86 $node->setAttribute('width', $width); 87 $node->setAttribute('height', $height); 88 $node->setAttribute('loading', 'lazy'); 85 // As a result, only mark images as lazy load that have dimensions. 86 [$width, $height] = @getimagesize($file->getFileUri()); 87 if ($width != NULL && $height != NULL) { changed this line in version 7 of the diff
added 1 commit
- dab23783 - Issue 3167034: Addressing Google and heddn feedback
79 79 $file = $this->entityRepository->loadEntityByUuid('file', $uuid); 80 80 if ($file instanceof FileInterface) { 81 81 $node->setAttribute('src', $file->createFileUrl()); 82 if ($node->nodeName == 'img') { 83 // Without dimensions specified, layout shifts can occur, 84 // which are more noticeable on pages that take some time to load. 85 // As a result, only mark images as lazy load that have dimensions. 86 [$width, $height] = @getimagesize($file->getFileUri()); -
Wondering me if
$image = \Drupal::service('image.factory')->get($file->getFileUri()); if ($image->isValid()) { $width = $image->getWidth(); $height = $image->getHeight(); }gets the same or better performance results.
Edited by Edys Meza -
@gaelg thanks for the clarification. @lucashedding i think we should use image factory instead.
changed this line in version 9 of the diff
added 1 commit
- 470e1d71 - Issue 3167034: use isset intead of attributeExists
851 851 $variables['attributes'][$key] = $variables[$key]; 852 852 } 853 853 } 854 855 // Without dimensions specified, layout shifts can occur, 856 // which are more noticeable on pages that take some time to load. 857 // As a result, only mark images as lazy load that have dimensions. 858 if (isset($variables['width'], $variables['height']) && !isset($variables['loading'])) { -
I did quite the same thing in native_lazy_loading_preprocess_image() (contrib module), but I also checked for emptiness, because I had some use case where it was set but equal to ''. I don't remember exactly why.
-
Nothing in core should be adding the empty loading attribute. Do we really need to do the empty check on it? It seems like something a contrib or custom code is introducing garbage data.
Edited by Lucas Hedding changed this line in version 10 of the diff
added 1 commit
- 77bdbd02 - Issue 3167034: tests loading attribute value can be overriden
26 /** 27 * Tests that loading attribute is enabled for images. 28 */ 29 public function testImageLoadingAttribute() { 30 // Get page under test. 31 $this->drupalGet('image-lazy-load-test'); 32 33 // Loading attribute is added when image dimensions has been set. 34 $this->assertSession()->elementAttributeExists('css', '#with-dimensions img', 'loading'); 35 $this->assertSession()->elementAttributeContains('css', '#with-dimensions img', 'loading', 'lazy'); 36 37 // Loading attribute with lazy default value can be overriden. 38 $this->assertSession()->elementAttributeContains('css', '#override-loading-attribute img', 'loading', 'eager'); 39 40 // Without image dimensions loading attribute is not generated. 41 $this->assertSession()->elementAttributeContains('css', '#without-dimensions img', 'alt', 'Image lazy load testing image without dimensions'); changed this line in version 12 of the diff