A Faster Website – It’s not a need. It’s a must!

 

By Danny Kulas

Fast-Internet-stock-photo-2.jpg

More people than ever before are getting online and weaving the world wide web into their daily lives.  From delivering the news to selling that thing on Amazon that your customer will surely only use once, having a reliable website is critical when trying to convert users to loyal customers.  A reliable website is one that provides a great user experience and a fast exchange of information when someone is interacting with your website.  If you click a link, you expect to be taken to that new page in little-to-no-time flat.  In this article I will detail areas of improvement that will bring your website ‘up to speed’ and help you convert those window-shoppers to loyal customers.

Why Does It Matter?

Three seconds.  That is all the time it takes for someone to lose interest in your site and go elsewhere to find what they’re looking for.  You have three seconds to show the user what they want to see, otherwise, you can forget about converting them to a loyal customer.  “A faster website means a better visitor experience.  A slow website will lead to a poor user experience.  Your bounce rate will grow.  Page views will drop.  Most important, you will lost money (Demian Farnworth).”  “If an e-commerce site is making $100,000 per day, a 1 second page delay could potentially cost you $2.5 million in lost sales every year (Sean Work).”  That should resonate with anyone who runs an on-line business.  No one talks about a great experience they had on some website, but they will tell their friends and family about a poor experience they had so that they know to avoid it in the future.  This will only compound the trouble because now, even though Mrs. Smith was the one who had the poor experience, she will tell anyone who will listen and now you have a whole bunch of Mrs. Smiths who never came to your website in the first-place nor will they moving forward.  You’ve lost a customer before they even had a chance to check out your site.  Another reason why you should care about the speed of your website “is that Google now uses site speed data to help determine where to list your website in its search engine results (Fred Meyer).”  For companies who have small advertising budgets, the search results page of Google might very well be your best bet for getting your business and services noticed.  I can speak from experience, in that I rarely venture to the 2nd or 3rd page of Google search results.  So, if you want to get noticed, make sure you’re showing up on the first page of results (if possible).

What Can Be Done?

There are several technologies and techniques to consider when looking to improve the speed of your website.  A simple Google search of ‘Make my website faster’ will yield several dozen results.  Some questions you might want to consider are: Do you use a lot of images?  Are you loading several script files?  Is there dynamic content?  Are you compressing your assets?  Answering these questions (and others not mentioned above) will help assist you on what to do regarding the improvement of your website performance.  Being able to identify areas of improvement is a skill that takes a trained eye, so if you’re not sure what you’re looking for, grab someone from your development team, sit down with them and do a website audit to get a better sense of what you’ll be dealing with.

Fake It (Above the Fold)

A website loads from top-to-bottom, so, by placing the specific CSS rules that govern the look-and-feel of the top-half of your website in the head of your HTML document, it will seem as though the website is loading fast and without pause.  The content we’re targeting is often referred to as ‘Above the Fold’ content and it’s what shows up first when a website begins to display it’s page.  What this does is give the user something to look at while the rest of the site is busy loading.  It’s not the most elegant solution and may even feel a bit ‘hacky’  but when used properly it can be of tremendous help.  Perception isn’t always linked with reality and sometimes, especially in this case, that gives you an advantage when trying to deliver an optimal website experience to your users.

Minimize HTTP Requests

You’ve built a website.  It’s very likely you’ve accomplished that by employing the use of several static resources, such as images, CSS files, etc.  Whenever someone visits your website, these files need to be loaded into the browser so that the user can view what they came to see.  The more files your site requires in order to load, the longer time it will take to do so.  This is the scenario we want to avoid and it’s pretty easy to do so.  After you’ve built your website, you might realize that you have three different CSS files, for example.  Each file counts as an HTTP request, which adds time to the page-load speed.  By combining those three files into one, you will increase the speed at which your website loads.  This is called concatenation and can be one of your best friends for increasing site performance.

Pictures and Pixels

If your website requires images, make sure you’re using the best image for the job.  What that means is don’t use a high-resolution, 1200 x 1200 pixel image for a site icon which would be better served using a scaled-down version.  “On top of the extra download time, precious processing power and memory are used to resize high-resolution images (Johan Johansson).”  Whatever you do, make sure to avoid “use of scaling, especially from larger to smaller images.  The image result might look fine on screen but the file size will be the same.  To truly take advantage of the smaller dimensions, use an image editing program and scale the image accordingly (Nathan Segal).”

Cache! Cache! Cache!

