WordPress.org网站
获取WordPress

使WordPress成为核心

变更集55847


忽略：
时间戳：
2023年5月22日下午07:11:36(13个月（之前）
作者：
弗利克索斯90
消息：

媒体：有条件地跳过循环前图像的延迟加载，以提高LCP性能。

当WordPress 5.9中引入了将可能出现在折叠上方的图像从延迟加载中排除的逻辑时，最初只考虑出现在主查询循环中的图像。然而，很有可能在循环开始之前渲染折叠上方的图像，例如在标题模板部分。

对于主题来说，在标题中显示单个帖子的特色图像是非常常见的。根据2023年2月的HTTP Archive数据，WordPress网站上仍在延迟加载的大多数LCP图像使用wp后图像类，即特征图像。

此变更集增强了中的逻辑wp_get_loading_attr_default（）使用新的WP_Query:：$before_loop属性。

对于区块主题，这在很大程度上已经在[55318]但是，此增强功能以更通用的方式实现了解决方案，从而也改进了经典主题。

道具thekt12、flixos90、spacedmonkey、costdev、zunaid321、mukesh27。
修复#58211。
请参见#53675,#56930。

位置：
大旅行箱
文件夹：
4编辑

图例：

未修改
补充
远离的

  • trunk/src/wp-includes/class-wp-query.php

    55822兰特 55847兰特  
    108108     */
    109109公共$current_post=-1；
     110
     111    /**
     112*调用方是否在循环之前。
     113     *
     114*@自6.3.0起
     115*@var bool
     116     */
     117public$before_loop=true；
    110118
    111119    /**
    … …  
    518526$this->current_post=-1；
    519527$this->in_the_loop=假；
     528$this->before_roop=true；
    520529unset（$this->请求）；
    521530取消设置（$this->帖子）；
    … …  
    36323641
    36333642$this->in_the_loop=true；
     3643$this->before_loop=false；
    36343644
    36353645if（-1==$this->current_post）{//循环刚刚启动。
    … …  
    36723682$this->rewind_posts（）；
    36733683}elseif（0===$this->post_count）{
     3684$this->before_roop=false；
     3685
    36743686            /**
    36753687*如果在后期查询中找不到结果，则激发。

  • trunk/src/wp-includes/media.php

    55843兰特 55847兰特  
    54915491*@自5.9.0起
    54925492 *
     5493*@global WP_Query$WP_Query WordPress查询对象。
     5494 *
    54935495*@param string$context请求“loading”属性值的元素的上下文。
    54945496*@return string | bool默认的“加载”属性值。“lazy”、“eager”或布尔值“false”表示
    … …  
    54965498 */
    54975499函数wp_get_loading_attr_default（$context）{
     5500全局$wp_query；
     5501
    54985502//跳过整个块模板的延迟加载，因为它处理得更精细。
    54995503if（'template'===$context）{
    … …  
    55025506
    55035507//不要在头块模板部分延迟加载图像，因为它们可能位于折叠上方。
     5508//对于经典主题，这是在下面的条件下使用“get_header”操作处理的。
    55045509$header_area=WP_TEMPLATE_PART_area_header；
    55055510if（“template_part{$header_area}”===$context）{
    … …  
    55075512    }
    55085513
    5509     /*
    5510 *跳过帖子内容中以编程方式创建的图像，因为它们需要与其他图像一起处理
    5511 *文章内容中的图片。
    5512 *如果没有这一条款，它们将被计算在下面，这将导致数字倾斜，并可能导致第一个
    5513 *帖子内容图像被延迟加载，只是因为帖子内容中的其他地方有图像。
    5514      */
    5515 if（（'the_post_thumbnail'===$context||'wp_get_attachment_image'===$context）&&doing_filter（'the_content'））{
    5516 返回false；
     5514//对以编程方式创建的图像标记的特殊处理。
     5515if（（“the_post_thumbnail”===$context ||“wp_get_attachment_image”===$context））{
     5516        /*
     5517*跳过帖子内容中以编程方式创建的图像，因为它们需要与其他图像一起处理
     5518*帖子内容中的图片。
     5519*如果没有这一条款，它们就已经被计算在内了，这会使数字倾斜，并可能导致第一个
     5520*由于帖子内容中的其他地方有图片，所以帖子内容图片被延迟加载。
     5521         */
     5522if（doing_filter（'thecontent'））{
     5523返回false；
     5524}
     5525
     5526//有条件地跳过循环之前对图像的延迟加载。
     5527如果(
     5528//仅适用于主查询，但在循环之前。
     5529$wp_query->before_loop&&$wp_cquery->is_main_query（）
     5530            /*
     5531*循环之前、但标头启动之后的任何图像都不应延迟加载，
     5532*除非页脚已经开始，当当前模板
     5533*不包括任何循环。
     5534             */
     5535&&did_action（'get_header'）&&！did_action（'get_footer'）
     5536        ) {
     5537返回false；
     5538}
    55175539    }
    55185540

  • trunk/tests/phpunit/tests/media.php

    55825卢比 55847兰特  
    35603560     */
    35613561公共函数test_wp_get_loading_attr_default（$context）{
    3562 全局$wp_query，$wp_the_query；
    3563 
    35643562//默认返回“lazy”。
    35653563$this->assertSame（'lazy'，wp_get_loading_attr_default（'test'））；
    … …  
    35693567$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
    35703568
    3571         $wp_query=新的wp_query（数组（“post_in”=>数组（self:：$post_ids[“publish”]））);
     3569        $查询=$this->get_new_wp_query_for_published_post();
    35723570$this->reset_content_media_count（）；
    35733571$this->reset_omit_loading_attr_filter（）；
    … …  
    35803578
    35813579//设置为主查询。
    3582             $wp_the_query=$wp_query；
     3580            $this->set_main_query（$query）；
    35833581
    35843582//对于主内容以外的上下文，即使在循环中也会返回“lazy”
    … …  
    36143612     */
    36153613公共函数test_wp_omit_loading_attr_threshold_filter（）{
    3616 全局$wp_query，$wp_the_query；
    3617 
    3618 $wp_query=新wp_query（数组（'post_in'=>数组（self:：$post_ids['publish']））；
    3619 $wp_the_query=$wp_query；
     3614$query=$this->get_new_wp_query_for_published_post（）；
     3615$this->set_main_query（$query）；
    36203616$this->reset_content_media_count（）；
    36213617$this->reset_omit_loading_attr_filter（）；
    … …  
    36413637     */
    36423638公共函数test_wp_filter_content_tags_with_wp_get_loading_attr_default（）{
    3643 全局$wp_query，$wp_the_query；
    3644 
    36453639$img1=get_image_tag（self:：$large_id，“”，“”；
    36463640$iframe1='<iframe src=“https://www.example.com“width=”640“height=”360“></iframe>'；
    … …  
    36603654$content_expected=wp_img_tag_add_decoding_attr（$content_expected，'the_content'）；
    36613655
    3662         $wp_query=新的wp_query（数组（“post_in”=>数组（self:：$post_ids[“publish”]））);
    3663         $wp_the_query=$wp_query；
     3656        $查询=$this->get_new_wp_query_for_published_post();
     3657        $this->setmainquery（$query）；
    36643658$this->reset_content_media_count（）；
    36653659$this->reset_omit_loading_attr_filter（）；
    … …  
    36973691$omit_threshold=wp_omit_loading_attr_thresho尔德（true）；
    36983692$this->assertSame（1，$omit_threshold）；
     3693    }
     3694
     3695    /**
     3696*测试wp_get_loading_attr_default（）在循环之前返回预期的加载属性值，如果不是主查询，则在get_header之后返回。
     3697     *
     3698*@机票58211
     3699     *
     3700*@封面：：wp_get_loading_attr_default
     3701     *
     3702*@dataProvider数据_wp_get_loading_attr_default_before_and_no_loop
     3703     *
     3704*@param string$context请求“loading”属性值的元素的上下文。
     3705     */
     3706公共函数test_wp_get_loading_attr_default_before_loop_if_not_main_query（$context）{
     3707全局$wp_query；
     3708
     3709$wp_query=$this->get_new_wp_query_for_published_post（）；
     3710$this->reset_content_media_count（）；
     3711$this->reset_omit_loading_attr_filter（）；
     3712
     3713do_action（'get_header'）；
     3714
     3715//如果不是主查询，则为惰性查询。
     3716$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
     3717    }
     3718
     3719    /**
     3720*测试wp_get_loading_attr_default（）在主查询的get_header之前但之后返回预期的加载属性值，但header未被调用。
     3721*
     3722*@票58211
     3723     *
     3724*@covers:：wp_get_loading_attr_default
     3725     *
     3726*@dataProvider数据_wp_get_loading_attr_default_before_and_no_loop
     3727     *
     3728*@param string$context请求“loading”属性值的元素的上下文。
     3729     */
     3730公共函数test_wp_get_loading_attr_default_before_loop_in_main_query_but_header_not_called（$context）{
     3731全局$wp_query；
     3732
     3733$wp_query=$this->get_new_wp_query_for_published_post（）；
     3734$this->set_main_query（$wp_query）；
     3735$this->reset_content_media_count（）；
     3736$this->reset_omit_loading_attr_filter（）；
     3737
     3738//如果未调用标头，则为Lazy。
     3739$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
     3740    }
     3741
     3742    /**
     3743*测试wp_get_loading_attr_default（）在主查询的循环之前、get_header之后返回预期的加载属性值。
     3744     *
     3745*@机票58211
     3746     *
     3747*@封面：：wp_get_loading_attr_default
     3748     *
     3749*@数据提供程序data_wp_get_loading_attr_default_before_and_no_loop
     3750*
     3751*@param string$context请求“loading”属性值的元素的上下文。
     3752     */
     3753公共函数test_wp_get_loading_attr_default_before_loop_if_main_query（$context）{
     3754全局$wp_query；
     3755
     3756$wp_query=$this->get_new_wp_query_for_published_post（）；
     3757$this->set_main_query（$wp_query）；
     3758$this->reset_content_media_count（）；
     3759$this->reset_omit_loading_attr_filter（）；
     3760
     3761do_action（'get_header'）；
     3762$this->assertFalse（wp_get_loading_attr_default（$context））；
     3763    }
     3764
     3765    /**
     3766*测试wp_get_loading_attr_default（）在get_header和循环之后返回预期的加载属性值。
     3767     *
     3768*@机票58211
     3769     *
     3770*@covers:：wp_get_loading_attr_default
     3771     *
     3772*@dataProvider数据_wp_get_loading_attr_default_before_and_no_loop
     3773     *
     3774*@param string$context请求“loading”属性值的元素的上下文。
     3775     */
     3776公共函数test_wp_get_loading_attr_default_after_loop（$context）{
     3777全局$wp_query；
     3778
     3779$wp_query=$this->get_new_wp_query_for_published_post（）；
     3780$this->set_main_query（$wp_query）；
     3781$this->reset_content_media_count（）；
     3782$this->reset_omit_loading_attr_filter（）；
     3783
     3784do_action（'get_header'）；
     3785
     3786while（have_posts（））{
     3787post（）；
     3788}
     3789$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
     3790    }
     3791
     3792    /**
     3793*测试wp_get_loading_attr_default（）是否在没有循环的情况下返回预期的加载属性。
     3794     *
     3795*@机票58211
     3796     *
     3797*@covers:：wp_get_loading_attr_default
     3798     *
     3799*@dataProvider数据_wp_get_loading_attr_default_before_and_no_loop
     3800     *
     3801*@param string$context请求“loading”属性值的元素的上下文。
     3802     */
     3803公共函数test_wp_get_loading_attr_default_no_loop（$context）{
     3804全局$wp_query；
     3805
     3806$wp_query=$this->get_new_wp_query_for_published_post（）；
     3807$this->set_main_query（$wp_query）；
     3808$this->reset_content_media_count（）；
     3809$this->reset_omit_loading_attr_filter（）；
     3810
     3811//确保页眉和页脚被调用。
     3812do_action（'get_header'）；
     3813do_action（'get_footer'）；
     3814
     3815//如果没有调用循环和页脚，则加载lazy。
     3816$this->assertSame（'lazy'，wp_get_loading_attr_default（$context））；
     3817    }
     3818
     3819    /**
     3820*数据提供商。
     3821     *
     3822*@return数组[]
     3823     */
     3824公共函数data_wp_get_loading_attr_default_before_and_no_loop（）{
     3825返回数组(
     3826数组（“wp_get_attachment_image”），
     3827数组（'the_post_thumbnail'），
     3828        );
    36993829    }
    37003830
    … …  
    41674297        );
    41684298    }
     4299
     4300    /**
     4301*返回新的WP_Query。
     4302     *
     4303*@global WP_Query$WP_Query WordPress查询对象。
     4304     *
     4305*@return WP_Query新建查询。
     4306     */
     4307公共函数get_new_wp_query_for_published_post（）{
     4308全局$wp_query；
     4309
     4310//对$wp_query的新查询。更新循环的全局。
     4311$wp_query=新wp_query（数组（'post_in'=>数组（self:：$post_ids['publish']））；
     4312
     4313返回$wp_query；
     4314    }
     4315
     4316    /**
     4317*将查询设置为主查询。
     4318     *
     4319*@global WP_Query$WP_the_Query WordPress查询对象。
     4320     *
     4321*@param WP_Query$Query查询要设置为主查询。
     4322     */
     4323公共函数set_main_query（$query）{
     4324全局$wp_the_query；
     4325$wp_the_query=$query；
     4326    }
    41694327}
    41704328

  • trunk/tests/phpunit/tests/query.php

    54891卢比 55847兰特  
    898898$this->assertFalse（$q->is_tag（'non-existent-tag'））；
    899899    }
     900
     901    /**
     902*在循环之前测试$before_loop是否为true。
     903     *
     904*@机票58211
     905     */
     906公共函数test_before_loop_value_set_true_before_the_loop（）{
     907//获取包含3个帖子的新查询。
     908$query=$this->get_new_wp_query_with_posts（3）；
     909
     910$this->assertTrue（$query->before_loop）；
     911    }
     912
     913    /**
     914*循环开始时，Test$before_loop值设置为false。
     915     *
     916*@机票58211
     917     *
     918*@covers WP_Query:：the_post
     919     */
     920公共函数test_before_loop_value_set_to_false_in_loop_with_post（）{
     921//获取包含2个帖子的新查询。
     922$query=$this->get_new_wp_query_with_posts（2）；
     923
     924while（$query->have_posts（））{
     925//$before_loop应该在第一次调用_post时设置为false。
     926$query->the_post（）；
     927
     928$this->assertFalse（$query->before_loop）；
     929断裂；
     930}
     931    }
     932
     933    /**
     934*当循环中没有post时，Test$before_loop值设置为false。
     935     *
     936*@机票58211
     937     *
     938*@covers WP_Query:：have_posts
     939     */
     940公共函数test_before_loop_set_false_after_loop_with_no_post（）{
     941//结果中没有任何帖子的新查询。
     942$query=新WP_query(
     943阵列(
     944“category_name”=>“不存在的类别”，
     945            )
     946        );
     947
     948//不会有任何帖子，因此循环永远不会真正进入。
     949while（$query->have_posts（））{
     950$query->the_post（）；
     951}
     952
     953//尽管如此，这应该是错误的，因为没有结果并且试图进入循环。
     954$this->assertFalse（$query->before_loop）；
     955    }
     956
     957    /**
     958*获取具有给定帖子数的新查询。
     959     *
     960*@param int$no_of_posts要在查询中添加的帖子数。
     961     */
     962公共函数get_new_wp_query_with_posts（$no_of_posts）{
     963$post_ids=self:：factory（）->post->create_many（$no_of_posts）；
     964$query=新的WP_query（数组（“post_in”=>$post_id））；
     965return$query；
     966    }
    900967}
注：请参见TracChangeset（跟踪变更集）获取有关使用变更集查看器的帮助。