6 Tips to Drive Faster Page Load Times
Outbrain actively works on ensuring each user who is exposed to our recommendations enjoys a high-quality experience. Beyond the proactive measures we have taken to minimize our impact on publisher page load (read more here), we also have 6 tips to help you, our publisher partners, speed up page load and deliver a strong user experience.
#1 Keep “async” in code
We highly recommend keeping “async” in our code to ensure widgets load asynchronously and prevent interrupting the loading of other page elements. If for some reason “async” is removed from our code, we strongly encourage adding it.
#2 Optimize your CSS code but not Outbrain CSS
While it is good practice to optimize CSS code, it is important not to interfere with or override Outbrain CSS. We take active measures from our side to optimize our code, and attempting to change it can have negative consequences on page load times. When in doubt, please reach out to your Outbrain point of contact for support.
#3 Never cache or pre-render Outbrain widgets
Caching or pre-rendering Outbrain widgets slows down the loading of pages, and should therefore always be avoided.
💡 The next three tips are optional implementation improvements, recommended for our tech savvy publisher partners. This is because if they are not implemented correctly, they can cause some issues instead of improvements.
#4 Add the OB JS to the head section of the implementing page (Optional)
By moving the Outbrain JavaScript part from the widget integration code to the head section of the implementing page, the integration is consistent across the page (integrations of multiple widgets on the page will not need to repeat the OB JS) and loading is at its fastest. This is an optimal set up from a technical point of view and page loading, enabling a smoother user experience.
#5 Activate lazy loading of a widget (Optional)
Activating lazy loading of individual widgets helps by delaying the load until necessary. However, please be cautious not to activate lazy loading of Outbrain code resources or images. This could collide with the lazy loading we have proactively implemented across our network and could as such negatively impact performance.
#6 Use preload and preconnect (Optional)
Another way of reducing impact on page load is to preload and preconnect content in advance. We recommend using “preload” for outbrain.js; outbrain.js is then downloaded and cached as soon as possible, which makes it available immediately. “Preconnect”, for its part, asks the browser to pre-execute a connection to a domain (the use case is when you know you will be downloading something from that domain soon, but you don’t know what exactly). This enables you to speed up the initial connection. We recommend using “preconnect” for https://odb.outbrain.com, https://mv.outbrain.com and https://images.outbrainimg.com.
If you would like more information about minimizing impact on page load, please reach out to your Outbrain point of contact, and don’t forget to check out our blog post on the proactive measures we have taken from our side.