The price of rapid integration of libraries and web services

Customer / marketing : I want a google map in the contact web page to indicate my premise to my customer

Developer : Ok, no problem. 4 hours is sufficient to to this. There are a lot of libraries for your framework to to this.

Customer / Marketing : And if you can integrate Facebook and Twitter counter, it will be great. Everybody have such counter !

Developer : OK. It will be integrated with the Google Map.

These requests are widespread in web and software world. Customers and users use to see a lot of functionalities in other sites, they use to have it rapidly, and developers can integrate is rapidly… Providers of services like Facebook, Google, Twitter… have provided a lot of api and a lot of plugin have been developed to integrate these APIs in websites and applications.

Good you will said ! But what is the price of theses integrations ? I will said prices because not only there is a price on privacy of users data (tracking, geolocalization…) but there is a price on resource consumption.

Youtube Example.

Youtube and google map is the same in term of mecanisme. So we have integrated the Youtube embedded video. The aim was simple : integrate a video of presentation of our tool Greenspector. Initialy, the site has 25 requests.

The integration was very simple :

<iframe width=”320" height=”180" src=”http://www.youtube.com/embed/LcIytqkbdlo">
</iframe>

Good ! the result was great : a responsive video of our product. But after some profiling :

• 12 more requests
• 400 kB more
• Load time from 350 ms to 1,2s

Why ? Because this integration include a waterfall of extra request :

• Stylesheet
• javascript
• Script for add
• a js which respond 404
• media : Images, fonts…

The price is high for an video. Moreover, we don’t talk about the weight of video but the weight of integration of the video.

The price is the same for social media integration and is even more important : we have regular update. If we also watch the request of such api, the requests are not generally cache and they are download every reload of the page.

How to optimize ?

Developer : There is a problem. The integration of google map add extra requests. The page is more heavy.

Customer / marketing : hmmmm… You said me you were the best ! Do your best !

Developer : No problem. This will delay a little the delivery

So what to do … We need to enter in the great side of integration : the optimization and the understanding of the library (Yes some people like this part !). The optimization is possible but require a little effort.

For example, for our case of video, we can use a sort of lazy loading mecanism. If the user want to see the video, he click on the image and then, all needed elements are download. More details : http://www.labnol.org/internet/light-youtube-embeds/27941/

It is all ?

It’s not only optimization but also a rethinking about the functionality and the need for the user. What the user need in term of functionality ? He want to have a map or a link to a social network. Not all the time to have all the functionality of google map. Indeed, if we analyze what we embed : possibility to zoom, to go full screen, to make itinary …

If we will only integrate the need ? Just a map, not all extra functionality. It is feasible : we can integrate a image which is a copy of the map (google, open street map…) with a link to the service. On our company web page, it give :

And the functionality is better on the real service page than on our page (not full page…)

Resource budget ?

We can go further in the reflexion : Every functionality, every part of the software can have a resource budget : it consume a part of the platform resource (CPU, memory, time…). This notion begin to be used in the performance domain. tkadlec explains this in this video.

We also work on this notion on the eco-design. Like a typical budget, we can allocate a global budget to the software or the website. If you integrate a library or a functionality, the global budget is increased by the library budget. And if you have decided of a max budget (50mWh for the energy of a webpage, 1Mo for the page size…), with the library integration, you can exceed your budget.

This notion is simple in some way because we now this notion on our company or heaven at home. But on other way, it can be complexe. how to know the budget and the impact of the library ? We need to integrate it to know it.

With this notion, we can now discuss with our customers and users. What is the extra budget of integration of such functionality. Without this notion, we can not discuss and management the final consumption.

It is a work of day by day, of knowledge of libraries mecanisms… It is the price if you want not to pay a hidden price : the price of rapid integration of web services and libraries.