“Browser-caching stores cached versions of static resources (such as images or CSS files, for example), a process that quickens page speed tremendously and reduces server lag.  When a user visits a page on your website, the cached version will usually be served unless it has changed since it was last cached; this saves a lot of [HTTP] requests to your server and as a result makes it [your website] faster (Morgan Davis).”  Caching is a great technique for improving your page-load speed, but keep in mind that “the thing with caching, though, is that in most cases it only works for repeat visitors.  First-time site visitors won’t have the site cached yet, since the page needs to load files at least once before it stores them (Laurence Bradford).”  There are two types of caching to be aware of and those are Broswer Caching and Server Caching.  “Browser caching allows your browser to store static files for a while, so it doesn’t need to retrieve them every time you visit the site (Daniel Pataki).”  In terms of server caching, “instead of processing every request, the server takes the results of the these requests and stores them.  It then serves these saved results instead – making everything much faster (Daniel Pataki).”  Learn the art of caching and let your website benefit from that knowledge!

Consider Using a CDN

CDN stands for Content Delivery Network.  “A CDN takes a website’s static files – such as CSS, images and JavaScript – and delivers them on servers that are close to the user’s physical location.  Because servers are closer to the user, they load more quickly.  Larger websites implement CDNs to make sure their visitors from around the world have as fast an experience as possible (Morgan Davis).”  While using a CDN is a great option, it’s also an expensive one.  Make sure your company needs a CDN before handing over the cash to implement one.

Conclusion

Website speed matters, tremendously, to your customers and your bottom line.  Don’t be foolish by ignoring it, otherwise you may be left scratching your head wondering why your monthly revenue keeps falling.  Take the time to audit your website, identify areas of improvement and employ the use of any of the options I detailed above.  Your customers will thank you.

Advertisements

Web vs Native – Will it ever end?

By Danny Kulas

Web vs Native – Will It Ever End?

webvsnative

The web is dead.  Native is the only way forward.  These two statements (or any combination of them) could not be further from the truth and yet, these statements alone have created a crusade in which people are marching for the wrong reasons.  Designers and developers are becoming increasingly vocal on whether web or native is the answer for developing an application and framing the issue like that, i.e giving an ultimatum, is detrimental to the continued development of both platforms.  There is no silver-bullet for developing a new product and outright declaring one solution superior to the other will not only hurt your growth as a programmer but will have adverse-affects on your end product.  Knowledge is power and understanding and applying that knowledge is critical when beginning development of a new application. This is an issue for a number of reasons, some of which include:

1. Not understanding your business goals and needs

2. Not understanding how web and native solutions can (and often do) work together

3. Some people are just close-minded

4. And the list goes on

“Let’s embrace the advantages of both native and web to create more holistic mobile experiences (Brad Frost).”  Brad makes a bold statement, one that won’t soon become the widespread norm (although, it would be nice if it caught on soon!), but it does give us a goal to work towards.  In the following paragraphs I hope to show you why both mediums are desirable and give you the knowledge to know which solution is the proper one for your situation.

Why Web?

When developing a new product, designers and developers will choose web as their main platform for a number of reasons, chief amongst them being low friction to entry and immense reach.

“The average mobile user visits far more sites per month than individual apps – I’d postulate because installing an app has a somewhat high cost; you have to knowingly wait for the app to install, possibly agree to a EULA-like list of permissions that you may not understand (or more likely, haven’t bothered to read), and then you’ll be reminded of this relationship forever after by that icon in your home screen (if not notifications popping up) (Chris Wilson).”  On-top of this, many app stores command a cash-fee for being able to deploy your app within their ecosystem, which can immediately price people out of their app store environment, or creating a native application all-together.  I can vouch for Chris’ sentiment when it comes to downloading certain native applications.  In fact, there have been times when I’ve downloaded an app from the Apple App Store and after attempts to sign-up, set-up and accept any terms and conditions, I was already desensitized to the idea of using the app.  Besides, I know that I can go find the same information I’m looking for on a native app on the web, as well, and oftentimes with less barriers in the way of that information.

This is what Chris is referring to when he mentions “low friction to entry” in his article.  In a day-and-age when everything is instant and people want information or content yesterday, waiting around for benign processes to complete can be a disadvantage that could potentially have devastating results.  Being able to reach users all over the world is a massive advantage the web holds over native applications.  For example, perhaps there is a game in the Apple App Store that you dearly want to download and enjoy for hours on end but can’t, because you own XYZ-smartphone running on a different operating system than the game was built for.  If it’s not clear to you, that means you won’t be playing Smash The Hamster anytime soon on your smartphone, unless of course the team behind the game decides to expand their code base.  Native applications, by their nature, raise the barrier-of-entry significantly, providing an experience only to those who own a smartphone that runs on an operating system that the original application was built for.  This is not the case with the web.  Whether you’re using FireFox, Chrome, Opera, or (God forbid) Internet Explorer, you will still be able to access the same website with the same features, anytime, anywhere, on any machine in any browser.  I believe that is what people in the industry refer to as ‘reach’ and ‘accessibility’.

