Remediating poor performance
Brightspot's technical support tests many customers' web sites and individual web pages. In almost every instance of poor performance, the main contributors are third-party requests and media formats. The following sections explain these causes and how to remediate them.
Minimizing third-party requests
Third-party requests are elements within your web pages that request content from a third-party site. Most of these requests are for ads from an ad service (such as Google AdSense) or for posts from social media. Each request sets off the entire HTTP request process: sending the request to the server, the server assembling the response, the server sending the response to the client, and the client processing the response. Given this extra network load, you should optimize your third-party requests.
- Reducing the number of third-party requests in a page increases the page's performance but possibly sacrifices ad revenue or social media engagement.
- Adding third-party requests in a page reduces the page's performance and increases the visitor bounce rate, but possibly sacrifices ad revenue or social media engagement.
Image formats
Almost every web page includes an image, and enterprise web sites often contain very attractive images with many colors. This richness adds enormous size to the image itself as well as the entire web page. In particular, some publishers upload very large native images (more than 10 mb) and use .png instead of .jpg. (For photographs, .png is larger than the same image saved as .jpg.) Selecting the correct format mitigates to a large extent the size of an image, and therefore the page's performance.
The recommended format for all images is WebP, which can reduce image sizes by 25%–30%.
Exploit lazy loading
Generally, web browsers load images as soon as possible, which can result in resource competition when loading multiple images, or loading images that can wait because they are outside the visitor's viewport (the visible portion of the web page). Modern browsers can use lazy loading to postpone retrieval of images outside the viewport. If your web pages have rich graphics that, upon initial load, are outside the viewport, consider asking your front-end developer to specify those images be loaded lazily. For more information about lazy loading, see Browser-level image lazy loading for the web and Native image lazy-loading for the web!.
Develop content for mobile first
Editors or graphic artists using Brightspot typically do so on a desktop with multiple screens, a wired network connection, and while working close to powerful servers. In this work environment, they may forget that their visitors are likely using a mobile device with a small screen and potentially moving in and out of WiFi or cellular coverage. As you develop text and graphics, keep in mind that visitors may not see the same rendition that you see. Consider using fewer ad injections, fewer media files, or smaller media files. Also consider using Brightspot's preview pane with mobile or tablet device sizes so you can see what your visitors see.
See also: