Recently I have started to take notice of the page load times of my website. I’m always interested in ways I can optimize my site to load faster and run more efficiently. I ran some performance tests in an effort to identify any sluggish items.
To my surprise, the Twitter API code was one of them. In the footer of my website, I have a section that pulls all of my latest Twitter posts and displays them. This is accomplished via an external javascript file supplied by Twitter that you include on your website.
The download time is actually quite fast from Twitter’s servers. My best time was 145ms. But unfortunately there are no caching headers sent to the browser for that file. So every time a new page is requested, your visitor has to download your Twitter posts again. This seems like an awful waste of bandwidth for something I don’t update that frequently. Add in the fact that each Twitter account is limited to 150 API requests per hour, and it’s obvious to see the benefit that caching can provide.
How it Works
Your Twitter post data will get saved to a temporary cache file. This cache will have a lifetime of 10 minutes. If it’s ever more than 10 minutes old when it’s requested, fresh data will be downloaded and it will be updated. It’s all quite seamless and behaves just like the original Twitter code, just more efficient for the browser.
The PHP File
It’s really simple. To get started, let’s make a new file called twitter.php.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <?php // Create a new file that will act as our cache for your Twitter feed // File permissions must be set to 777 $cacheFile = 'twitterCache.txt'; // Specify the URL of the file you want to cache // You probably only have to change 'fitztrev' & '3' (the number of items to return) $twitterUrl = 'http://twitter.com/statuses/user_timeline/fitztrev.json?callback=twitterCallback2&count=3'; /* *** */ // Get the last modified time of the cache file $lastModified = filemtime($cacheFile); // If it's been more than 10 minutes, let's update the cache if ( !filesize($cacheFile) || time() - $lastModified > 600 ) { // Update cache if ( $tweets = file_get_contents($twitterUrl) ) { file_put_contents($cacheFile, $tweets); } } // Let's gzip it ob_start('ob_gzhandler'); // Set the last modified and expired headers so the browser caches it, too header('Last-Modified: ' . gmstrftime('%a, %d %b %Y %H:%M:%S GMT', $lastModified)); header('Expires: ' . gmstrftime('%a, %d %b %Y %H:%M:%S GMT', $lastModified + 600)); // It's a JSON file header('Content-type: application/json'); // Return the contents of the cache include $cacheFile; ?> |
You might notice you also have to create a file called twitterCache.txt (with writable permissions) to save the Twitter response. It can be just a blank file.
Then in our HTML, we include a Twitter widget with a minor modification.
Our HTML (Before)
The original HTML code would have looked like this:
<ul id="twitter_update_list"> <li> </li> </ul> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="http://twitter.com/statuses/user_timeline/fitztrev.json?callback=twitterCallback2&count=3"></script>
Our HTML (After)
Our new HTML looks like this:
<ul id="twitter_update_list"> <li> </li> </ul> <script type="text/javascript" src="http://twitter.com/javascripts/blogger.js"></script> <script type="text/javascript" src="/twitter.php"></script>
Notice the link to the twitter.php that we just created.
Finished!
So there we have it. A simple, effective way to remove an unnecessary download and decrease page load times across your site.
Do you have any questions or suggestions for improvement? Let me know in the comments.