5 Homepage Best Practices for Better Performance

  Website Design & Development
Tyler Pigott
Tyler Pigott

10.28.2019 | 6 min read

In this modern digital age, a website homepage cannot settle for a flashy business card on the internet for potential customers to see. The competition is fierce and the stakes are too high to have a homepage that doesn't attract and convert website visitors into customers.

When a website visitor chooses to visit your homepage you get less than 5 seconds (for the record, that's a generous amount of time) to pique their interest, lock in their attention, and persuade them to take an action. With so little time and the number of variables at hand, it's imperative that the foundation of your homepage is set properly.

In this post, we'll review five best practices of a homepage that will prepare your website for peak performance.

website services c

Five Homepage Best Practices

  1. Page Speed
  2. Optimize for Mobile Device
  3. Create a Clear Message
  4. Call-To-Action
  5. UX/UI
  6. *Bonus* Homepage Checklist

1. Optimize Page Speed

First impressions are everything. Brilliant web design is useless if it takes too long to load! If your page takes too long to load, prospects will hit the back button before they even see it. According to research by Akamai and Gomez.com, 47% of web users expect a site to load in two seconds or less, and 40% abandon a site that isn’t loaded within three seconds. Long load times affect your search engine rankings and increase the bounce rate. If your page takes longer to load, focus first on fixing the technical issues that are causing the problem. Keep in mind, Google values the technical components like site speed for SEO.

For a complete guide about optimizing for site speed read more here.

2. Mobile Devices Matter

In 2015, Google first announced that searches via mobile devices had exceeded those via desktops on a global basis. That announcement is likely not as shocking to hear these days. Take a look around next time you're out to lunch or riding the subway and you'll most likely see people staring directly at the phone in the palm of their hand.

That number of mobile users has continued to grow, and is higher in the U.S., although Google hasn’t provided exact figures. Regardless of the number, you’ll likely see this reality reflected in your site’s Google Analytics numbers. A significant portion of your prospects are looking at your site on a smartphone or tablet, so be sure that your website design looks good and is easy to navigate. Images should resize, text and buttons should become larger, and elements should reconfigure automatically for positive user experience.

Think about how your favorite applications operate on your smartphone today. The ease-of-use and ability to navigate exactly where you want to go is exactly the design thinking you should consider when laying out your mobile experience.

3. Clarify Your Message

People are busy and attention spans are short. The headline in your hero section (above the fold) needs to communicate your primary message quickly and clearly.

Don Miller, author and founder of StoryBrand says it best when it comes to your core message, "if you confuse you lose."

Remember, you only have a few seconds to engage a website visitor. Don't waste that priceless time with an ambiguous message.

If you forfeit clarity for cleverness, you'll lose.

How do you create a clear homepage message?

First thing's first.

Understand your target audience. At the end of the day, your ideal customer is the hero of this story (spoiler alert if you thought it was you). That being said, what are their core challenges? As it relates to their challenge, how does your solution help them overcome the challenge they face?

These questions just scratch the surface to better understand your audience. Once these questions are answered and you know their challenge, what's needed to overcome it, and the steps to being successful, you'll be on the right track to perfecting a clear message and compelling tagline.

The bottom line?

Prospects should be able to immediately understand what you do and how you can help them when they land on your homepage. Be sure that the message explains exactly how your customer's problem will be solved by using your product or service — don't be afraid to be specific with their pain points and your value proposition. The more specific you are, the easier it will be for prospects to envision themselves thriving when using your product or service. And since you don’t want prospects to miss this message, place it at the top of the page where it’s clearly visible.

For more tips on creating a clear message, learn about the three steps to clarifying your message.

4. Direct Calls to Action

In 2000, Stanford University psychologists Sheena Iyengar and Mark Lepper published a surprising study that revealed what happens when people are given too many choices. They set up a display table at local food market with 24 different kinds of jam and offered the jams for sale. Only 3% of the shoppers purchased a jam. Next, at the same market, they set up a table with only six different types of jam. Nearly 30% of the shoppers who encountered this table bought a jam. Choice overload results in people stepping away without taking any action.

What can we learn from this?

Refrain from overloading website visitors with too many options to pick from. The two most common places for choice overload is in the navigation menu and the call-to-action.

Keep your navigation simple and easy to use. Too many dropdown menu options are overwhelming. What are the top three or four pages (think high intent pages) you want to drive visitors to? Keep those in the main navigation, reserving the prime real-estate in the top right corner for your primary call-to-action button (more on this further down).

"Where do I put the rest of my pages?"

You don't have to cut ties with them completely. Move them out of the spotlight to the backstage (a.k.a. the footer). Organize and display them nicely in the footer of your homepage.

Primary Call To Action (CTA)

Pick one Primary CTA and one Secondary CTA to promote on your homepage. The primary offer should be for those prospects who are ready to purchase — a complimentary consultation, a free demo, or a trial subscription, for example. Some call this "bottom of the funnel" or the point of conversion. Whatever you choose, make sure that the offer is clear and direct.

Place the button in the top right corner of the navigation bar as well as the main hero section. We recommend that these buttons have the exact same text.

Secondary Call To Action

The secondary offer should be for those who may still be on the fence, researching or aren’t quite yet ready to buy.

This offer should be a gated piece of content on its own landing page that provides something of real value to prospects, such as an e-guide, a helpful checklist, or mini-course. The goal here is to convert the visitor into a lead that can then be nurtured into a customer.

Answer this question, if they aren't ready to buy, what's something of value you can offer that's worth them giving up their contact information?

The secondary call to action can be strategically placed next to the primary offer in the hero section, scattered throughout the homepage or used as an exit intent pop up.

5. Implement Insights from UI Design

"You should create the illusion that users aren’t interacting with a device so much as they’re trying to attain goals directly and as effortlessly as possible." (from Interactive Design Foundation)

UI designers are focused on one thing: making website interfaces easy to use so visitors stay on the site and take a desired action. While there are hundreds of design principles that boost the usability of a site, even just implementing the basics will elevate your homepage design and increase conversions.

Here are the essentials:

  • Keep it simple. Remove everything that’s unnecessary and make all copy and labels clear.
  • Group related items together. Spatial relationships between items clue prospects in to the nature of the items and what’s most important. Allowing plenty of space around elements will also boost readability.
  • Stay consistent. Using common elements that people are used to interacting with will help prospects navigate your site more quickly.
    Use color and contrast strategically. Color scheme and white space can help direct attention and emphasize certain elements, making it easier for prospects to process what’s on your page.
  • Use typography strategically. Proper use of typeface size and fonts will help prospects better scan and read your copy. Contrasting sizes (using large sizes for headlines and important messages, and smaller sizes for supporting text) will also help prospects process what you’re trying to communicate.
  • Keep users aware with status updates. Using notifications to keep prospects aware of actions they’re about to take or errors will make interacting with your homepage easier.
  • Use defaults to speed up the process of using your site. Creating defaults will allow prospects to accomplish tasks on your page more quickly. For example, have form fields pre-chosen or filled out if you know the prospect’s preferences and/or information.
    These best practices will make interacting with your homepage easier and faster for prospects, increasing the chances that they’ll stay on your page long enough to be persuaded to take action.

    Bonus: Homepage Checklist

Looking to enhance your homepage? Here are the foundational elements that must be included! 

  • Navigation Menu (less is more)

  • Clear Header Message
  • Tagline or brief description
  • Primary CTA (top right navigation and hero section)
  • Testimonials or "trust symbols" for social proof
  • Value proposition or solutions
  • Secondary CTA (valuable lead-generating asset)
  • Footer catch-all (i.e. social media, grouped web pages, search bar, contact information, etc.)

Need help optimizing your website for conversions? Get in touch to find out how we can help!