Defer Parsing of Scripts

时间:2013-01-16 作者:markyeoj

这是我第一次尝试这种“延迟解析”的方法,我真的不知道该怎么做。

enter image description here

使用PageSpeed工具,我发现我的页面加载速度太慢(目前为92/100)的原因之一是脚本。PageSpeed建议我需要推迟解析所有这些脚本。

有没有人可以帮我做这件事。谢谢

3 个回复
SO网友:fischi

乍一看,您的网站中确实包含了大量Javascript。您可以采取一些步骤来减少/加速此部分。

在我开始之前,请允许我提醒您,Google的PageSpeed并不是一个衡量网站加载速度的实际工具,它更多的是一个查看如何设置网站以确保获得服务器允许的最佳加载时间的工具。要查看实际加载时间,请转到控制台上的“网络”选项卡,加载不带缓存文件的页面(cmd-f5),并查找两条竖线,第一条是“文档就绪”,第二条是“完全加载的页面”。

受够了理论,让我们开始工作:-)

确定您实际需要的脚本这可能看起来很琐碎,但却是非常重要的一步。

您应该只在每个页面上加载所需的Javascript。在您的示例中,安装了很酷但功能广泛的JWPlayer。你确定每页都需要它吗?

还要检查您的文件,查看插件中的遗留文件或不需要的其他文件,并将其删除。

加载缩小版本

下一步是缩小文件。例如,您加载jquery.js 而不是jquery.min.js. 这将允许您减少传输的数据。

对于非标准Javascript文件,如您自己的scripts.js, 有很多免费的Javascript浏览器。只需保存缩小的文件,就可以将这行代码添加到functions.php: (本例使用jQuery,但它适用于所有正确排队的Javascript片段)

function modify_jquery() {
if (!is_admin()) {
    wp_deregister_script(\'jquery\');
    wp_register_script(\'jquery\', get_bloginfo( \'template_url\' ) . \'js/jquery.min.js\', false, \'1.8.1\');
    wp_enqueue_script(\'jquery\');
}
}
add_action(\'init\', \'modify_jquery\');
从Google库加载通用Javascript现在说到jQuery之类的文件,您可以通过将此代码添加到您的functions.php (请注意,您不应该同时使用jQuery执行此操作和befor操作-最后一点只是为了说明如何更改排队Javascript文件的包含路径)

//Making jQuery Google API
function modify_jquery() {
    if (!is_admin()) {
    // comment out the next two lines to load the local copy of jQuery
    wp_deregister_script(\'jquery\');
    wp_register_script(\'jquery\', \'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js\', false, \'1.8.1\');
    wp_enqueue_script(\'jquery\');
}
}
add_action(\'init\', \'modify_jquery\');
组合Javascriptfiles您可以采取的另一个步骤是将一些Javascriptfiles组合成一个,以减少浏览器发送到服务器的请求量。

在页脚中加载Javascript

This is very important!

将页面上不需要的所有Javascript从Head 到页脚部分,以允许在加载繁重的Javascript之前构建页面。

这不会改变传输的数据量,但网站用户可以更快地看到结果,因为页面是先加载的。

这个wp_enqueue_script() 函数有一个参数用于在页脚中加载特定脚本(第五个参数必须设置为true). 请参见代码参考here.

使用与上述相同的函数,您可以完成该行为。

请确保正确设置依赖项,以便javascript以正确的顺序加载。dependecies(第三个参数)告诉WordPress应该首先加载哪些文件,因此如果将“jquery”放在其中,它将始终在加载“jquery”后加载。

到目前为止,还有很多工作要做,你可能会对上面提到的修改代码感到沮丧,因为它并不总是很清楚,尤其是如果你使用了很多插件,依赖项是如何工作的,哪些文件实际上可以加载到页脚中,等等。

始终一步一个脚印,检查您的网站是否仍能按预期工作。

那么一个可以做到这一切的插件呢

当然,您可以始终使用以下插件W3 Total Cache 它可以处理Javascript的组合、缩小和位置,但这很难处理。如果你明白了,怎么做,太好了!真正理解它是如何工作的需要很多时间,而这是W3 Total Cache中我经常感到沮丧的一部分。

然而,如果您遵循上述规则,并确保您和所有插件都以WordPress的方式正确地将javascript排队,这将是加快javascript加载速度的一大步。

最后但并非最不重要的是,哇,我讨厌这个词。但话说回来,我一直想写“最后但并非最不重要”,这在我的一生中至少有一次;-)

你的Google PageSpeed已经很好了。Javascriptstuff只会导致最大值增加几个点,所以不要只关注这一点——查看实际加载时间,然后发布结果。

现在,玩得开心点!:-)

SO网友:Mark Kaplun

我的帮助是建议你不要为此烦恼。使用defer时,告诉浏览器不要解析正在加载的JS。不解析JS的含义是,加载JS时应该执行的任何代码都不会执行。因此,为了使用defer,您必须百分之百确保被延迟的JS在解析时没有执行代码。

从您的屏幕截图中,您正在从您无法控制的来源加载6个JS文件,这意味着即使您今天可以推迟加载,它们在未来也可能会发生更改,而您对此没有任何指示。JS的其余大部分可能是核心文件或插件文件,除非你花时间检查代码或询问作者,否则你不知道它们是否可以推迟。

基本上,您应该只延迟自己编写的代码。这取决于插件和主题作者开始推迟他们自己的JS。

这是PageSpeed提出的毫无意义的建议。大多数JS文件都相对较小,解析时间也很短,如果在页脚加载JS,在任何情况下都不会有人注意到。[/咆哮]

编辑:我想“延迟”这个词可以解释为需要几种不同类型的动作。我在这里假设它指的是在JS链接中使用defer=“defer”,但这个答案也适用于其他类型的延迟,如果您的JS加载在页脚中,那么对于99%的站点来说应该足够好了。唯一的例外是移动设备,在移动设备中,您根本不想加载JS,直到完全需要它为止。

SO网友:Ranjit Kumar

在主题函数的底部添加以下代码。php文件:

    function add_defer_attribute($tag, $handle) {
   $scripts_to_defer = array(
                            \'contact-form-7\',
                            \'et_monarch-idle\',
                            );

       if (in_array($handle, $scripts_to_defer))  return str_replace(\' src\', \' defer="defer" handeler="\'.$handle.\'" src\', $tag);

  return str_replace(\' src\', \' handeler="\'.$handle.\'" src\', $tag);
}

add_filter(\'script_loader_tag\', \'add_defer_attribute\', 100, 2);

结束

相关推荐

自定义字段后端的jQuery

我需要一些帮助,因为我想在编辑后屏幕上的一些自定义字段上使用jquery(可能还有css)。我真正需要的是制造,和。当用户键入一个数字时,神奇地显示为apear:类型100,jquery将其设置为1,00,依此类推。我使用插件类型创建的自定义字段名为wpcf imovel preco。我不知道如何使用jquery操作后端的元素:(,仅此一点就很有帮助,所以我知道从哪里开始!