Two new website designs have recently grown in popularity as marketers look for clean, concise ways to tell their company’s story. Single page design is—you guessed it—a website that uses one web page to display all of the site’s content. Parallax scrolling has been around in video games for years, but is becoming an increasingly common part of the scrolling feature of a web page. Parallax scrolling uses multiple backgrounds that seem to move at different speeds to create a 3D effect. Oftentimes single page design and Parallax scrolling are used together.
It’s easy to see why people love sites that use these design techniques. They’re compelling and easy to follow. However, because all of the graphics and text are on one page and these sites often use video, they can also be a performance nightmare if not optimized correctly.
Slow Pages Sink Sites
As we know, page load times and Time to Interact (TTI) are important metrics to track when it comes to creating a great user experience. Optimal page load time is still less than three seconds; any longer and sites risk losing customers and sales. (How fast does your website load? Test it here). However, websites are not doing a good job of meeting this industry standard as a recent “State of the Union” survey from Radware indicates. In fact, page load times are continuing to get slower.
Another Side of Creativity
Web designers are creative, but now they also need to be creative in terms of how they address web performance. Here are three tips to keep in mind when creating single page design and Parallax scrolling websites:
- Keep in mind that network effects (DNS look-up, latency, integrated network interactions) have a significant and growing impact based on geography and the use of third-party hosted elements.
- Utilize JavaScript and Flash, along with HTML and CSS, to fit more content on a page without substantially increasing load times.
- Use lazy loading to load only the content that’s visible to the user immediately right away. While the user is engaging with that content, load other content so that the user does not endure interruptions or wait time. Lazy loading techniques can be hard-coded into your website with JavaScript using plugins.
- Use website performance tools to test your website performance regularly using different browsers to ensure any website performance changes do not impact user experience.
Website developers that keep aesthetics as well as performance in mind when using these new web design techniques will reap the rewards of a beautiful site that meets user expectations for page load speed as well as TTI.
