Optimization

What's a CDN? Who Is It For?

CDNs or "Content Delivery Networks" used to be reserved for getting content delivered more quickly to distant regions of the world, often for higher-traffic sites. Today, it is an umbrella term, increasingly used for web and mobile performance acceleration, security, and peace of mind for all websites. You will notice that many of the leading providers distance themselves from the term a bit, calling themselves a "cloud platform" or "cloud network platform", but the term "CDN" persists as the only way to recognizably identify this layer of the internet ecosystem that makes websites faster and more secure.

Why a CDN Is For Everybody: Performance, Security, and Peace of Mind

CloudFlare was one of the most well-known pioneers in pushing CDNs far beyond simple content distribution, including performance enhancements like on-the-fly image compression, security enhancements like a Web Application Firewall (WAF), and peace of mind measures like "Always Online" that serves cached versions of the website in case the web server goes down. Companies like Akamai that used to be CDN-only have been catching up, but at a price tag and lack of agility you'd expect from an older, larger company.

What's Required To Enable a CDN? Why Is It Sometimes A Political Battle With IT?

For many providers, you have to change the name servers of your domain to point to those of the CDN company. Basically, it's a complex DNS maneuver that makes your average IT person unnecessarily nervous. You are handing over your DNS handling to one of these CDN companies, but that's no more risky (perhaps less risky) than using your current DNS registrar. Many IT folks are nervous about the risks of letting go of control of your DNS while completely ignoring the risks of *not* letting go: security, performance, increased risk without the "peace of mind" features, and ultimately business dollars and profit left on the table due to slower site performance. This is similar to the desire to host the website on-premise in the back closet (extremely risky) rather than relying on a 3rd party cloud computing company with more dollars, infrastructure, trained staff, and economies of scale. 

