Here’s to a faster Recommendations plugin

May 5th, 2013. Tagged: facebook, performance

So I've been part of the quest of making all Facebook social plugins faster, even if it means rewriting them from scratch. After the Send plugin, Like button (perf optimizations described here), Follow plugin, Facepile and Likebox (perf details here), now you have a faster Recommendations plugin.

The techniques used to make it faster are simple and effective: better resource packaging, reducing number of requests, inlining CSS, reducing the amount of CSS and JS by untangling dependencies, cleaning up, and sometimes simply rewriting. You can read more about these in the previous posts.

Now the results. The before-after comparison is accurate because it uses snapshots taken at the same time. This is possible because we kept an old endpoint serving the old code path. The official URL is /plugins/recommendations.php but we kept the legacy URL /widgets/recommendations.php pointing to the old code for a little while.

Before

After

Some analysis

The total payload change is drastic. Mainly due to better packaging. And better JS modules and dependencies.

The number of requests is reduced by 1/3. Not as drastic, but not too bad either. Most of the requests are images, which is ok. They don't block anything and whenever they arrive, they are welcome. But they are not on the critical path. The reduced requests are all JavaScript. We already had a previous optimization so CSS was already inlined. But thanks to rewrites, now the HTML payload (including inline CSS) is 6.2K gzipped, down from 9.4K. Which means the initial paint can start sooner.

The initial paint (render start) now happens in half the time. And, even better, the initial paint is a complete plugin, except for the images. While before it was just a partial content. This is because CSS is here early and all JS is out of the way (async loaded, also take a peek here)

initial paint screenshots

The fully loaded time is not all that important since the user has a usable list of recommendations already delivered with the initial paint. But it's still 2x faster which makes me happy.

All in all

2x faster plugin overall, 2x faster (and infinitely better) first impression. 7x payload improvement.

Making the web faster and other personal notes

Just want to take a second to mention how good it feels to be working on such high-impact performance optimizations. These social plugins are everywhere on the web. By making them faster I am fortunate to have the opportunity to make the whole web faster. Meaning make millions of sites faster, affecting the live of billions of people, every day.

What can I say, Facebook is a great place to work. The people, the impact. Every line you write matters. It's also up to you to pick what do you want to work on and where your talents and interests will have the greatest impact. And then there are the hackathons and hackamonths which means even more freedom.

I recently finished a hackamonth project, which explains why I've been silent here and on Twitter and everywhere (yet, thanks to O'Reilly folks, even though I missed a few deadlines, we were able to push this baby out the door). Let me tell you - a hack-a-month is better than vacation. Being left alone for a month to explore a completely new (to you) territory - priceless!

