Blog Feed Post

Using a CDN and Front End Optimization to Boost Website Performance

It’s hardly news that modern business is taking place primarily on the Internet. Regardless of its size, every business will lose some of its power if it doesn’t have an online presence.

The Internet space is large enough to accommodate countless businesses and ventures, but its vast size is not without its obstacles. The challenge here is in gaining a prominent presence for your business without getting lost in the digital crowd; and the only way to ensure this is with superior website performance and a rich and seamless user experience. When you consider that up to 40% of users will abandon a website that fails to load within 2 seconds, optimizing your website becomes not just necessary but imperative.

The image below represents how a browser works:

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo1-300x186.png 300w" sizes="(max-width: 600px) 100vw, 600px" />

In general terms, a browser sends a request to the server and renders the requested content once the server responds with the data. The sending and receiving part of the process constitute the network component, and the content rendering is the front-end component. Optimizing both these components is essential to deliver an enhanced website and this is where content delivery network and front end optimization (FEO) techniques come into play. The network component can be optimized using CDN while FEO techniques optimize the content.

Today, websites are nothing like what they used to be a few years ago; CSS, JS, and HD images are common in today’s sites and help deliver highly interactive and customized content specific to a user’s browsing habits and geographical location. It’s crucial that such content is delivered as fast as possible – wasted seconds can cost companies in revenue and customer loyalty. CDNs use their highly-distributed platform of servers and advanced infrastructure to not only ensure smooth operation between a content server and the end users, but also to bring the content closer to the user, hence speeding up the process of serving the content. The data below shows the variation in performance when loading contents like images, CSS, and scripts from a CDN vs origin servers.

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo2-300x151.jpg 300w" sizes="(max-width: 537px) 100vw, 537px" /> The graph above shows the differences in load time when content is served from a CDN and an origin server. Images and CSS load 2x faster than CDN networks; the content takes around 200ms-1800ms when served from CDN, while it takes 800ms-4800ms to be served from origin servers.

Small, medium, and large content providers have come to rely on CDN for a seamless web experience for their end users because of its ubiquitous nature that mitigates the challenges encountered when delivering content over the internet.

A lot has been said and written about what a CDN is and why it’s important. You can read more about it here.

Front End Optimization Techniques

Front end optimization (FEO) is a service that aims at providing a better user experience with your web content. Also known as content optimization, FEO techniques fine-tune the content on your website by loading it more quickly and making it more browser-friendly.

FEO also compresses file size and minimizes the number of requests required to load the content on the page.

Consider the graph below; it displays the render start time of a website with and without FEO.

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo3-300x218.png 300w" sizes="(max-width: 473px) 100vw, 473px" />

As you can see, the render start time improved by 1.5 seconds with the use of FEO techniques.

Benefits of Implementing FEO

1. Compressed files: A website’s content will become lighter and more manageable when the files are compressed. Compressing the files will reduce the total downloaded bytes (page size), which not only saves the bandwidth but also speeds up the download time to load the page faster.

Let’s look at how compression promotes faster page load times. We ran a few tests on a website with file compression both enabled and disabled. After implementing compression, the page size was reduced by 0.5 MB.

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo7-300x78.jpg 300w" sizes="(max-width: 700px) 100vw, 700px" />

Let’s visualize the difference in file size at the request level using waterfall graphs. A difference of 23 – 33% is observed in the file size, which in turn improved the response time of these requests and eventually contributed to a faster download time for the whole page.

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo4-300x104.jpg 300w, http://blog.catchpoint.com/wp-content/uploads/2017/09/feo4-768x267.jpg 768w" sizes="(max-width: 820px) 100vw, 820px" />

Note: We’ve highlighted the identical requests in the above waterfall graphs using unique colors to make it easy to spot the difference in file size and response time.

2. Enabled prefetching: A website visitor’s browsing experience can be greatly improved when prefetching is enabled. Prefetching bundles images, JavaScript, CSS, URL, etc. together so that the visitor can easily navigate between pages while saving on load time.

Fortunately, it is quite easy to enable prefetching. Just add any of these tags within your website’s HTML to enable it – rel=”prefetch”, rel=”dns-prefetch”, or rel=”prerender”.

You can read more about different types of prefetching and the impact it has here.