In addition to why the web is preferable over native is due to it’s low amounts of “junk”.  When you download an app from any app store, it remains on your phone.  Whether you use it once, twice, or never, it will still be there, taking up space and running updates in the background using up your data, which does cost the end-user money.  Ever get those text-messages from your cell-phone service provider saying something along the lines of “You have exceeded your monthly data limit and will be charged blah blah blah.”  You can thank your apps (the ones you’re using and even the ones you’re not) for that.  On the other hand, websites are ephemeral, meaning that they aren’t lasting and by that I mean a user doesn’t need to download anything to get the content they’re looking for.  They [the users] can go to your website (many times as an anonymous visitor, i.e most news websites), absorb content and then leave, without so-much as a hiccup getting in their way.  There is no “junk” remaining on their phones or in their browser and the user (likely) never had to provide any personal data that would reveal their identities.  Get in, get out, get on with it.  And last, but certainly not least, you only have to maintain one code base in order to reach all devices and platforms, whereas in native app development, you may have to develop for iOS, Android, Blackberry, Windows, etc.  That’s 4 different code bases that a company would need to devote time and resources to in order to deliver their product to the end user.

Why Native?

Many teams choose the native route for several reasons, but chief amongst them is the access to the device’s hardware and features as well as the sheer amount of people who own a smartphone.  “Today there are about 2.6 billion smartphone subscriptions globally, and while growth has been leveling off in developed markets like the U.S. and Europe, it’s not stalling altogether by a long shot (Ingrid Lunden).”  With numbers like that (and still growing) it is abundantly clear, for this reason, why developers would choose to go native.

“Native apps, since they are built specifically for that device, get access to all of the features of that device.  iOS and Android devices all have accelerometers, GPS location, magnetometer (Compass), cameras and a whole host of other features.  With native applications you get to use these features and it’s usually a pretty simple addition to make to the app.  With web apps you struggle to access many of these features and implementing them can be a huge pain (Dave Leverton).”  While the web has certainly made great progress, it is still lagging behind native in terms of feature-interaction and using them in your design.  Sometimes, designers like to mirror native on their web applications and that can often be a massive challenge because the tools you need aren’t necessarily “under the hood” much like they are for native applications.

Another huge advantage of designing a native application is that they “are given access to all the tools of the trade when it comes to building the UI for the apps.  You are given all of the standard user interface items, such as the iOS standard navigation bar, or the Android’s action bar.  Having access to these user interface items can make the app look and feel like it was made by Apple or Google themselves.  On a web app these items have to be mimicked to look and feel the same, meaning that a lot of the time ‘things just don’t feel the same’ (Dave Leverton).”  This is quite true, too.  Many times, clients will ask for a website that looks and feels just like a native iOS (or Android) app and this is often hard to achieve due to the reasons mentioned above.

“When going the native route, you can leverage the marketing power of the app store.  It doesn’t really matter which store.  The fact is, they all try to help market your app with free exposure or promos you wouldn’t get otherwise (Rachel Appel).”  Just by being placed in an app store you are thereby given free advertising.  You don’t need to do anything (aside from having an application that will actually benefit people, but that’s an entirely different topic for a different day) for people to see or find you in the app store.  Considering FireFox, Chrome, Opera, etc. don’t do anything on your behalf to market your website, I’d say this comes as a big upside.  Now, I’m not saying that this free marketing and advertising provided by the app stores are the end-all-be-all, not at all, but it is a nice compliment that browsers simply don’t provide.  Marketing a product can be a monstrous task and any added help (no matter the size) is beneficial to your end product.

Moving Forward

As the industry continues to move forward, big strides in innovation and implementation standards will be made that will better synthesize these two platforms.  To continue the argument of native vs web would be a disservice to the community as a whole and instead we should be holding court on how these two mediums could together and independently to provide a richer experience for the end-user.

“Properly designed web apps in the modern world can be incredibly responsive, and with re-engagement features like push notifications being added daily, the web is now a viable platform for engaging user experiences (Chris Wilson).”  Things that go-fast are no longer relegated to planes and automobiles (or native apps, for that matter).  Website innovation is evolving at an alarming rate, browser feature-adoption is plowing ahead at blazing speeds and all the while end-users are benefiting with a web ecosystem that has their concerns in mind.

At the same time, “there will always be reasons to build native applications.  It’s quicker to innovate platform APIs when you don’t have to go through standardization and browser implementation (Chris Wilson).”  As a web developer, I can certainly agree with Chris’ concerns regarding “red tape” and the world wide web.  While it is good to know that there are groups of people helping to push the web forward in a progressive manner, this can oftentimes add months (or years) to the release of any new features.

Conclusion

When you go to the golf course, you wouldn’t exclusively use your driver throughout the duration of the round, while neglecting other clubs that might (probably) will do a better job.  Much in the same way, the web will not solve all of your problems and neither will native.  Understanding your business goals and needs is paramount in beginning to understand what path to take when starting development of a new product.  Each platform has it’s own strengths and weaknesses, all of which should be carefully considered.  “At the end of the day, it’s about humans creating and sharing content, so don’t make the mistake of thinking native apps and the web are somehow opposed to one another.  Whether it’s your tap or your hose, the water in your house comes from the same place (Charles Lim).”