Deano is spot on here:
Unfortunately the Twitter timeline is a 3rd party service and is
outside of your control. You won't be able to improve your PageSpeed
score because you are consuming the Twitter timeline and it is not on
your own servers.
Caution: Borderline over-engineering below this line, but still fun to implement :)
I've been working a lot with WebPagetest lately and came up with an interesting "test hack" for deferring these 3rd party assets. Keep in mind that the purpose of this is to "exclude" resources being "tested" that you have no control over, yet continue to skew your results.
<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>
What this does:
- Waits for DOM to be completely loaded
- Recreates HTML markup in-memory for User Embedded Timeline
- Looks for
defer query string parameter and sets the timeout to this value (else 0 if value is not a number).
The last step basically holds off loading the timeline HTML (and consequently anything from pbs.twimg.com) for a minimum amount of time necessary for WebPagetest to finish running its test.
With this "implementation" you then pass the following URL to WebPagetest, Google PageSpeed Insights, etc:
https://example.com/my-page.html?defer=5000
Of course, at the end of the day, you could also just use the Block tab at WebPagetest and add pbs.twimg.com to the list of requests to ignore. I don't quite see where Google PageSpeed Insights provides you with this option, however. The implementation example I provided above may be useful in creating a more holistic, tool-agnostic approach.
And if you think this is "over-engineering" (or if you simply want to get into more hard-core testing with automation, etc.) you should check out their Scripting Documentation:
Pagetest has a scripting capability that lets you automate a
multi-step test (for example, logging into a site or sending an e-mail
message). The scripts are contained in files where a single file
constitutes a browser session (the browser will be closed after the
script is complete). The files are plain text files and can be edited
by any text editor.
