Pagespeed Insights 和 Twitter 嵌入式时间线答案

【问题标题】：Pagespeed Insights and Twitter Embedded TimelinePagespeed Insights 和 Twitter 嵌入式时间线
【发布时间】：2015-06-03 10:08:04
【问题描述】：

我正在尝试针对 PageSpeed Insights 优化我的网站，但由于嵌入的 Twitter 时间线降低了我的分数，我陷入了困境...

1) 优化图片：即使我禁用了自动展开图片功能（推特小部件页面），我仍然有错误消息：

压缩 https://pbs.twimg.com/…mages/1314024178/blablabla_bigger.jpg 可以节省 13.8KiB（减少 86%）
压缩 https://pbs.twimg.com/…mages/1314024178/blablabla_normal.jpg 可以节省 5.9 KiB（减少 83%）

2) 利用浏览器缓存：尽管我的 .htaccess 看起来不错，但我仍然有以下错误：

https://cdn.syndication.twimg.com/…n&suppress_response_codes=true&t=1592583（60 秒）
http://platform.twitter.com/widgets.js（30 分钟）

请帮帮我！

谢谢

劳伦特

【问题讨论】：

标签： .htaccess twitter widget timeline pagespeed

【解决方案1】：

很遗憾，Twitter 时间线是第 3 方服务，不受您的控制。您将无法提高 PageSpeed 分数，因为您正在使用 Twitter 时间线，而且它不在您自己的服务器上。

您可以考虑异步加载时间线 - 如果您可以提供更多实现细节，我可能会提供帮助！

【讨论】：

您好，谢谢您的回答。我想我可以在我的最后一个脚本之后执行脚本。以下是代码：twitter.com/blabla" data-widget-id="XXXX">Tweets from twitter.com/blabla</a>

【解决方案2】：

Deano 出现在这里：

很遗憾，Twitter 时间线是第 3 方服务，并且是在你的控制之外。您将无法提高 PageSpeed 得分，因为您正在使用 Twitter 时间线并且它没有打开您自己的服务器。

警告：在这条线以下的边界过度设计，但实现起来仍然很有趣:)

我最近一直在使用 WebPagetest，并想出了一个有趣的“测试技巧”来延迟这些 3rd 方资产。请记住，这样做的目的是“排除”您无法控制的正在“测试”的资源，但会继续扭曲您的结果。

<div id="twitter-timeline"></div>

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
  $(document).ready(function() {
    var createTwitterTimeline = function(screenName, appendToIdSelector) {
      if (!$(appendToIdSelector).length) {
        console.log(appendToIdSelector + ' not found');
        return;
      }

      var block = $('<div />');
      var a = $('<a />').attr('class', 'twitter-timeline').attr('href', 'https://twitter.com/' + screenName).text('Tweets by @' + screenName);
      var script = $('<script />').attr('async', 'true').attr('src', 'https://platform.twitter.com/widgets.js').attr('charset', 'utf-8');

      block.append(a);
      block.append(script);

      $(appendToIdSelector).html(block.html());
    }

    // getParameterByName (http://stackoverflow.com/a/901144/901156)
    var getParameterByName = function(name, url) {
      if (!url) url = window.location.href;
      name = name.replace(/[\[\]]/g, "\\$&");
      var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
          results = regex.exec(url);
      if (!results) return null;
      if (!results[2]) return '';
      return decodeURIComponent(results[2].replace(/\+/g, " "));
    }

    var defer = parseInt(getParameterByName('defer'));

    setTimeout(function() {
      createTwitterTimeline('Interior', '#twitter-timeline');
    }, !isNaN(defer) ? defer : 0);
  });
</script>

这是做什么的：

等待 DOM 完全加载
在内存中为 User Embedded Timeline 重新创建 HTML 标记
查找defer 查询字符串参数并将超时设置为此值（如果值不是数字，则为0）。

最后一步基本上推迟了加载时间线 HTML（以及因此来自 pbs.twimg.com 的任何内容），以便 WebPagetest 完成运行测试所需的最短时间。

通过这个“实现”，您可以将以下 URL 传递给 WebPagetest、Google PageSpeed Insights 等：

https://example.com/my-page.html?defer=5000

当然，最终，您也可以使用 WebPagetest 上的阻止选项卡，并将 pbs.twimg.com 添加到要忽略的请求列表中。但是，我不太明白 Google PageSpeed Insights 在哪里为您提供了此选项。我在上面提供的实现示例可能有助于创建更全面、与工具无关的方法。

如果您认为这是“过度设计”（或者如果您只是想通过自动化进行更核心的测试等），您应该查看他们的Scripting Documentation：

Pagetest 具有脚本功能，可让您自动执行多步骤测试（例如，登录网站或发送电子邮件信息）。脚本包含在单个文件中的文件中构成浏览器会话（浏览器将在脚本完成）。这些文件是纯文本文件，可以编辑任何文本编辑器。

【讨论】：