Optimize First Pages

Match Your First Page to Your Presence

Tailor the features on your first page to how your customers find you and what they need from your site.

• One-click presence: A site that most customers find through a search engine link, often because the site is selling a limited number of strongly branded products. Usually the products are presented on the first page and don't need an extensive search feature.

• Affiliate-advertising presence: A site that most customers access from partner sites, rather than a search engine link or through the home page. In this case, the landing pages from the affiliates must be fast and the home page can be larger or slower to load.

  Example: Sites selling movie merchandise that most customers find from individual movie sites. In this case, optimize multiple landing pages for customers coming from different affiliates.

Feature-focused presence: A site that offers a particular feature, such as a sophisticated search or Flash application, that is a focus of the customer access point. In this case, optimize all first pages to let the feature load quickly. Generally, this type of site has a loyal customer base that returns regularly to the site, ensuring that appropriate caching can help the site perform well, despite having more first page content than most sites.

First Page Identification

Use a web analytics tool (such as Google Analytics) to analyze your traffic to find what the top visited first pages are for your site. You could expect that your home page is the most visited first page, but instead discover that a landing page from another site or from customer emails is the most common entrance point for customers. The most visited first pages are the pages that you want to optimize.

First Page Page-Speed Evaluation

You can evaluate first page performance with any of these or other available online tools like PageSpeed Insights(PSI), or Lighthouse, a lab tool. There are several types of metrics that are relevant to how users perceive performance. If you’re using PSI, our recommended first page performance score should be 90 or above.

Below are important PSI metrics with recommended values for first pages:

First Page Optimizations

Below are some important landing page design considerations for platform scalability:

• Server-Side Performance - Analyze and optimize the pipeline or controller rendering of the first page with help of Pipeline Profiler or CCAC Dashboard Technical Reports to have an average response time < 500 ms.

• Calls-To-Action (CTA): Ensure you have one CTA and one form. Displaying multiple CTA buttons dilutes the power of your first page and could be overwhelming or confusing to site customers. A first page should have one desired action for the user to complete. A good landing page should have one message and can be short and sweet or contain a high volume of copy rallying around that message. Also, the CTA button should be large and use a color that stands out from the background of the page.

• Page Size Optimization: Page size is the total file size of all the resources that need to be loaded for the page to function. Page size impacts load speed of the page on a browser, and it can also have a big impact on mobile users.

  Ensure the Hi-Res images file sizes are optimized to < 6 MB or have dimensions not exceeding 3000x3000 pixels.

  Choose the right image file type - JPEG or PNG. Generally, images with significant color variation (such as, photographs) perform better as JPEGs. PNG is ideal for simple images with defined shapes, like those with text.

  If your landing page includes a series of similar-sized images (say, for a client logo bar), you can shorten your load time by combining them into an image sprite, then use CSS to display specific chunks of that sprite at a time. See Reduce URL and Page Size for more information.

• Javascripts and CSS - Minify HTML, CSS, and Javascript to condense your code so that browsers can read it faster. Remove Render-Blocking JS and CSS. Review the JS scripts and plugins on your landing page (including header and footer templates) and decide whether they’re essential to your visitor experience. If they’re not, removing them could help cut some extra seconds off load time. See Reduce and Reuse Scripts for more information.

• PDP-lite Approach: If the landing page for a product hype-event is to the Product Details Page (PDP), consider presenting a lite-version, that is the actual PDP without the add to cart button/link made available prior to the product being made available (online). This allows for the caching of key page elements prior to product being made available to purchase, thus improving delivery performance of the page when the product is made available (and the Add to Cart button or link is made active).

  It’s important that proper segmentation of cacheable elements occurs (using remote includes) and adequate caching policy or times are applied (in general, 24 hours for most PDP elements).

• Lazy Loading - Lazy Load CSS Background Images, product tile images or use appropriate placeholder images - dominant color from the original image or a low quality image.Trigger the full resolution image load using Javascript events - scroll, resize, and orientationChange events in the browser.

• Minimize HTTP Requests - Reduce the number of HTTP requests on the first page. Reduce the number of content slots or remote includes used. Internally each content-slot <ISSLOT> uses 2 remote includes. See Fewer and Smaller HTTP Requests for more information.

• Web Services Framework - Third-Party Service calls can have a significant performance impact on your entire site when the third-party service stops responding or is responding slowly. Avoiding content served from web services will significantly lower the page load time.

• Page Caching- Ensure the first page and target of a campaign is fully cached for 24 hours. It isn’t recommended to use unique parameters (such as customer IDs or email addresses) in the URLs embedded within your emails as this decreases the cache hit rate.