我如何推迟或异步此 WordPress javascript 片段以最后加载以加快页面加载时间? [英] How do I defer or async this WordPress javascript snippet to load lastly for faster page load times?

问题描述

我在我的一个 WordPress 域中有各种 javascript，它们是必要的插件，而且我知道它在 php 文件中的哪个位置被调用.

我正在采取一切可能的措施来加快页面加载时间，并且网络上的每个速度测试员都表示如果可能，请推迟使用 javascript.

我已经阅读了 javascript 中的 defer='defer' 和 async 函数，我认为其中之一将完成我想要完成的任务.但我不明白如何在 php 文件中这样做.

例如，以下是调用 javascript 文件的特定插件的 php 文件中的一个片段:

function add_dcsnt_scripts() {wp_enqueue_script('jquery');wp_enqueue_script('dcsnt', dc_jqsocialtabs::get_plugin_directory() .'/js/jquery.social.media.tabs.1.7.1.min.js');}

我读到最好这样做以加快页面加载速度:

但我不知道如何在 php 文件中实现.我想对我所有的 javascript 文件执行此操作.

我将如何实现将此 javascript 代码段延迟或异步到最后加载并加快页面加载时间?在所有浏览器中增加页面加载时间的理想方法是什么?感谢任何人可以提供的任何指导！

解决方案

这个 博客文章 链接到两个感兴趣的插件:

<块引用>

异步 Javascript
通过使用 head.js 异步加载 javascript 来提高页面加载性能

<块引用>

WP 延迟 JavaScript
使用 LABJS(一个异步 javascript 库)延迟加载所有使用 wp_enqueue_scripts 添加的 javascript.

尚未测试它们，但检查了代码，它们使用 WordPress 脚本排队过程做了非常漂亮的事情.

但随后 WPSE 来拯救:

//改编自 https://gist.github.com/toscho/1584783add_filter('clean_url', function( $url ) {if (FALSE === strpos( $url, '.js' ) ) {//不是我们的文件返回 $url;}//必须是 '，而不是 "！返回$url" defer='defer';}, 11, 1 );

I have various javascripts that are necessary plugins in one of my WordPress domains, and I know where in the php file it's called from.

I'm taking every measure I can take to speed up page loading times, and every speed tester on the web says to defer javascripts if possible.

I have read about the defer='defer' and the async functions in javascript and I think one of these will accomplish what I'm trying to accomplish. But I'm not understanding how I'd do so in a php file.

For instance, here is a snippet from one particular plugin's php file where the javascript file is being called:

function add_dcsnt_scripts() {

    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'dcsnt', dc_jqsocialtabs::get_plugin_directory() . '/js/jquery.social.media.tabs.1.7.1.min.js' );

}

I've read that it's best to do something like this for faster page loading times:

<script defer async src="..."></script>

But I don't know how to accomplish that within a php file. I want to do this with all of my javascript files.

How would I accomplish deferring or asyncing this javascript snippet to is loads last and speeds up page load times? What would be the ideal way to increase page load times across all browsers? Thanks for any guidance anybody can offer!

解决方案

This blog post links to two plugins of interest:

Asynchronous Javascript
Improve page load performance by asynchronously loading javascript using head.js

WP Deferred Javascripts
Defer the loading of all javascripts added with wp_enqueue_scripts, using LABJS (an asynchronous javascript library).

Haven't tested them but checked the code and they do pretty fancy stuff with WordPress scripts enqueuing process.

But then WPSE comes to rescue:

// Adapted from https://gist.github.com/toscho/1584783
add_filter( 'clean_url', function( $url ) {
    if ( FALSE === strpos( $url, '.js' ) ) {
        // not our file
        return $url;
    }
    // Must be a ', not "!
    return "$url' defer='defer";
}, 11, 1 );

这篇关于我如何推迟或异步此 WordPress javascript 片段以最后加载以加快页面加载时间?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！