Academy For Developers

How to Improve the Loading Times of Playbuzz-Powered Content

Quick loading times are crucial to creating a positive user experience for your readers. Our regular embed code, which you can copy from any public Playbuzz item, was designed for simplicity. All you need to do is copy the code, and then paste it on your page.

A lot of effort was put into optimizing the loading process of our items, so that they will load quickly and won’t become a bottleneck for your own assets. Below details how you can achieve faster loading times on your Playbuzz content.

Embedding in the <head> section

Although copied as one, the embed code is actually comprised of two parts: the script, in charge of rendering the item, and the div, which serves as the placeholder for the item. The div also provides some relevant information necessary to display the item properly. In the example below, the <script> tag is marked in blue:

<script src=”//”></script>
<div class=”pb_feed” data-item=”0777dfcb-48fa-4c71-a5f7-43844ee8cf0b” data-embed-by=”1ac33379-1205-4a19-a95d-f3535e24c97f” data-version=”2″ ></div>

To further improve loading times, we recommend that the <script> section of the Playbuzz embed code be placed inside the <head> section of your page. By doing so, you are ensuring that the code in charge of rendering the Playbuzz item will be present and ready even before the page begins to render.

The <script> tag can be placed inside your page’s head section. The <div> still serves as a placeholder, and should be placed wherever you want the item to be rendered. The following is an example of a simple webpage, with the <script> placed in the <head> section:      

        <title>Page Title</title>
        <script src=”//”></script>
            <h1>Playbuzz embed example</h1>
            <div class=”pb_feed” data-item=”0777dfcb-48fa-4c71-a5f7-43844ee8cf0b” data-embed-by=”1ac33379-1205-4a19-a95d-f3535e24c97f” data-version=”2″ ></div>

Note that the <script> (marked in blue) was placed in the page’s <head> section, while the <div> is serving as the placeholder for where we want the item to appear.

Please note:

  • You can include the Playbuzz <script> tag in all of your pages, even if no Playbuzz item is embedded there. The script is simply looking for the Playbuzz placeholder to start rendering.
  • If you have the Playbuzz script in the page’s head, and then paste the regular embed code (including the script),no harm will be done. Your browser is smart enough to know that the script was already loaded, and the Playbuzz code also makes sure that it doesn’t run twice.