The Issues with Parallax

This article will focus specifically on parallax, but its broader meaning applies to all new web design techniques.

My thoughts can be boiled down to one simple phrase: "Focus on the consumer experience." I think most new web developers get wrapped up in staying current that they actually don't understand what they're doing or why they're doing it other than "keeping up with the Jones"; I know this was true for me when I first played with parallax. I encourage experimentation and learning new techniques, but it seems that some developers miss that step and immediately apply this new technique without learning it's caveats and quirks. This may be because Google has become such a crutch to new developers.

What is Parallax?

First of all let's explain what parallax is in the context of web development. It's the effect of having multiple layers on top of each other all moving at different spaces giving the effect of depth. This demo by Keith Clark does an excellent job of explaining it visually, just be sure to click the debug button.

Performance Issues

This method, when used in conjunction with large images and background-size, will likely significantly lower your website's FPS. This is due primarily to the number of repaints the browser must do. This means with each scroll the browser much render the viewport again. This is costly FPS-wise and is a major point that will be addressed in a future article. A few ways to fix this are to limit your image to a couple resolutions and set media queries to handle setting those specified resolutions. Removing background-size and using another responsive image solution (perhaps a JS solution if applicable but be wary of load time). Lastly, and I recommend against this but it is viable, adding transform: translateZ(0); That is a little hack that will essentially force all browser rendering to be done on the GPU. This will most likely improve performance in Google Chrome.

The Real Cost

The issue is that when parallax is used properly it can create some amazing things, but unfortunately for every one good parallax website there are at least 6 bad ones, but there are so many more issues with using parallax that I think we won't see the effect of until later down the line. For instance what is the longterm impact on user web interactions by using navigationless parallax scrolling? What sort of precedent does it set?

There's also some debate over the usage of parallax and it's impact on SEO. This is due to the fact that it's load is increased, there are no keywords in the URL.

Conclusion

If you're creating a portfolio site, or some type of specialized site, be it single-serving or special interest, then by all means use whatever you want to use. I just urge developers to reconsider and see if parallax, or any new technique, is really something they want to use on a commercial site because it could skew the percieved standards we as developers want to keep. We don't want users to be okay with 15FPS scrolling, slow loading, or websites that couldn't even make it to the the top of AskJeeves because of it's poor SEO.

P.S. I don't claim to be an expert so if some information is incorrect feel free to let me know in the comments.