专业WORDPRESS主题设计制作

如何让WordPress延迟加载JavaScript加速页面渲染?(wordpress加载速度慢)

发布于: 2022-11-03

1 什么是JavaScript的Defer属性?

  • 2 将Defer属性添加到WordPress中使用的脚本
  • 3 注意事项

 

WordPress延迟加载JavaScript,来加速页面渲染方法。

lazyload

什么是JavaScript的Defer属性?

每个人都可能遇到过这种情况:

head中有N个脚本,在加载脚本时,会阻塞页面渲染,这通常是空白的。

当然,我们可以将源代码中的脚本放入页脚来解决这个问题。

但是,一些复杂的开发环境,会让这个简单的工作变成特别复杂。

此时我们可以使用Defer属性,这是JavaScript中相对少见的属性。

你可能永远不会使用它,但我相信在阅读这篇介绍后,我相信你不会离开它。

它的主要功能是让脚本在加载整个页面后再解析,而不是在加载时解析它,这为仅包含事件触发的JavaScript的脚本提供了完整的页面加载速度。

是的,如果Script脚本标记具有延迟defer属性,即使它被放置在head中,它也会在解析HTML页面后执行,这类似于将Script脚本放在页面底部。

当然,延迟的使用也是有限的,通常要注意2点:

1)不要在延迟defer类型脚本块中,调用 document.write 命令;

  • 因为 document.write 将产生直接输出效果。

2)不要在Defer脚本中,包括任何立即执行脚本,将使用全局变量或函数。

将Defer属性添加到WordPress中使用的脚本

在WordPress中,我们如何自动将Defer属性添加到WordPress使用的脚本?

我们可以将以下代码添加到当前主题的functions.php文件中 ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};
  • 上述代码仅适用于,根据WordPress方式引入的JavaScript代码才会有效。

注意事项

实时预览管理可能会显示空白:

若使用以上代码,打开实时预览管理(外观 → 自定义)时,可能会显示空白,所以请酌情使用。

在需要实时预览管理时,将以上代码注释掉,自定义完成后才删除注释代码。

PHP注释代码示例:

/*

这里是代码 

*/

希望我们网站( https://www.wordpressx.com/ ) 分享的《如何让WordPress延迟加载JavaScript加速页面渲染?》,对您有帮助。

TAG:
WP技术资料 wordpress模板制作、wordpress主题开发相关知识常见问题总结
MORE
服务电话:
0533-2765967

微信 13280692153