You need to find a way to be a CDN champion, or hire someone who can, to get your IT personnel to budge and let go of their unfounded worries. However, there are providers like Fastly that allow you to gain many of these benefits without changing your name servers, and CloudFlare does indeed allow you to use a CNAME setup (instead of a name server change) although it is only available on the more costly Business and Enterprise plans. Note that your root domain (i.e. https://domain.com) will not be protected – only subdomains can be protected, so you should redirect https://yourdomain.com to https://www.yourdomain.com ("www" is considered a subdomain). Although, unless you really know what needs to be done to protect and properly set up your name servers, it's usually best to use the name servers provided by these CDN companies.

Performance Improvements

Most of the CDN companies offer a variety of options to increase performance. Some examples of performance improvements offered by such CDNs are as follows:

• On-the-fly image compression
• Faster page loads through high-tech infrastructure 
• Page caching and purging
• Fast DNS lookups
• GZIP compression, reducing file and page size
• HTTP/2 Support

Take a look at the performance page on CloudFlare.com or the one on Fastly for more detail. 

Here is a recent benchmark of a site that we put behind a CloudFlare Pro plan with performance enhancements enabled (note that this site was already behind a CDN used by the Pantheon hosting platform, so this is really just measuring the performance enhancements) as tested on the reliable, less-noisy, and less-profit-driven site https://www.webpagetest.org/.

Before Implementing CloudFlare CDN Performance Improvements:

​

After Implementing CloudFlare CDN Performance Improvements:

​

High-level results:

• A 1 second decrease in load time! 
• 0.7 MB in bandwidth savings
• Image compression!

On another site with a lot of technical baggage, we were able able to get a 2.5 second performance increase! Just by enabling CloudFlare. Do you know how many developer hours that would have taken?! Here are the results.

Before Implementing CloudFlare CDN:

​

After Implementing CloudFlare CDN:

​

High-level results:

1. A 2.5 second decrease in load time!!
2. A ~0.7 MB in bandwidth savings.
3. Transfer compression (compressing everything that the web server sends -- was not working properly so CloudFlare fixed it)
4. That "D" rating on First Byte is just noise. Also, ignore the incorrect "F" grade on the "Cache static content" on the "after" pic -- this was due to a technicality of the site architecture outside of CloudFlare's control, and static content caching still markedly improved:

The other metrics matter, too, for overall user experience. You may wish to research what they mean in further detail. 

Security

A Web Application Firewall (WAF) is more and more important, especially since you can implement one with such low cost and barrier to entry. I work in this industry, so I see hacking all the time. I see emergency calls, expensive mistakes, data loss, lost revenue due to site downtime, and customer / personally-identifiable information stolen. It's way too easy to pretend it won't happen to you. Take the time to do your best by implementing a WAF in front of your website. Even our favorite hosting companies do not provide this out of the box. You will often see a hosting company advertise "security" but what they are often talking about is that they provide a WAF for their entire hosting infrastructure but not your individual website. It's up to you to provide that, at least in this day and age. 

Another great thing you often get from a CDN is free HTTPS / SSL (yes, you read that right), so that you don't have to pay for and install an SSL certificate to get the https:// before your domain name, which is important both for security and SEO ranking. By signing up for a free CloudFlare plan, for example, you also get free HTTPS / SSL. Everyone on the internet should at least have HTTPS / SSL these days, because it is completely free.
 

Peace of Mind

There are varies "peace of mind" features, where each competitor seems to differ the most. Examples of peace of mind features follow:

• Website hacking cleanup and first responder service (Sucuri)
• Blacklist removal (Sucuri)
• SEO Spam Repair (Sucuri)
• Website security scanning for hacks and blacklists (Sucuri)
• DDoS protection hotline (CloudFlare)
• Keep a cached version of the website to serve even if the web server goes down (CloudFlare)
• Distributed networks keeping internet properties available and performant (multiple)
• Load balancing (multiple)
• Off-site website backups (Sucuri) -- it's good to keep a redundant off-site backup even if your hosting provider does back-ups as well.

Costs

Platforms like CloudFlare offer a very generous free plan that still gets you a CDN, free HTTPS, and some of the performance improvements. However, its Free plan doesn't offer WAF protection, leaving your site vulnerable to attacks from DDoS strategies, bots, spam, and other vulnerabilities.  At its $20/month Pro plan, you get the WAF but do not receive advanced DDoS mitigation and custom SSL -- to get those features you'll need to shell out $200/mo for the Business plan. That pricing jump for those who require bigger-business-level features can entice folks to choose alternatives like Fastly, Securi, Incapsula, or Stackpath.

Conclusion

It's 2019. Get a CDN. It's free if you don't want to pay for it. If you don't have one, you're behind, at risk, and losing money from a simple performance enhancement that requires zero developer time to implement. 

It’s a beautiful Sunday afternoon, and you’re having a nice walk in the park. A stranger approaches you, and he asks if you want a $10 gift card. Already skeptical, he pulls out a lengthy form and states that all you need to do is provide your date of birth, phone number, email, and fill out a survey in order to get the gift card. It’s crazy! Although a free gift card is tempting, he hasn’t done anything to make you trust him with sensitive information and, frankly, it isn’t worth the effort to fill out a lengthy form. You’re not going to risk providing all of that personal information for a mere $10. You wouldn’t do this in person, so why would you do it online? Although it seems crazy, I see companies do the same thing on their websites all the time. Often, forms are the first point of conversation with your customers, so you need to make sure they leave a great first impression on your prospects and you earn their trust before asking for sensitive information.

[Forms are one of the most important elements of functional web design. Our Basics of Web Design guide can help put this point in perspective.]

The first thing to keep in mind when designing forms is to ensure that they are not visually overwhelming. You should only ask your users for the information that is absolutely necessary because you want to make sure there aren’t too many fields in the form. If you need extra information for marketing, you should try to find it out in a different way, especially if this is the prospect’s first point of contact with your business. If the nature of your business requires you to have a lot of fields in the form, you can test splitting up the form into multiple steps, so that there aren’t too many fields on one page. Another advantage to the multi-step approach is that user information can be saved in sections as prospects fill out the form even if they don’t complete it. Also, you should group related information within the form together. By grouping related information together, visitors can make sense of the information being asked of them, it allows for scanning, and it makes the form less overwhelming. In addition, you can use whitespace to your advantage. Whitespace can reduce clutter and be used for grouping and increasing readability. Furthermore, you should leave personal details for later. You shouldn’t ask for things like birthdays, payment details, and phone numbers right out of the gate. Finally, you should always test multiple form structures to see what works best. Depending on your business, one-step or multi-step could be better.

Another part of your forms that you need to take a close look at are your field labels. They should be clear and unambiguous. Also, you should clearly indicate if all the fields are required. If some of the fields are optional, you should mark the optional fields or indicate the required fields with an asterisk. If the data you are asking for is complex or sensitive, you should include help text. There are a few ways you can consider displaying the help text. It can always be visible next to your fields, it can be revealed when clicking an "i" next to a field, or it can be displayed dynamically. However, you should avoid in-field labels for a few reasons. In-field labels strain users short-term memory, keep users from checking their work once they complete the form, annoy those who navigate with the keyboard because text disappears, and occasionally, users have to manually delete the placeholder text. For those reasons, you should stay away from using in-field labels.

You also want to ensure that you have a clear call to action on your forms. Your call to action should be clear and distinguished from the rest of the form. Thus, you should remove all distractions. Your call to action should look like a button or, at the very least, it should be obvious that it is clickable. You should also include text on the button that clearly indicates what happens when users click it, like "Pay Securely" or "Apply Now." Additionally, if you have a secondary call to action, the primary call to action should be larger and a different color than the secondary option. Another way you can use call to action buttons is by greying out the button until all of the required fields are completed. If you are using a multi-step form, you can consider including a progress bar at the top of the form. The progress bar provides transparency to users on how long the form is, gives them a clear sense of direction, and also motivates users to complete the form.

When dealing with user errors in forms, you should do everything you can to prevent errors from happening in the first place. You can use help text to tell users how forms should be filled out to prevent most errors. However, some errors are inevitable, and you should display your error messages in an optimal fashion. Your error messages should be helpful, informative, and clear. They should be rendered in language that you would use when speaking with a person, so you should avoid using jargon or technical speak. You should also ensure that they stand out against the form fields. It’s best that you display them in-line with the fields. If you display them at the top of the page, it will require users to scroll up and down which may generate unnecessary frustration with the form. It’s also usually best to display errors as users fill out the form. If you wait until form submission to display errors, this can be overwhelming, make the errors seem more serious than they actually are, and users may not know which fields the errors apply to. However, if you display the errors as users fill out the form, you can clearly mark which field the error applies too, prevent build-up of multiple errors, and display them in a clean format. You can also use positive reinforcement and display a checkmark next to the field when a user fills it out successfully. This will yield a more enjoyable experience than using negative reinforcement. When instituting field validation, it’s best to start with lenient rules and then make the rules stricter as you learn more from testing how your prospects fill out the form.

Another important part of your forms to optimize for is accessibility. Inaccessible sites lose tons of money, so you should ensure that your forms are accessible. Thus, you should make sure you use readable fonts and make sure your labels, help texts and input boxes are large enough on all types of screens. Also, you should not replace help text with icons. Finally, you should avoid captchas. If you need to verify humanity, you can use email verification.

You may have noticed a trend with these tips for form optimization. It’s important to continuously test all parts of your forms to ensure you have the best form design for your business and target customers. This may seem like a lot for a seemingly small part of your business, but it’s necessary. If you understand the value in form optimization but need some help to ensure the work gets done, send us a note. We’re happy to help!

This is a continuation from a previous article. 

The principle of flow indicates eliminating specialized departments and batches of work done therein. In the context of a digital agency, that might be SEO, SEM, CRO, design, and UX teams who don't work together as a unified "department" or team. Creating SEO-friendly designs is definitely an important concept. Creating PPC SEM campaigns that convert (CRO) is important as well. So, any silos of specialization can actually impede flow and thus attainment of lean operations at a digital agency.

Another flow concept is ignoring the boundaries between companies, departments, and individual roles in order to remove all impediments to the continuous flow of the specific product or service. In the digital agency context, this can equate with putting a client's copywriting team into your project management portal, Slack channel, and other team-integrating tools so that you can do your conversion rate optimization (CRO) work without going through another party to get access to them and Get Work Done. 

Pull is a principle that surrounding the delivery of what the customer wants, when they want it. This translates into right-sizing our tools and processes so we don't need to produce massive websites, overly-complex solutions, or bloated CRO work for those who do not need it at this time. Of course, as a client grows, we want to grow with them. But, we want to respect the journey and be able to deliver right-sized solutions along the way, from the very inception of the relationship.

Lastly, we have perfection as perhaps the ultimate principle. It is akin to the concept of "optimization", which we value highly at Origin Eight. In lean thinking, the improvement process never ends – you must always strive to offer a better product through continuous incremental improvement or "kaizen", while at the same time reducing waste. In order to maximize efficacy of kaizen, we must have transparency across the entire value stream (from the client to an agency's internal team) to discover opportunities for improvement. In a sense, "transparency" equates to "data", which we require for any type of CRO or optimization work we do – "best practices" and "big ideas" are not enough in an ecosystem with readily-available data and analytics.

As a data-driven agency doing optimization work, we aim to practice what we preach, as it will only make us better. The last concept from perfection is that settling for merely being better than one's current competition will not suffice in the long-run – eventually someone will come along and beat us. Perfection may not exist, but optimization is the closest we can get, and we believe it's what's going to continue driving us for years to come.