The Parallax Scrolling Dilemma

The biggest problem with parallax scrolling themes is the reduced benefits derived from SEO efforts due to the increased loading times which lead to higher bounce rates and fewer customers.

If you look at Awwwards, The Favorite Website Awards (, Unmatched Style, and many other websites that “give” (actually for most it is just paid advertisement) awards for the best designed websites, a large percentage of those sites are parallax scrolling sites.

Many of these sites do look amazing; one even has a spinning globe with planes circling the globe, very stunning and fun to look at, after it loads.

Try the same site on an iPhone; will likely take double the time to load. In some cases it can take up to a minute to load all the effects onto a mobile device and both Google and Yahoo state that the average waiting time before clicking another site is 3 seconds.

The reasons these sites win awards or are placed higher on the list of paid advertisements are that these sites are fun to look at, but fun doesn’t pay the rent. A website’s design must be functional as well as fun to look at, when the design of the site defeats the SEO efforts, isn’t it a bit like socking yourself in the eye because you like the black & blue hue left by the bruising?

Contrary to popular belief and what has become the norm, parallax scrolling does not need to be a single page with continuous scrolling. And of course, there is a common misunderstanding among perspective website owner that this concept is easily implemented, the fact is that it is not and it places a large onus on the owners to create most of the content before it is designed. And, since it is more difficult to make changes to the site after set-up, the owner is handcuffed to the developer, unless they are very proficient with JavaScript or CSS3.

A few things to bear in mind when designing a site using Parallax Scrolling

  • Loading times
  • SEO
  • User engagement
  • Browser compatibility
  • Mobile-Friendliness
  • Animations that become distractions

How to reduce loading times

The same concept applies to sites utilizing parallax scrolling as to other websites; optimize the images and use as few as possible. Other than that, you only have two choices for parallax right now: JavaScript or CSS3. With CSS3 it is almost impossible to create a fast foreground with the slow background effect that is necessary for sharp focus. Yet, the use of JavaScript will allow creation of a complete and genuine parallax scrolling site, but the load time will be frustratingly slow.

Many award winning parallax-scrolling sites have reverted to conventional designs to increase loading times and cut bounce rates, those that remain usually have an established brand and/or rarely use organic search to drive traffic to their site.

How to maximize SEO and utilize Parallax Scrolling

One technique to maximize SEO, if you really must have that parallax scrolling design or theme on the website, is to use it on one page while utilizing the other pages for SEO content. This will provide the best of both worlds.

That page would include the internal links to pages containing content with a single H1 header above the fold, Meta tags and descriptions, as well as page titles with keywords that boost SEO. This also allows for a greater natural disbursement of keywords and phrases without overcrowding a single page with the same keywords.

Another problem with parallax scrolling is that it is heavily dependent on images and not content, when everyone knows Penguin penalizes websites that are void of rich content. So the idea of using the parallax scrolling effect on a single landing page with internal links to pages with content makes sense.

User engagement/experience or UX

In a recent Purdue University study, “it was hypothesized that parallax scrolling would improve user experience and influence user preference. However the acceptance or rejection of these hypotheses depended on whether parallax scrolling improved perceived usability, enjoyment, fun, satisfaction, and visual appeal. These five variables have been claimed to directly affect overall user experience. With the exception of ‘fun’, the Mann-Whitney test failed to return any significant differences between the two experimental groups with respect to these variables. Therefore the hypothesis that parallax scrolling improves user experience and preference was rejected.” As I stated previously, fun doesn’t pay the rent

It is a challenge measuring a visitor’s interaction using Google Analytics, without adding additional code, the only true indicator for single-page parallax scrolling is time on page. Parallax scrolling prohibits gathering much usable data regarding the UX or engagement.

Browser Compatibility

It is one of the most irritating issues for both users and developers. What works well on Safari, might not work so well on Chrome or any other browser. Testing across all browsers is necessary to ascertain compatibility.


Traffic to all websites from mobile devices has increased by 78 percent and now accounts for 24 percent of all traffic. However, due to loading times and other considerations, parallax scrolling is in most cases prohibitive on mobile devices and it would be unwise to ignore that much traffic just to provide users the “fun” experienced with some parallax scrolling. And yes, top-end smart phones can display these effects, but what about the others? The only other alternative is to deploy two websites, preferably with different content to avoid duplication, yet again is it worth the additional expense?

How can website owners avoid the Parallax Scrolling problem?

Small businesses that depend on organic search results to drive traffic to their sites should avoid parallax scrolling, or face less control over their own websites and the added expense paid to designers who will need to make even small changes to their site.

Additionally, more money will wind up going out of the business to support additional SEO efforts. In the long run it is easier to build user trust and confidence through rich content, than through the fun gimmicks provided by these 3D effects that only add “fun” not function to the user’s experience.

Ready to get started?