The Problem
The Instagram Logo
Instagram. If you’re at all familiar with web development you probably already know the complications I’m about to lay out for you. Facebook’s whole business model is about getting as much info from users as possible, no matter what website they are on. For this reason the whole Facebook family of products includes all sorts of code to fingerprint users and track their activities, but the only thing that does for the businesses we work for is slow down their site performance, which can push them down in search results.
Instagram leverages their JavaScript integrations, documents them incredibly well, and makes them easy to put on websites because it’s beneficial for them to have the tracking code on your website. But even if we completely discount the tracking code, their JavaScript leaves a lot to be desired. Loading high quality Instagram images from a 3rd party that has no concept of how those images are going to be displayed can tank your page speeds faster than anything else. The problem is so bad that I physically cringe whenever I have to try to optimize a site for a client that has an Instagram integration.
The Solution
The Web Development equivalent to “Flip-It, we’ll do it live!” is “We’ll do it local”. This solution is often not simple with today’s proliferation of CDNs and APIs delivering dynamic interconnected data, but it will always give website operators the most control over their website available and developers the most options for optimization.
Good responsive design understands that images are seen in context, and loading the largest best looking image is not always the best choice based on how its being used.
So we use the underlying API that the JavaScript uses and we save the files we’re served directly to our server. This action doesn’t have to be triggered by a user, so we can schedule it to happen during non-peak times, and once the files are on our server we can scale them to something reasonable for how they are going to appear in the final website. We also don’t have to communicate nearly as often with the API, we can update once a day or so and be relatively recent on the posts, as we know social media algorithms tend to de-incentivize pages that post more often than that.
The API gives us caption data as well as links to the original post, so we can link over just as easily as if we has used Instagram’s favored method. Honestly, the only two downsides of this method are the lack of Facebook’s tracking tech (which will feed into the ad purchase dashboard when you’re looking at paid advertising on Instagram), and that you will likely have to set aside a significant amount of space to accommodate the images, but this shouldn’t be unreasonable on any hosting platform that’s used to dealing with active use and constant file uploads.
The Result
Here it is, 100% locally hosted Instagram integration. You can see it in context at https://shawneemt.com.
Now credit where credit is due. This idea was not ours originally, but was instead found in the code of a custom Drupal module PeneTeleData had written for our client. We cleaned up the code, ported it to a WordPress module, and combined it with an image optimization system that generates .webp files in addition to compressing all the images in their original formats. Our client was the Shawnee Mountain Ski Area, and the soft relaunch of https://shawneemt.com. They have an Instagram integration with their six most recent posts halfway down the homepage, the page where it is absolutely paramount that we be as performant as possible.
Using existing plugins we can regularly expect a 10-20 point drop in page speed score depending on the number of images the design pulls in. This solution is pure HTML as far as the end user is concerned, and as such we see the page speed effect as something closer to 2-5 points. As we continue the development of this plugin, we’ll likely switch the WordPress’s native image tag generation which will enable lazy load and src-set features and allow us to minimize that impact even further.
The fact that generating our own DOM and using the full sized images as served from Instagram’s API gave us the improvement it did is just more proof that in the era of Google’s push to make things as fast as possible, Facebook is going to have to re-examine its integration strategies or lose out on one of its major methods of gathering user activity data.
Wish you could get the features of social networks without them slowing down your website, why not reach out to us?
