使用wp_enQueue预加载关键请求

时间：2019-01-23 作者：nsilva

我目前正在进行一些速度优化，网站的主要问题之一是：-

“预加载密钥请求2.64 sConsider，用于对稍后在页面加载中请求的获取资源进行优先级排序。Learn more.“”

我将我的所有样式和JS文件放入我的函数中。php如下：-

wp_register_script(\'jquery-ui\', get_template_directory_uri() . \'/assets/js/jquery-ui.min.js\', array(), \'1.12.1\');
wp_enqueue_script(\'jquery-ui\');

wp_register_style( \'jquery-ui-css\', get_template_directory_uri() . \'/assets/css/jquery-ui.min.css\', array(), \'1.12.1\');
wp_enqueue_style( \'jquery-ui-css\' );

我该如何使用rel="preload" 有这些文件吗？

1 个回复

SO网友:Celso Bessa

我想您应该将其作为资源提示添加到HTML中，而不是作为服务器推送头。像preload WP native不支持wp_resource_hints 函数，则需要创建一个自定义函数来打印preload 标记并将其添加到HTML标题部分的开头。如下所示。

// Adds preload resource hint to wp_head hook
add_action( \'wp_head\', \'add_preload_resource_hint\', -1);

/**
 * Writes preload resource hints.
 * 
 * Writes preload resource hints.
 */

function add_preload_resource_hint() {
    $template_directory = get_template_directory_uri();

    // preloading a stylesheet
    echo "<link rel=\\"preload\\" href=\\"{$template_directory}/css/mystyles.css\\" as=\\"style\\">";

    // preloading a script.
    echo "<link rel=\\"preload\\" href=\\"{$template_directory}/js/myscript.js\\" as=\\"script\\">";

    // preloading a font
    echo "<link rel=\\"preload\\" href=\\"{$template_directory}/fonts/myfont.woff2\\" as=\\"font\\">";

    // preloading an image.
    echo "<link rel=\\"preload\\" href=\\"{$template_directory}/images/myimage.jpg\\" as=\\"font\\">";

    // preloading a video.
    echo "<link rel=\\"preload\\" href=\\"{$template_directory}/video/myvideo.m4v\\" as=\\"media\\">";
    
    // preloading page 2 of a multi-page post
    echo "<link rel=\\"preload\\" href=\\"/page/2/" as=\\"document\\">";

    // if preloading from another domain, it will probably be have CORS rules 
    // and you should use the crossorigin attribute
    echo "<link rel=\\"preload\\" href=\\"{$template_directory}/fonts/myfont.woff2\\" as=\\"font\\" crossorigin>";

    // for all types of content and attributes value
    // please check the latest W3C recommendation at
    // https://www.w3.org/TR/preload/


};

Important: 上面的代码旨在展示一个概念，一种处理您需求的可能方法。您将需要适应您的需求，最好将其抽象出来，使其可重用，更通才。

其他几点要点：

You should exercise caution and avoid using preload 仅针对少数选定的、真正重要的和必需的资源，根据caniuse.comW3C recommendation 在使用之前

标签： wp-enqueue-script wp-enqueue-style 小码农

小码农CODE

使用wp_enQueue预加载关键请求

相关推荐