(Oh, if that sounds something you'd like to do, hit me up on ssttoo at ymail with your resume. FB now has engineering offices in NYC, Seattle and London, so if moving was a problem, now there are more options)

Tell your friends about this post: Facebook, Twitter, Google+

117 Responses

  1. Thanks Stoyan for making the web faster. I’m always happy to see people care and enhance 3rd party scripts.
    To put some numbers to that, I recently (March 1, 2013 data) ran an HTTPArchive query to figure out how many of the Top 300K URLS use 3rd party scripts, like Twitter and Facebook. Based on the SQL query, 29% of the Top 300K URLs include Facebook’s scripts (connect.facebook.net, static.ak.fbcdn.net) somewhere on their page. You just made 29% of the web faster. Congrats!

  2. Thanks Barbara!

  3. it is very nice to know how to make it faster

  4. [...] to boost the speed of its social plugins, with Software Engineer Stoyan Stefanov detailing in a post on his blog how he was able to double the speed of the social network’s recommendations [...]

  5. Ernest Semerda

    Awesome work Stoyan! Is this production ready or not yet? If not yet when? Would love to switch all my online properties to your optimized code.

  6. [...] to boost the speed of its social plugins, with Software Engineer Stoyan Stefanov detailing in a post on his blog how he was able to double the speed of the social network’s recommendations [...]

  7. [...] to boost the speed of its social plugins, with Software Engineer Stoyan Stefanov detailing in a post on his blog how he was able to double the speed of the social network’s recommendations [...]

  8. [...] die Facebook Entwickler aber Blut geleckt und inzwischen einen Großteil Social Plug-Ins optimiert. So kann man es zumindest im Blog von Stoyan Stefanov nachlesen. Damit werden nicht nur die Plug-Ins selbst sondern auch alle Webseiten auf denen diese verwendet [...]

  9. [...] Facebook-Entwickler aber Blut geleckt und inzwischen einen Großteil der Social Plugins optimiert. So kann man es zumindest im Blog von Stoyan Stefanov nachlesen. Damit werden nicht nur die Plugins selbst, sondern auch alle Webseiten, auf denen diese verwendet [...]

  10. I RESEARCH,I PROVE WHAT I SAY,SO WE CAN MAKE ALL THINGS BETTER AROUND US.noble ones,hello

  11. http://www.youtube.com/watch?v=iAP9AF6DCu4

  12. THANK YOU DEVELOPERS

  13. Interest, do you write any tests for these plugins, if so what did you use?

  14. Thanks for your personal splendid publishing! I genuinely took pleasure in reviewing it, you occur to be a fantastic author. I will ensure to bookmark your blog site and will ultimately return later on. I want to encourage you to continue your great work, have a nice weekend!

  15. TODOS MIS CONTACTOS LES INFORMO QUE: ¡Facebook ha cambiado su configuración de privacidad, una vez más! Debido a la nueva “graphic app” cualquier persona en facebook (incluyendo otros países) pueden ver tus fotos, gustos y comentarios. Las próximas 2 semanas voy a estar publicando este mensaje, y por favor, una vez hagas lo siguiente, comenta ¡HECHO! Aquellos de vosotros que no mantengan mi información como privada, sino para la opinión pública, ¡voy a tener que eliminarlos! Quiero quedarme en PRIVADO conectado contigo. Puedo publicar fotos de familia y amigos ¡sin que extraños tengan acceso ello! Esto sucede cuando los amigos hacen clic en “like” o “comentario” …. automáticamente sus amigos pueden ver también nuestros mensajes. Lamentablemente, no podemos cambiar esta configuración por nosotros mismos, porque Faceboook lo ha configurado así. Por favor, coloca el puntero del ratón encima de mi nombre (sin hacer clic), aparecerá una ventana. Ahora mueve el ratón en “Amigos” (también sin hacer clic), luego a “Configuración”, haz clic aquí y aparecerá una lista. Quita la marca de “acontecimientos importantes” y “Comentarios y me gusta “. De esta manera, mi actividad entre mis amigos y familiares ya no se hacen públicos. Ahora, copia y pega esto en tu muro. Una vez lo vea publicado en tu página, voy a hacer lo mismo. ¡Gracias
    LEISTE BIEN??? DICE “COPIAR y PEGAR”. Si no lo sabes hacer, preguntame, te enseño , NO ME MOLESTA. gracias!!!
    LO ENCONTRE ENTRE MIS AMIGOS
    que hay de cierto?

  16. PORFAVOR ,EXPLIQUEME ,QUE NO ENTIENDO
    ,
    MUCHAS GRACIAS

  17. MI AMIGO ES .
    ALVARO PERDOMO

  18. Hello there, I found your web site by way of Google at the same time as looking for a related topic, your web site came up, it seems good. I’ve bookmarked to favourites|added to bookmarks.

  19. ooo super

  20. I’ll immediately take hold of your rss as I can not find your email subscription link or newsletter service. Do you have any? Kindly let me realize so that I could subscribe. Thanks.

  21. Wonderful beat ! I would like to apprentice while you amend your website, how could i subscribe for a weblog site? The account aided me a applicable deal. I had been tiny bit acquainted of this your broadcast offered bright transparent idea

  22. [...] the course of our turnovers to where we went six weeks without a turnover then, all of a sudden,DL Vaughn Martin agrees to terms with Dolphins NFL The S, they came in bunches. We’re hoping that perhaps touchdowns will come in bunches here [...]

  23. wouw good

  24. certainly appreciate your web-site but the truth is should look into the punctuation about quite a few within your content. A variety of them tend to be filled using transliteration challenges we in locating the idea really troublesome to know the certainty however definitely will keep coming back all over again.

  25. Good day! I could have sworn I’ve visited this site before but after looking
    at many of the articles I realized it’s new to me. Nonetheless, I’m certainly delighted I came across it and I’ll be book-marking it and checking
    back often!

  26. Thanks , I’ve recently been searching for info about this subject for a long
    time and yours is the greatest I’ve disovered so far.
    But, what inn regards to the bottom line? Are yoou positive about the supply?

  27. Write more, thts all I have to say. Literally,
    it seems as though you relied onn the video too make your
    point. You obviously know what youre talking about, why waste your intelligence on just postig
    videos to your weblog when you coulkd be giving us something informative to read?

  28. This article intends to show you how to create your very own
    Facebook game. My parents always wanted me to be a doctor when I grow up.
    This can be done by inviting your Facebook friends to join you at Mafia Wars.

  29. I am sure this piece of writing has touched alll the internet viewers, its rdally really
    fastidious article onn building upp new weblog.

  30. I used to be recommended this website by means of my cousin.

    I am now not certain whether or not this put
    up is written by him as nobody else know such certain approximately my difficulty.
    You are incredible! Thank you!

  31. Thanks in support oof sharing such a fastidious idea, article is nice,
    thats why i have read it completely

  32. If you are going for best contents like myself, just
    pay a visit this web page everyday as it gives quality contents,
    thanks

  33. Hello, I do believe your site could possibly be having web browser compatibility issues.
    When I look at your website in Safari, it looks fine but when opening in
    I.E., it’s got some overlapping issues. I just wanted to provide you with a quick heads up!
    Other than that, excellent site!

  34. Hello, constantly i used to check website posts here
    in the early hours in the daylight, because i like
    to learn more and more.

  35. If you would like to increase your experience simply keep visiting
    this site and be updated with the hottest
    news posted here.

  36. constantly i used to read smaller posts that also clear
    their motive, aand that is also happening with this paragraph which
    I am reading here.

  37. Excellent items from you, man. I have take into account your stuff prsvious to and you aare just extremely wonderful.

    I actually like what you hwve bought right here, certainly like what you are stating and the way in
    which through which you are saying it. You are making it entertaining
    and you continue to care for to keep it sensible.
    I can’t wait to learn much more from you. That is actually a wonderful website.

  38. Fantastic beat ! I would like to apprentice while you amend your web site, how could i subscribe
    for a blog website? The account aided me a acceptable deal.

    I had been a little bit acquainted of this your broadcast offered
    bright clear idea

  39. An outstanding share! I have just forwarded this onto a friend who had been doing a little
    research on this. And he in fact bought me lunch because I found it for him…

    lol. So allow me to reword this…. Thanks for the meal!!
    But yeah, thanks for spending time to talk about this subject here on your
    blog.

  40. whoah this weblog is wonderful i like reading your articles.
    Keep up the good work! You understand, lots of individuals are
    hunting round for this information, you can aid them greatly.

  41. At this time it seems like Movable Type is the top blogging platform out there right
    now. (from what I’ve read) Is that what you’re using on your blog?

  42. thanks admin I would like to apprentice while you amend your web site, how could i subscribe

  43. It’s very straightforward to find out any matter on net as compared to textbooks, as I found this piece of writing at this website.

  44. I want to code like you. What I can do? Any personal advices?

  45. admin he in fact bought me lunch because I found it for him

  46. thanks admin I would like to apprentice

  47. wow,I always love all the discussion here. thank you admin…

  48. wow,I always love all the discussion

  49. Ahaa, іts good discussion оn the topic оf this article at this place at this web site, I have read all
    that, ѕo now me also commenting here Buut also, in
    my view,I think yοu can do it better if you can feed uus more background knowledge
    at beginning. Keping on the excellent work,and i’ll come back for
    updates soon. Thx for sharing!.

  50. I was recommended this blog by my cousin. I’m not sure whether this
    post is written by him as nobody else know such
    detailed about my difficulty. You are wonderful! Thanks!

  51. I have read all

  52. Right now it sounds like Drupal is the top blogging platform available
    right now. (from what I’ve read) Is that what you’re using on your blog?

  53. Hello it’s me, I am also visiting this site on a
    regular basis, this web page is really fastidious and the users are actually sharing
    good thoughts.

  54. This is my first time go to see at here and i am really impressed to read everthing
    at single place.

  55. Amazing! Its really remarkable post, I have got much clear idea concerning from this piece of writing.

  56. You have made some good points there. I looked on the net to learn
    more about the issue and found most individuals will go along with your views on this site.

  57. Woah! I’m really digging the template/theme of this blog.
    It’s simple, yet effective. A lot of times it’s challenging to get that “perfect balance” between user friendliness and visual appearance.
    I must say that you’ve done a amazing job with this.

    Also, the blog loads super fast for me on Chrome.
    Excellent Blog!

  58. I am actually delighted to read this web site posts which includes plenty of
    helpful information, thanks for providing such information.

  59. Thank you for the good writeup. It in fact was a
    amusement account it. Look advanced to far added agreeable from you!
    However, how can we communicate?

  60. Wow that was unusual. I just wrote an very long comment
    but after I clicked submit my comment didn’t appear.
    Grrrr… well I’m not writing all that over again.

    Anyhow, just wanted to say fantastic blog!

  61. thanks admin nice post good

  62. You will learn what they are, how to get them, and how to trade
    them. Cheats for minecraft pocket edition android transmission tous hacking myspace accounts 2011.
    The devil in Farmville strategy land is someone who will support you cheat while in the
    online game.

  63. Aw, this was a very nice post. Taking the time and actual effort
    to make a good article… but what can I say… I put things off
    a lot and don’t manage to get anything done.

  64. İnternet sitemiz diyet, zayıflama ve sağlıklı yaşama dair güncel bilgiler sunmaktadır. Yazılarımızda diyet tariflerine yer vermememizin sebebi diyet çeşitlerinin kesinlikle bireysel çalışmalar dahilinde belirlenmesindendir. Daha fazla bilgi için internet sitemizi ziyaret edebilir ya da bulduğunuz başka bir yol ile bize bir şekilde ulaşmayı deneyebilirsiniz.

  65. Wow, I love blog!

  66. Awesome! Its actually awesome post, I have got
    much clear idea on the topic of from this post.

  67. Thanks Barbara!

  68. By speeding up operation of the Evo allows it to run through its programs more quickly, while slowing it down on the
    other hand saves on battery life by slowing your processor down
    when its not in use. Source: Al Sacco, “Six Tips to Protect your Google Phone. So, you can easily find those screenshots whenever you need them.

  69. I’m really impressed with your writing skills and also with the layout on your blog.
    Is this a paid theme or did you modify it yourself?
    Anyway keep up the excellent quality writing, it is rare to see
    a nice blog like this one nowadays.

  70. When Locke fails to stop Eko from pressing it,
    he enlists Desmond’s help to lock Eko out of the hatch and let the countdown go to zero.

    The technology developed to tell his story spun off to parent the Industrial Light and Magic company that changed
    the possibilities of “film” making forever, Meanwhile, the legacy of the Star Wars story seems
    to have become as a reference that bridges the gap between generations.
    He even had an idea for what kind of power, but there was a fear that
    people would be turned off by it.

  71. Hi, Neat post. There’s a problem witth your site
    in wweb explorer, might check this? IE still
    is the maretplace leader and a huge element of other folks will leave
    out your wonderful writing because of this problem.

  72. I for all time emailed this webpage post page to all my
    friends, since if like to read it afterward my contacts will
    too.

  73. of course like your web-site however you need to check the
    spelling on quite a few of your posts. A number of
    them are rife with spelling issues and I to find it very bothersome to tell the reality then again I will
    definitely come again again.

  74. It’s perfect time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I desire to counsel you few attention-grabbing issues or tips. Perhaps you could write next articles referring to this article. I desire to learn more things about it!

  75. teşekkür ederim sabah sabah estetik

  76. Ahaa, its fastidious conversation regarding this post here
    at this website, I have read all that, so at this time me also commenting here.

  77. Also, these cartels actively create new scams and tricks daily to get your money.
    I’m just glad to have my account back and now I’m looking
    through all my email to check for changes. ” requires an opinion in response, but if a hacker knew the names of all your aunts, he or she could enter them all one by one.

  78. Hey I know this is off topic but I was wondering if you knew
    of any widgets I could add to my blog that automatically tweet
    my newest twitter updates. I’ve been looking for a plug-in like this
    for quite some time and was hoping maybe you would have some experience with something like this.

    Please let me know if you run into anything. I truly enjoy reading your blog and I look forward to your new updates.

  79. It’s really a cool and useful piece of information. I am happy that you shared this helpful info with us.
    Please stay us informed like this. Thanks for sharing.

  80. Hi my loved one! I wish to say that this post is awesome,
    great written and include approximately all vital infos. I’d like to see more posts like this .

  81. Yoou haνe made some good pooints tɦere.
    I checked oon thе web to find օut mοrе aƄoսt the issue and fօund mߋst individuals աill go aalong աith youг views
    оn tҺіs site.

  82. thanks admin I would like to apprentice while you amend your web site, how could i subscribe.

  83. Hey! I know this is somewhat off topic but I was wondering if you knew where I
    could get a captcha plugin for my comment form?
    I’m using the same blog platform as yours and I’m having trouble finding one?
    Thanks a lot!

  84. Sadece kadın hastalıkları, infertilite ve tüp bebeğe yönelik olarak kurulan kliniğimizin altyapısı tüp bebek laboratuarının ihtiyaçlarına göre hazırlanmıştır.

  85. I all the time used to read article in news papers but now as I am a user of
    internet so from now I am using net for posts, thanks
    to web.

  86. Pretty! This was a really wonderful article.
    Many thanks for supplying this info.

  87. Hi, I think your blog might be having browser
    compatibility issues. When I look at your blog site
    in Firefox, it looks fine but when opening in Internet Explorer,
    it has some overlapping. I just wanted to give you a quick heads up!
    Other then that, awesome blog!

  88. Heya i’m for the first time here. I came across this board and I find It really
    useful & it helped me out a lot. I hope to give
    something back and aid others like you aided me.

  89. Hello my loved one! I wish to say that this article is
    amazing, nice written and come with approximately all vital infos.

    I would like to peer extra posts like this .

  90. I have been surfing online more than 3 hours today, yet I never found any interesting article like yours.
    It’s pretty worth enough for me. In my opinion, if all webmasters and bloggers made good content as you did,
    the internet will be much more useful than ever before.

  91. thanks admin nice post güzel yazılar devamı gelsin

  92. I’m gone to convey my little brother, that he should also pay a
    visit this website on regular basis to get updated from hottest news.

  93. We’re a group of volunteers and opening a new scheme in our community.
    Your web site offered us with valuable info to work
    on. You’ve done a formidable job and our whole community will be grateful to
    you.

  94. But do not be overbearing towards them because you just be
    repulsive if you are. Each part that you put together needs to be very
    simple because a majority of your audience don’t like or understand complex music.
    This feature is only discovered in other beat making programs costing 5 to 10 times the
    cost of DUB Turbo.

  95. that he should also pay a
    visit this website on regular basis to get updated from hottest news

  96. It’s very easy to find out any topic on web as compared to textbooks, as
    I found this post at this site.

  97. Martin was preceded in death by his parents; and brother, Newt
    Henry Griffith. This means less time bby the funeral home houston texas phone fielding calls from new customers.
    Probably 10 percent, 20 percent of the dogs trained by Canine Companions
    for Independence, suggested Flynn look into the Internet and
    see if it sounds right.

  98. Hello there! I just want to offer you a big thumbs up
    for your excellent information you’ve got here on this post.
    I am returning to your blog for more soon.

  99. They also have the benefit when you look for a replacement or cleaning services 89123 if the presence of moulds.

    It washes and looses the dust in one movement.
    There are many companies that ofvfer best and quick service at
    very low and affordable rates. You mayy also need to paay for added solutions of this kinnd of service.

  100. I don’t know if it’s just me or if everyone else experiencing problems with
    your site. It appears as if some of the text in your posts are running off the screen.

    Can someone else please provide feedback and let me know if this is happening to
    them as well? This could be a problem with my internet browser because I’ve had this happen
    previously. Thank you

  101. You can evaluate the real value of a team by watching how they play against good
    teams. The conclusion is that using bookmakers soccer predictions as betting tips does not pay off in daily betting.
    No longer were Ontario, Quebec and Winnipeg the only teams that were ready to take
    the Stanley Cup.

  102. Hi there, i read your blog occasionally and i own a similar one
    and i was just curious if you get a lot of spam comments?
    If so how do you reduce it, any plugin or anything you can
    advise? I get so much lately it’s driving me mad so any help
    is very much appreciated.

  103. While iits amazing theme parks are much more to discover and enjoy
    among aquati attractions of Orlando, Florida, USA.

  104. I would prefer to thnkx for the efforts you have place in composing this site. I am hoping the identical high-grade blog site post from you while in the upcoming also. In fact your resourceful creating abilities has inspired me to get my own webpage now. Truly the blogging is spreading its wings fast. Your produce up is really a good example of it.

  105. Excellent blog here! Additionally your web site quite a bit up very fast!
    What host are you the use of? Can I get your affiliate link in your host?

    I desire my website loaded up as quickly as yours lol

  106. As the technologies in every sphere of our
    life are changing the way we live and spend our lives, it is quite true with the modern electric fireplace too.
    There are quite a number of people who are interested
    in woodwork. Rather than having to leave your job to seek a new skill
    set, you can develop the career skill set that you need over the internet, in the comfort of your own home and best of all, on
    your own personal schedule, which means that you can work days
    and study at night, or work nights and study during the day, and everything is on your own time and at your own convenience,
    which means that you will be able to benefit exponentially
    from what the career development courses and training have
    to offer you.

  107. Light up the evening with glamorous Tarik Ediz gowns. Tarik Ediz designer prom dresses are synonymous with oplulence & allure.

  108. Aw, this was an exceptionally good post. Taking the time
    and actual effort to make a superb article… but what can I say… I procrastinate a lot and never manage to get nearly anything done.

  109. Have you ever considered writing an e-book or guest authoring on other websites?
    I have a blog centered on the same information you discuss and would love to have you share some stories/information.
    I know my viewers would enjoy your work. If you are
    even remotely interested, feel free to send me an email.

  110. These are actually wonderful ideas in concerning blogging.
    You have touched some pleasant things here. Any way keep up wrinting.

  111. Undeniably believe that that you said. Your favourite justification seemed to be on the web the easiest
    factor to take into accout of. I say to you, I certainly get irked whilst people
    think about issues that they plainly don’t realize about.
    You managed to hit the nail upon the highest as smartly
    as defined out the whole thing with no need side-effects , folks could take a signal.

    Will probably be again to get more. Thank you

  112. Very nice post. I just stumbled upon your weblog and wanted to say that I’ve really loved browsing your blog posts.
    In any case I will be subscribing in your rss feed and I hope you
    write again very soon!

  113. Howdy! Someone in my Facebook group shared this
    website with us so I came to look it over. I’m definitely enjoying
    the information. I’m book-marking and will be tweeting this to my followers!
    Great blog and superb style and design.

  114. My partner and I stumbled over here by a different website and thought I should check things out.
    I like what I see so now i’m following you. Look forward to finding
    out about your web page for a second time.

  115. I am genuinely thankful to the owner of this web site who has shared this
    wonderful article at at this time.

  116. Heya i am for the first time here. I found this board and I find It really useful & it helped me out a lot.

    I hope to give something back and help others like you aided me.

Leave a Reply