In a previous post, I focused on protecting your website with some guidance on fighting back against hackers. The goal? For visitors to be confident in your site’s availability and security and return regularly, leading to repeat business.

Now that your website is a secure destination, let’s get back to the reason you went with a Content Delivery Network (CDN) in the first place: to improve the performance of your web application, and by extension, customer satisfaction. Unlike security, optimizations of a webpage’s markup (html) are immediately recognized. Better web performance improves engagement with visitors, and more satisfied visitors lead to improved sales. Let’s explore Front-End Optimization (FEO) techniques you can apply to your site’s markup.

Less is more, more is more

Start with images. In all likelihood, your markup requests logos, banners, and other eye-catching images. Images contribute over 50 percent of a web pages’ file size. This impacts page load time. Depending on how they were originally created, images may be compressed further and re-encoded in existing file formats or ported altogether to newer, more efficient formats.

Additionally, images may be scaled to meet the screen size of visitors’ preferred devices. For starters, consider creating specific variants targeting desktop, laptops and tablets, and mobile phones. FEO gathers information on visitors’ devices and then selects the best image size to serve dynamically. Both file format and scaling techniques reduce file size, saving bandwidth that even simple web pages can consume and improving user experience.

Take your coat off, stay a while

FEO examines a webpage’s entire markup and prioritizes loading scripts required for functionality and layout. Core functionality in JavaScript and Cascading Style Sheets (CSS) detailing layout rules are typically served from the same origin as html. However, unforeseen circumstances can cause third-party JavaScript to increase page load time, leading to visitors to abandon your site.

Have you ever visited a site only to get stuck on an hourglass while a sharing button or ad is loading? This is sometimes a result of network issues reaching third-party servers. FEO makes sure a page’s markup loads your content — the product or news you want visitors to share — first. After your content is rendered, browsers are free to make requests to third-party servers for support components, such as social sharing or sponsor advertisements. Optimizing in HTML, your site will be leaner and meaner.

FEO extends beyond markup, also making improvements at the protocol level by:

  • Consolidating HTTP requests
  • Maximizing TCP connections with HTTP Pipelining
  • Tuning HTTP cache control header values

The big return is shorter page load time, allowing browsers to pass control back to visitors – sooner rather than later.

Scale, then sit back and let FEO do its thing

After investing in getting new visitors to your site, the last thing you need is a high bounce rate due to poor page performance. Consider the following questions to further optimize your site.

  • Are images on your site compressed as much as possible?
  • Have you appropriately sized images for mobile and tablet viewers?
  • Do your html pages prioritize server calls, allowing visitors to quickly act on their requests?

Web performance optimizations such as these will move visitors to the front of your checkout line instead of checking out altogether.

What optimization techniques have you employed on your site — and what have you noticed as a result?