在 Google PageSpeed Insights 中以最快的速度加载 fancyBox/jQuery v3 而不会丢失分数答案

【问题标题】：The fastest loading of fancyBox/jQuery v3 without loosing scores in Google PageSpeed Insights在 Google PageSpeed Insights 中以最快的速度加载 fancyBox/jQuery v3 而不会丢失分数
【发布时间】：2018-04-20 09:22:06
【问题描述】：

目前，我们的一个旧 Web 项目中有 fancyBox v2.1.5 和 jQuery v1.11.3。它们在关闭 </body> 标记之前附加到 HTML 页面，如下所示：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
    if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='/scripts/jquery-1.11.3.min.js' type='text/javascript'%3E%3C/script%3E"));
    }
</script>

<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox({
            beforeShow: function () {
                var alt = this.element.find('img').attr('alt');
                this.inner.find('img').attr('alt', alt);
                this.title = alt;
            }
        });
    });
</script>

</body>

fancyBox 的 CSS 是这样添加到 <head> 部分的：

<link rel="stylesheet" href="/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />

当我为我们的 HTML 页面启动 Google 的 PageSpeed Insights 测试时，Google 总是提到这个 CSS 并告诉我们在首屏内容中有 1 个阻塞 CSS 资源。为了解决这个问题，让页面的加载时间更好，我打算升级到最新版本的fancyBox和jQuery（也会带来新的功能）。

fancyBox 项目的home page 告诉我们如何将 v3 添加到 HTML 页面：

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

如果我在结束 </body> 标记之前添加这些行，是否有助于实现我的目标？在使用fancyBox/jQuery 时，是否有任何其他提示可以加快页面加载速度（例如，通过在<script> 标签中添加async 属性或在我们的网络服务器上托管fancyBox/jQuery 文件）？

附：建议的解决方案的一个可能问题是 <link> 标记应仅放置在 <head> 部分中，尽管它似乎在 HTML5 中也适用于正文（请参阅this thread）。

【问题讨论】：

标签： jquery fancybox pagespeed fancybox-3

【解决方案1】：

查看 Google 推荐 - https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery 和这个 SO 线程 - How to load CSS Asynchronously

【讨论】：

在尝试了可用的方法之后，我决定将fancyBox的CSS加载到带有<script>var newStyle = document.createElement('link'); newStyle.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.css'; newStyle.rel = 'stylesheet'; newStyle.type = 'text/css'; document.getElementsByTagName('head')[0].appendChild(newStyle);</script>的页面正文中。这种方法有什么缺点吗？
由于这个 CSS 不是（很可能）关键的，最好在下一帧中加载以优先绘制可见内容（第一个链接中有一个示例），但这很好，也是。
您不认为使用优化 CSS 交付文章中的代码 sn-p 延迟加载 fancyBox 的 CSS 可能会导致 fancyBox 的功能不正常吗？如果 fancyBox 开发人员认为他们的 CSS 会按照主页上显示的正常方式加载怎么办？加载 CSS（闪烁或类似的东西）后页面的额外绘制周期怎么样？
作为fancybox的作者，我可以向你保证，这并不重要。