Posted on

Technically Artistic or Artistic … Technically

Before going any further in this post, refresh this page. I’ll wait 🙂

Notice how the header image changed? Try refreshing it again.

I can’t exactly account for how “pretty” or not each version may have been for you, but I’m basically grabbing screen shots of one of the first programs I ever wrote back in 1997 in Basic. You can see an actual “moving” demonstration at the end of this blog post. This simple program has a certain significance to me as it was one of several major “aha” moments in my younger days, informing me that programming computers is basically “my jam”.

What really impressed me with programming is that someone without the “visual” artistic capabilities (I’m more of a wordy kinda guy if you couldn’t already tell) could create something visually striking with numbers, formulas, and a general know-how in math. The program basically draws a matching circle in each corner of the display area of a random radius, color, and border thickness – and it does this every tenth of a second. The result is what you see. I could seriously watch that kaleidoscope-esque effect for embarrassing amounts of time.

I’ve been thinking about this program a lot in the fast few weeks, so much so that I wanted to dust it off and give it a more modern home (a web page.) I’m currently chewing on how to bring this design philosophy to life, how to inject more personality into my clients (and my own) web properties. What you are seeing here in this blog post is my very first attempt. The image you see at the top of the screen is a new image, one that no one else has seen or will ever see again once you move off this page. And yet, its not SO random that everyone gets a different experience altogether. Everyone is going to see 4 * 1000 circles, with their centers anchored in the corners of the screen.

My thoughts on improving this over time (progressive enhancement) is to dial back on the randomness somewhat – making more palatable color combinations a virtual guarantee versus blind luck. I also think that adding in subtle responses to user input (mouse movements, etc.) would help increase engagement and time on the page in question. Finally, there seems to be a real opportunity here to utilize this method when both constructing and testing page variants. Humans are limited in the number of versions they can feasibly generate and test; computers are not. The pages that could come out of this kind of approach are … well, limitless really.

Anyway, enjoy one of the first programs ever written by yours truly!

Your browser does not support the canvas tag. This is a static example of what would be seen.
Posted on

Importance of Page Load Time

When a web visitor clicks a link that leads to your website, there is a symphony of digital activity behind the scenes. The number of handshakes happening between the layers of software across a multitude of machines in fractions of a second would truly astound any onlooker, if such a thing were viewable. We all effortlessly stand on the shoulders of giants when we participate in an internet browsing session, and you get a real appreciation for that fact when learning how web pages are assembled on the visitor’s machine. While we all undoubtably benefit, this complexity is not without its own set of costs for those of us looking to make a living on the web. Without a Maestro guiding the process, the performance can derail into a cacophonous mess.

The time it takes a website to fully display any given page is that page’s “load time.” This delay is due to the awesome process I describe above, a concert of software packages, multiple computers, and a labyrinth of networks. Some “pause” is unavoidable, even for the fastest website. It is our responsibility as “webrepenures” to ensure our websites minimize this delay as much as possible. Our visitor’s time is valuable, and extra seconds between each page add up over time.

I put together a demonstration on page load time. It both shows loading times in action and discusses why we are concerned with longer load times. Definitely check it out if you can, but the bottom line is this: Lengthy load times cost you both in the short and long terms. Short term when an impatient but conversion-ready visitor on a mobile device leaves your website for and goes to your speedier competitor’s site. Long term as major search engines like Google make a note each time something like this happens, deranking you and upranking your competitor’s site. Its not something a serious website owner can take lying down any more.

The crowning example of the importance of page load time comes from Amazon. Through careful study and analysis, they determined that a 1 second delay in their average load time costs them roughly $1.6 Billion in sales! I’m sure you can only imagine what kind of a fire this lit under their collective behind to shave off every tenth of a second they possibly could, using any and every tactic available in the book. Its not some abstract trend that only affects Amazon, everyone who maintains some kind of digital space on the web suffers from the impatience of web visitors.

I always encourage my clients to determine their own “cost of excessive loading.” In this exercise, I assist my clients in comparing the group of visitors who did something “valuable” on their website against those that did not. Using Google Analytics, this is often a quick 15 minute investigation (especially when GA has been configured properly.) The trend is always this: the “valuable” group will have a lower average load time when compared to the “no valuable action taken” group. Though there is certainly a degree of “noise” in that measurement, the trend is still worthwhile to note. With smaller gaps between those groups, page speed optimization may fall behind other digital priorities. Larger gaps between these two groups indicates a strong possibility for lost revenue and organic ranking, and that drafting a roadmap to better page speed performance is most likely in order.