Merge pull request #798 from Codeinwp/improve_lcp

Improve LCP by adding srcset for non-lazyloaded images

Author: selul

inc/lazyload_replacer.php

@@ -196,12 +196,6 @@ public function init() {
 			return;
 		}
 
-		add_filter(
-			'max_srcset_image_width',
-			function () {
-				return 1;
-			}
-		);
 		self::$is_lazyload_placeholder = self::$instance->settings->get( 'lazyload_placeholder' ) === 'enabled';
 
 		add_filter( 'optml_tag_replace', [ $this, 'lazyload_tag_replace' ], 2, 6 );
@@ -322,6 +316,12 @@ public function lazyload_tag_replace( $new_tag, $original_url, $new_url, $optml_
 			$new_tag,
 			1
 		);
+
+		// We remove srcset and sizes attributes since our lazyload does not need them.
+		$pattern = '/\s+(?:srcset|sizes)=("[^"]*"|\'[^\']*\'|\\\\"[^\\\\"]*\\\\")/i';
+		$new_tag = preg_replace( $pattern, '', $new_tag );
+
+		// We keep this for srcset lazyload compatibility that might break our mechanism.
 		$new_tag = str_replace( 'srcset=', 'old-srcset=', $new_tag );
 
 		if ( ! $this->should_add_noscript( $new_tag ) ) {

tests/test-lazyload.php

@@ -112,7 +112,7 @@ public function test_lazyload_tag_sanity_check() {
 		$this->assertStringContainsString( '</noscript></a>', $replaced_content, 'Noscript tag should be inside the wrapper tag and after image tag' );
 		$this->assertStringNotContainsString( '"http://example.org', $replaced_content );
 		$this->assertEquals( 1, substr_count( $replaced_content, 'q:eco' ) );
-		$this->assertEquals( 2, substr_count( $replaced_content, 'old-srcset' ) );
+		$this->assertEquals( 1, substr_count( $replaced_content, 'old-srcset' ) );
 
 	}
 	public function test_lazyload_skip_standard_class() {

tests/test-media.php

@@ -229,7 +229,8 @@ public function test_retryable_error_and_error() {
 	public function test_duplicated_image() {
 
 		$content =  wp_get_attachment_image( self::$sample_attachement_upper_case );
-		$this->assertEquals(  "<img width=\"150\" height=\"150\" src=\"https://example.i.optimole.com/w:150/h:150/rt:fill/g:ce/q:mauto/process:". self::$sample_attachement_upper_case ."/id:579c7f7707ce87caa65fdf50c238a117/http://example.org/1PQ7p-2.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" />", $content);
+		$this->assertStringContainsString(  "src=\"https://example.i.optimole.com/w:150/h:150/q:mauto/rt:fill/g:ce/process:". self::$sample_attachement_upper_case ."/id:579c7f7707ce87caa65fdf50c238a117/http://example.org/1PQ7p-2.jpg\" ", $content);
+
 	}
 	public function test_page_images_process() {
 		Optml_Tag_Replacer::$lazyload_skipped_images = 4;
@@ -256,7 +257,7 @@ public function test_page_images_process() {
 			)
 		);
 		$replaced_content = Optml_Manager::instance()->replace_content( $content );
-		$this->assertEquals(  3, substr_count($replaced_content, 'https://my_costum_domain'));
+		$this->assertEquals(  7, substr_count($replaced_content, 'https://my_costum_domain'));
 		$this->assertStringContainsString( '/w:150/h:150/q:75/rt:fill/g:ce/f:best/id:579c7f7707ce87caa65fdf50c238a117/http://example.org/sample-test.jpg', $replaced_content );
 		$this->assertStringContainsString( '/w:150/h:150/q:eco/f:best/id:579c7f7707ce87caa65fdf50c238a117/http://example.org/sample-test.jpg', $replaced_content );
 	}
@@ -331,7 +332,9 @@ public function test_custom_post_image_extraction () {
 	public function test_special_characters_upload() : void {
 		$special_character_attachment = self::factory()->attachment->create_upload_object( OPTML_PATH . 'tests/assets/special-characters-•⋿∀.jpg' );
 		$content = wp_get_attachment_image( $special_character_attachment );
-		$this->assertEquals(  "<img width=\"150\" height=\"150\" src=\"https://example.i.optimole.com/w:150/h:150/rt:fill/g:ce/q:mauto/process:". $special_character_attachment ."/id:579c7f7707ce87caa65fdf50c238a117/http://example.org/special-characters-•⋿∀.jpg\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" decoding=\"async\" />", $content );
+
+		$this->assertStringContainsString(  "src=\"https://example.i.optimole.com/w:150/h:150/q:mauto/rt:fill/g:ce/process:". $special_character_attachment ."/id:579c7f7707ce87caa65fdf50c238a117/http://example.org/special-characters-•⋿∀.jpg\" ", $content );
+
 	}
 
 	/**