Pagespeed Insights和Twitter嵌入式时间线

Question

我正在尝试优化我的网站关于PageSpeed Insights和我被嵌入的Twitter时间轴困住了，这降低了我的得分...

1）优化图片：尽管我禁用了自动展开图片功能（twitter widget页面），但我仍然收到以下错误消息：

- 压缩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分钟）

请帮助我！

谢谢

Laurent

- Laurent Milleron

Answer 1

Deano在这里说得很对：

不幸的是，Twitter时间轴是一个第三方服务，超出了您的控制范围。您将无法提高PageSpeed得分，因为您正在使用Twitter时间轴，而它不在您自己的服务器上。

注意：以下内容可能有点过度设计，但实现起来仍然很有趣 :)

---

最近我一直在使用WebPagetest，想出了一个有趣的“测试技巧”，可以延迟第三方资源的加载。请记住，这样做的目的是“排除”那些您无法控制但仍会影响测试结果的资源。

<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 (https://dev59.com/nHNA5IYBdhLWcg3wmfAa#901144)
    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>

这段代码的作用：

1. 等待DOM完全加载
2. 在内存中重新创建用户嵌入时间线的HTML标记
3. 查找defer查询字符串参数并将超时设置为该值（如果该值不是数字，则为0）。

最后一步基本上延迟加载时间线HTML（以及来自pbs.twimg.com的任何内容），直到WebPagetest完成其测试所需的最短时间为止。

使用此“实现”，您可以将以下URL传递给WebPagetest、Google PageSpeed Insights等：

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

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

如果您认为这是“过度工程化”（或者如果您只想进行更多的自动化测试等硬核测试），您应该查看他们的脚本文档：

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

- Matt Borja

Answer 2

很不幸，Twitter时间轴是第三方服务，不在您的控制范围内。由于您正在使用Twitter时间轴而它不在您自己的服务器上，因此您将无法提高PageSpeed得分。

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

- Deano

---

你好，感谢您的回答。我想我可以把这个脚本放在我的最后一个脚本之后执行。以下是代码：<a class="twitter-timeline" href="https://twitter.com/blabla" data-widget-id="XXXX">来自 https://twitter.com/blabla 的推文</a><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> - Laurent Milleron