3. Reduces external HTTP requests: It is important that you examine your website to make use of a minimalist outlook. Doing so will help us to eliminate unnecessary features that may not be of any help to a user such as unnecessary JavaScript’s, images, plugins, and excessive CSS.

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo5-300x30.png 300w, http://blog.catchpoint.com/wp-content/uploads/2017/09/feo5-768x77.png 768w, http://blog.catchpoint.com/wp-content/uploads/2017/09/feo5-1024x103.png 1024w" sizes="(max-width: 1144px) 100vw, 1144px" />

A larger number of hosts on the page will lead to higher number of connections. These TCP connections act as a performance overhead which contributes to slower webpage response. Also, you should note that each HTTP request is a unique round trip; the more round trips, the higher the page response time. While some of them may happen in parallel, it can still be a setback to performance.

The screenshot above displays the data for a popular website. The site has only three hosts serving 44 requests on the page, due to which the entire page loaded in less than 2 seconds (webpage response: 1738ms) and provided a better user experience.

4.  HTML document clean-up: Hypertext Markup Language (HTML) is the building block of most websites and provides a structure to the page including headings, lists, subheadings and other text-organizing features. Web crawlers, which are used by Google to read website pages, make use of HTML when performing web searches. FEO removes unwanted whitespaces and minifies the HTML making it easier to parse and render.

CDN or FEO: Which is better?

Recently, we did a CDN performance study for one of the market’s leading Internet security software provider. The study highlighted (as seen below) the performance of the website in three different scenarios – without CDN and FEO, with CDN and FEO and lastly, with CDN and without FEO.

http://blog.catchpoint.com/wp-content/uploads/2017/09/feo6-300x277.png 300w" sizes="(max-width: 473px) 100vw, 473px" />

We can see that the there is a great improvement on the site’s page render time (almost 5 seconds faster) when both CDN and FEO techniques are implemented.

So, our answer to the question regarding CDN or FEO: both. CDNs help the FEO processes by streamlining the time needed to perform the task of FEO. For instance, a CDN offers auto minification and auto file compression features that save time, which would otherwise have been spent on manually processing each individual website resource.

Making use of only a CDN without FEO techniques does not necessarily guarantee the best end-user experience for your website. Have you clicked on an image on a website and felt it took forever to load? That is what happens when FEO techniques are not implemented. When files and images are compressed, it enables CDN to work more effectively.

CDNs bring the user closer to resources by handling the performance middle mile. This shortens the number of trips a server makes and results in a faster loading page. FEO techniques, on the other hand, handle the front-end aspect of the website so that the pages run smoothly on a user’s browser.

Simplifying it further, a CDN helps to fetch and load content faster while FEO techniques ensure that the contents have been packaged in such a way that it is easier and lighter for the website.

There are possibilities where we may not have sufficient resources at your end to implement FEO techniques. The good news is that there are many CDN companies currently in the market that offer advanced FEO services which you can leverage on your website. This will save both time and extra cost.

In conclusion, combining CDN and FEO techniques will enable pages to load up to 2.5 times faster, and slash the total payload by a greater extent. The result hence assures the best user experience.

The post Using a CDN and Front End Optimization to Boost Website Performance appeared first on Catchpoint's Blog - Web Performance Monitoring.

Read the original blog entry...

More Stories By Mehdi Daoudi

Catchpoint radically transforms the way businesses manage, monitor, and test the performance of online applications. Truly understand and improve user experience with clear visibility into complex, distributed online systems.

Founded in 2008 by four DoubleClick / Google executives with a passion for speed, reliability and overall better online experiences, Catchpoint has now become the most innovative provider of web performance testing and monitoring solutions. We are a team with expertise in designing, building, operating, scaling and monitoring highly transactional Internet services used by thousands of companies and impacting the experience of millions of users. Catchpoint is funded by top-tier venture capital firm, Battery Ventures, which has invested in category leaders such as Akamai, Omniture (Adobe Systems), Optimizely, Tealium, BazaarVoice, Marketo and many more.

Latest Stories
In his session at @ThingsExpo, Greg Gorman is the Director, IoT Developer Ecosystem, Watson IoT, will provide a short tutorial on Node-RED, a Node.js-based programming tool for wiring together hardware devices, APIs and online services in new and interesting ways. It provides a browser-based editor that makes it easy to wire together flows using a wide range of nodes in the palette that can be deployed to its runtime in a single-click. There is a large library of contributed nodes that help so...
What is the best strategy for selecting the right offshore company for your business? In his session at 21st Cloud Expo, Alan Winters, U.S. Head of Business Development at MobiDev, will discuss the things to look for - positive and negative - in evaluating your options. He will also discuss how to maximize productivity with your offshore developers. Before you start your search, clearly understand your business needs and how that impacts software choices.
IBM helps FinTechs and financial services companies build and monetize cognitive-enabled financial services apps quickly and at scale. Hosted on IBM Bluemix, IBM’s platform builds in customer insights, regulatory compliance analytics and security to help reduce development time and testing. In his session at 21st Cloud Expo, Lennart Frantzell, a Developer Advocate with IBM, will discuss how these tools simplify the time-consuming tasks of selection, mapping and data integration, allowing devel...
SYS-CON Events announced today that Cedexis will exhibit at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Cedexis is the leader in data-driven enterprise global traffic management. Whether optimizing traffic through datacenters, clouds, CDNs, or any combination, Cedexis solutions drive quality and cost-effectiveness.
SYS-CON Events announced today that Mobile Create USA will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Mobile Create USA Inc. is an MVNO-based business model that uses portable communication devices and cellular-based infrastructure in the development, sales, operation and mobile communications systems incorporating GPS capabi...
While some developers care passionately about how data centers and clouds are architected, for most, it is only the end result that matters. To the majority of companies, technology exists to solve a business problem, and only delivers value when it is solving that problem. 2017 brings the mainstream adoption of containers for production workloads. In his session at 21st Cloud Expo, Ben McCormack, VP of Operations at Evernote, will discuss how data centers of the future will be managed, how th...
There is huge complexity in implementing a successful digital business that requires efficient on-premise and cloud back-end infrastructure, IT and Internet of Things (IoT) data, analytics, Machine Learning, Artificial Intelligence (AI) and Digital Applications. In the data center alone, there are physical and virtual infrastructures, multiple operating systems, multiple applications and new and emerging business and technological paradigms such as cloud computing and XaaS. And then there are pe...
Why Federal cloud? What is in Federal Clouds and integrations? This session will identify the process and the FedRAMP initiative. But is it sufficient? What is the remedy for keeping abreast of cutting-edge technology? In his session at 21st Cloud Expo, Rasananda Behera will examine the proposed solutions: Private or public or hybrid cloud Responsible governing bodies How can we accomplish?
SYS-CON Events announced today that MIRAI Inc. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. MIRAI Inc. are IT consultants from the public sector whose mission is to solve social issues by technology and innovation and to create a meaningful future for people.
SYS-CON Events announced today that Keisoku Research Consultant Co. will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Keisoku Research Consultant, Co. offers research and consulting in a wide range of civil engineering-related fields from information construction to preservation of cultural properties. For more information, vi...
Today most companies are adopting or evaluating container technology - Docker in particular - to speed up application deployment, drive down cost, ease management and make application delivery more flexible overall. As with most new architectures, this dream takes significant work to become a reality. Even when you do get your application componentized enough and packaged properly, there are still challenges for DevOps teams to making the shift to continuous delivery and achieving that reducti...
SYS-CON Events announced today that Massive Networks, that helps your business operate seamlessly with fast, reliable, and secure internet and network solutions, has been named "Exhibitor" of SYS-CON's 21st International Cloud Expo ®, which will take place on Oct 31 - Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. As a premier telecommunications provider, Massive Networks is headquartered out of Louisville, Colorado. With years of experience under their belt, their team of...
Most of the time there is a lot of work involved to move to the cloud, and most of that isn't really related to AWS or Azure or Google Cloud. Before we talk about public cloud vendors and DevOps tools, there are usually several technical and non-technical challenges that are connected to it and that every company needs to solve to move to the cloud. In his session at 21st Cloud Expo, Stefano Bellasio, CEO and founder of Cloud Academy Inc., will discuss what the tools, disciplines, and cultural...
SYS-CON Events announced today that Enroute Lab will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Enroute Lab is an industrial design, research and development company of unmanned robotic vehicle system. For more information, please visit http://elab.co.jp/.
SYS-CON Events announced today that Ryobi Systems will exhibit at the Japan External Trade Organization (JETRO) Pavilion at SYS-CON's 21st International Cloud Expo®, which will take place on Oct 31 – Nov 2, 2017, at the Santa Clara Convention Center in Santa Clara, CA. Ryobi Systems Co., Ltd., as an information service company, specialized in business support for local governments and medical industry. We are challenging to achive the precision farming with AI. For more information, visit http:...