To make your website videos great again.
A Forbes article says video is of the seven important areas which can improvement a website user experience and engagement.
Many companies agree and add Youtube videos to their websites. Why Youtube? No cost, easy to use (to embed videos in webpage) and easy to consume (to watch and to share, from enduser perspective). Besides some other downsides, one major challenge of using YouTube video on your corporate website is that YouTube is blocked in some countries (China, for example). So you neither can tell your story using Youtube nor you provide a good UX to all users.
Even Google cannot make Youtube works in China. I cannot too. What I am trying to do is to add user location-awareness to the website. To make a website to show different content to users in different locations.
I Cloud can do all things. I am going to use different cloud services to demonstrate the solution.
The key element is a DNS service with Geolocation Routing capability, such as Verizon Route and AWS Route 53. There is one hostname an and URL only. No need to remember xxx.com, xxx.com.cn, xxx.com.jp, etc.
Geolocation Routing lets you choose the resources that serve your traffic based on the geographic location of your users, meaning the location from which DNS queries originate.
- a webpage (a) with Youtube video, hosted on a AWS S3 bucket
- a similar webpage (b) using a mp4 video, hosted in another AWS S3 bucket
- webpage (a) is accelerated by KeyCDN for Europe, and AWS CloudFront elsewhere
- webpage (b) is accelerated by ChinaChina for China and Japan
- AWS Route 53 is configured to resolve the hostname cdn.53.cheungwaikin.com to
- ChinaCache CDN URL for users located in China or Japan
- KeyCDN CDN URL for user located in Europe
- CloudFront CDN URL for user elsewhere
We will use VPN service such as VyprVPN or Hola!VPN to connect to different locations and then browse cdn.53.cheungwaikin.com/video.html and see what content we get. Below video showing that I received the webpage (a) (with embed Youtube video), then I got the webpage (b) when I was using Hola!VPN to connect to Japan.
Wish you a joyful weekend:)
Last update: 20170628
Last Friday I was asked “how does a CDN work?” The first time I was asked the same question was year 1999. I acquired a lot of CDN knowledge and experience since I join the industry in 2012. CDN is not yet an everyday business in Asia nowadays. I want to help. An one page brief explanation. Hope you like it.
What is a CDN?
A Content Delivery Network (CDN) is a collection of web servers distributed among multiple locations to deliver content to users more efficiently.
What is the job to be done by CDN?
To send web content to enduser faster. How? By moving data close to the endusers to reduce round trips and network.
Ilya Grigorik, web performance engineer at Google, says :
- Latency, not bandwidth, is the performance bottleneck for most websites.
- Four major latency types: propagation delay, transmission delay, process delay, queuing delay
- To improve performance of our applications… we need to reduce round trips, move the data closer to the client.
Centralized Server vs CDN 
How does a CDN work?
In essence, CDN puts your content in many places at once, providing superior coverage to your users. For example, when someone in London accesses your US-hosted website, it is done through a local UK CDN server. This is much quicker than having the visitor’s requests, and your responses, travel the full width of the Atlantic and back.
By connecting users who request your website content to CDN, instead of connecting directly to your web server.
Using traditional centralized server model, a website, say www .abc.com, will usually have a “A Record” in the DNS configuration (of abc.com) to inform people to connect to the web server with the specific IP address, say 22.214.171.124. We call this Customer Origin. When a user John in Beijing browses www .abc.com the following (behind the scene) steps will happen:
- John’s computer will ask the its local DNS resolver to figure out the IP address of www .abc.com
- the resolver will then ask the root DNS server what is the authoritative DNS server of abc.com
- The resolver will then ask the authoritative DNS sever of abc.com what is the IP address of www .abc.com and will get the answer of 126.96.36.199.
- John’s computer will then connect to 188.8.131.52 to get the web content of www .abc.com
With CDN, www .abc.com will have a “CNAME Record” in the DNS configuration to inform people to connect to the server with the specific hostname, say abc.customer.cdn.com provided by the CDN provider. When John browses the website www .abc.com, we will have the same first two steps above-mentioned, but subsequent steps will become:
- The resolver will then ask the authoritative DNS server of abc.com what is the IP address of www .abc.com and will get the answer of abc.customer.cdn.com
- The resolver will then ask the authoritative DNS server of cdn.com what is the IP address of abc.customer.cdn.com. The authorization DNS server of cdn.com will, based on the IP address of John’s local DNS resolver and the CDN provider’s routing algorithm, provide the answer, say 184.108.40.206, which is the IP address of the CDN cache server located in/near Beijing and is the best machine to deliver the content of www .abc.com to John
- John’s computer will then connect to 220.127.116.11 to retrieve the web content of www .abc.com
Say there is another user Mary in Singapore going to browse www .abc.com, we will have the similar four steps, but the CDN provider will use, say 18.104.22.168, which is the IP address of the CDN cache server located in/near Singapore which can serve Mary most efficiently.
Do I need to upload my website content to CDN?
Not necessary. In most cases, CDN will on-demand fetch content from the Customer Origin.
When the CDN cache serve receives the HTTP GET request of www .abc.com from an enduser, the cache server will check if the requested content of www .abc.com is already stored in its storage:
- If yes, then the cache server will send the content stored on it to the enduser. We call this “Cache Hit”
- If no, then the cache server will fetch the content from the Customer Origin, then store it and send it to the enduser. We call the situation of missed content “Cache Miss”, and the process of fetching content from Customer Origin “Cache Fill”. CDN will Cache Fill when it needs to update the stored content.
The higher the Cache Hit rate, the faster the content delivery. High Cache Hit rate better utilizes CDN and reduces Customer Origin loading.
How long will the CDN keep my web content?
CDN provider will usually honor the Cache-Control header setting in Customer Origin. During the Cache Fill process, the CDN cache server will cache both the web content and the HTTP header information, including the Cache-Control header attributes. CDN provider will keep the content according to the Cache-Control setting or based on the customer CDN configuration.
CDN nowadays offers more features and services. Below are the key benefits of using CDN:
- Faster delivery of both cacheable and non-cacheable content
- Higher availability by leveraging CDN’s global footprint and scale.
- More secure by shielding the Customer Origin from public access.
- Reduce the expense on Customer Origin resources (computer and connectivity)
- High Performance Web Sites, Steve Souders
- High Performance Browser Networking, Ilya Grigorik
- CDN, Wikipedia
- Essential Guide to CDN, Incapsula
- Cache-Control header, Mozilla.org
I prepare this blogpost on the new iPad Pro 10.5” with Smart Keyboard. It is GREAT. Looking forward to iOS 11!
[Update: 20170628] Apple iPad Pro 10.5” with iOS 11 beta
In my previous post I showed how to use HolaCDN to improve the performance of a mp4 video which is already accelerated using CDN service.
This time I would like to show how to use HolaCDN MultiCDN feature to improve the performance of a multi-birate HLS video. HolaCDN MultiCDN will automatically measure performance of multiples CDNs (defined by user) and select the optimal CDN to use.
In this demo, HolaCDN will select among the customer origin, a 3rd party CDN and HolaCDN.
In the screen capture below, Chrome Developer Tools shows the HolaCDN JS client loads video chunks from serveral hosts: s3video.cheungwaikin.com (customer origin), dc7tqspqe5l18.cloudfront.net (a 3rd party CDN) and 22.214.171.124 (a HolaCDN server).
The following picture shows the result generated by the command hola_cdn.get_stats() in the Chrome Develop Tools Console: 20% of traffic is from the customer origin, 18% from the 3rd party CDN, and the remaining is from HolaCDN.
How to set up HolaCDN MultCDN feature in this demo?
Step 1: create a new Zone named “hlsmulti” by defining the Page URL as http://aws.cheungwaikin.com/video-hls-flowplayer-cloudfront-hola-origin.html.
Step 2: in the MultiCDN selection algorithm, I input the $0.5 as the cost of HolaCDN and $0.05 as the cost of “My existing CDN”. Doing so to instruct HolaCDN to use My existing CDN unless HolaCDN improve performance (better video start/seek time, less buffering, higher video quality/bitrate).
Step 3: for demo purpose, HolaCDN will take actions – collects QoE statistics and deliver video content – if the user is using Chrome browser. For every 100 pageviews from Chrome users, all will colllect QoE statistics, and HolaCDN will try to deliver video content in 90 pageviews.
Step 4: define “My existing CDN”. In this demo, the are two “CDNs” – dc7tqspqe5l18.cloudfront.net and s3video.cheungwaikin.com.
Step 5: I use Static MultiCDN switching mode. If HolaCDN finds dc7tqspqe5l18.cloudfront.net and s3video.cheungwaikin.com perform better than HolaCDN, then 50% possibility that video will be retrieved from dc7tqspqe5l18.cloudfront.net and 50% possibility that video will be loaded from s3video.cheungwaikin.com.
In other to do a control experiment, I use Firefox to browse the demo page. Based on my setup, HolaCDN will do nothing and the browser will get all HLS TS chunks from the host defined in the html source code. Here is the result from Firefox + Firebug:
Want to try it yourself? Go to apply a HolaCDN free trial account now!
Hola is a Spanish word meaning Hello.
Hola!CDN is the first CDN purpose built for video. It is developed and operated by Hola!. Hola!CDN makes Internet video delivery Faster, Cheaper and More Reliable.
It is my pleasure to share with readers that I am now working at Hola!CDN!
In my last blogpost I talked my first Israel visit. The main objective of the trip was to attend Hola!CDN training.
The unique Hola!CDN architecture makes it possible to do Five things that other CDNs cannot do:
- Significantly speeds up your video delivery (start time, buffering, seek time, bit rate, failure rate)
- Provides accurate statistics on your viewers’ quality of experience
- Enables mid stream switching of multiple CDNs (configure Hola!CDN’s dashboard to work with several CDNs, taking each video chunk from the fastest and cheapest)
- Reduces video delivery cost substantially, with same low cost from first byte, to anywhere in the world
- Keeps your existing CDN – Hola will only participate where its faster and cheaper
Detail Hola!CDN implementation guide can found at GitHub: https://github.com/hola/cdn/blob/master/install.md
In this blogpost I would like to SHOW how to implement Hola!CDN in a webpage with MP4 progressive download.
Step 1: apply a Hola!CDN account account. We offer 14-day free trial account at holacdn.com
Three steps. That’s all. No DNS change is required!
the page implemented Hola!CDN: There are 6 HTTP requests in the original page and 65 in the page implemented Hola!CDN. Why?
Let’s talk more next time.
Gong Xi Fa Cai! Wish everyone has a happy and healthy Year of Monkey.
It is the fifth day of the new Chinese New Year. It is time to write something new.
I am studying Media Source Extensions (MSE) recently. In a nutshell, MSE enables browsers to play streaming media without plugins.
What is MSE?
-Microsoft: build custom adaptive streaming solutions using MSE. Such an adaptive streaming solution would look for the optimal bit rate based on network bandwidth and CPU utilisation to provide the highest quality streaming experience. For example, if the network bandwidth drops, you can use MSE to programmatically switch the video stream to a lower bit rate. This reduces the quality of the image, but allows the video to keep playing without interruptions.
More and more video providers are moving away from browser plug-ins to MSE. Youtube and BBC are two examples.
Not all browsers are created equal. At the moment Chrome v34 (both desktop Android 4.4+ versions) and IE 11 on Windows 8 are the best browsers supporting MSE.
Safari on iOS does not support MSE.
Maybe I need an Android tablet.
PS: My CDN demo site demo.cheungwaikin.com will be under re-construction and not available between 26-Feb and 11-Mar.
H.263, H.264, H.265, VP8, VP9, .flv, .mpv, .ogg, .webm, .m3u8, …
I know what you’re thinking:
“What the hack are all these acronyms?!”
It is good to learn some acronyms, here is a great Video File Format Overview.
My demo site demo.cheungwaikin.com was launched about two years ago in Nov 2012. The objective was to show how to use EdgeCast services to increase web performance. The demo site is for myself and my customers. It is my pleasure that there are people find it useful too. I used Mac and iPhone to develop the demos. I tested if the demos were compatible on OSX and iOS. That’s all. I didn’t spend much effort in cross-platform compatibility, until recently. I received compatibility questions from visitors and they told me that my site did not render correctly on IE. I have a coming project on 13-Nov-2014 which requires cross-platform browser support. Now is the time to spend more effort on compatibility.
From Google Analytics I know that most of the demo site visitors are PC desktop users and using Chrome. From NetMarketShare, IE 11 is the number one in desktop browser popularity. Large portion of mobile users are on iOS. In order to help most of my demo site visitors to see the site correctly, I think I have to support IE 11 and Chrome on Windows 7, Chrome/Safari/Firefox on OS X, as well Safari on iOS 8.
6 browsers. And a lot of work! They support different content formats. For example, regarding videos, Safari on OSX and iOS support mp4 and m3u8 while IE/Windows, Chrome/OSX and Firefox/OSX do not. In order to have my video demos work on these 6 browsers, they have to support Flash video for desktop users, .m3u8/.mp4/.webm for mobile users. Or in more professional wordings, I need a Flash Video with HTML5 Fallback strategy to cater my user demographics. Assuming desktop user is more probable, my site will try to send Flash video content via RTMP first, then send .m3u8 (for live streaming), .mp4 or .webm (for VOD) if Flash video is not support by user device.
I spend me some efforts to put up the two new demos with Flash Video with HTML5 Fallback strategy:
#28 CDN video: Flash Video with HTML5 Fallback for VOD
#29 CDN video: Flash Video with HTML5 Fallback for Live Video
It is cool that I check these two demos work on IE 11/Windows 7, Safari/Chrome/Firefox on OS X 10.9 and 10.10, as well as iOS 8! My demos are now much more user-friendly.
For my mid-Nov project, software part is ready. I need to prepare the hardware portion. Let’s talk hardware next time!
–Security Now #477 podcast: Payment Tokenization – how Apple Pay works in details technically
–Exponent #023 podcast: Apple Pay – how Apple Pay and payment industry works, commercially
–For Mac Eyes Only podcast: Getting a Charge Outta Your Mac – how to maintain MacBook battery
Which CDNs are your favourite websites using?
Based on HTTP Archive, on an average webpage we have today:
-1855KB of content size
-97 HTTP requests/objects
As webpage size and number of objects increase, we have longer waterfall diagrams. By studying the waterfall diagram, we can know what are the domains and where are there servers, and then we can figure out which CDNs the website is using (or no CDN).
CDN Planet – CDN Finder is a great tool which makes life easier. Just input the URL then it will check/guess which CDN a webpage is using.
Take http://www.gov.hk as an example, CDN Finder says: “We believe the site http://www.gov.hk is using EdgeCast as a CDN.”
Use this tool to check the Alexa top 25 websites in Hong Kong, Taiwan and US. Then we have the marketshare from six CDN providers of the Alexa top 25 websites in these three markets:
However, this table is just a rough estimation only.
Since more and more websites adopt multi-CDN strategy to improve performance, sometime we should review the results in details to figure out which CDNs are being used.
Take http://www.pixnet.net as an example. It is the most popular social networking site in Taiwan. Alexa ranking #4 in Taiwan and #11 in Hong Kong respectively. CDN Finder says: “We believe the site http://www.pixnet.net is using Akamai as a CDN.”
Let’s dig into the details and verify the statement.
The following table is generate based on the results from CDN Finder and Webpagetest:
The webpage size is 3644KB, with 193 HTTP objects from 29 domains. The table is summarised into this:
|Count||CDN||Bytes||Bytes % of Total|
The second table says: “We FIND the site http://www.pixnet.net is using both Akamai and EdgeCast as CDNs, with EdgeCast carries most of its traffic.“
How to use tools is more important than what are the tools.
This August starts a new chapter.
My CDN demonstration site demo.cheungwaikin.com was launched in Nov 2012 as a hobby. I wanted to share how to use EdgeCast services to make website faster. I was learning RWD and how to use iPhone for content production.
Time flies. The demo site will be two years old three months later. From just one demo to twenty-seven demos. I learn more new technologies, techniques and tools with each new demo. The journey is the reward.
I want to revamp it to keep it update. To make it faster by moving more content to CDN. To keep all the SEO settings too (demo.cheungwaikin.com is the top Google search results of “CDN demo” and “How to use EdgeCast”). I am not a professional web developer and it will take me sometime to complete the revamp. This revamp is also a good exercise for me to practice change management too.
Make It Faster is the key objective. I will use some tools to measure the site performance. I will use Google Analytics Site Speed and Soasta mPulse for RUM (Real User Measurement). Firebug, Webpagetest, StatusCake and Load Impact for simple synthetic performance measurement. I will A/B test the revamp site before turning it into production site.
The revamp project is just started. The performance improvement of the homepage is very encouraging. The average load time in the last few days is reduced from 2.8s to 2.03s, a 28% reduction! This webpagetest result shows 65% reduction in Visually Complete time (from 1.70s to 0.60s)!
Thank you for your support.
Make a change and improvement everyday. Seize the day. 感恩。
1 Corinthians 13:8 – Love never ends. As for prophecies, they will pass away; as for tongues, they will cease; as for knowledge, it will pass away.
Congratulations to Germany!
It took the highest scoring team Germany 113min to score in the World Cup Final! Argentina did a great defending teamwork!
I was busy in the last 14 days – watching World Cup, some personal travels, and supporting partners for new products. Many new experiences!
Many people use tablets as TVs rather than computing devices. I was one of them in the last few weeks. I watched more than 20 World Cup games on my iPad Air. I was the only one in my home watching World Cup and it caused the least disturbance if I watched the games on my iPad (with headphones) at 12am or 3am Hong Kong Time. I was out of town some days during the World Cup, I could use my local TV app by connecting back to Hong Kong via VyprVPN. I experienced two things:
-trial account helps customer acquisition for personal VPN services
-OpenVPN is better than IPSec VPN
There was one challenging issue I encountered when watching World Cup games on iPad – goal notifications from other iOS apps before goals were shown in the live videos. I learnt a good use case of iOS Do Not Disturb (DND) feature – I manually turned it on with the Always silence option selected during the live games. No more unwanted notification in live sport video!
During the travels I used my iPhone heavily. Portable battery was critical to keep my device working when I was on the road. Fortunately I found a great gadget – Imprinc ILAU30-01 portable battery and wall charger. It is not a surprise to me that better battery life is the most wanted feature for iPhone 6.
EdgeCast launched the HTTP Rules Engine – Mobile Device Detection early this year. This new feature helps CDN customers to provide different HTTP responds based on the device types making the HTTP requests. Some partners asked me how to use this feature. There were some enquiries about DNS-based load balancing. I put up three new demos in the last ten days to help my partners learning how to use EdgeCast services:
#24 RWD and CDN
#25 RESS and CDN
#26 EdgeCast Route Managed DNS
One of EdgeCast’s market-leading competitive advantages is edge computing capability. Customers can offload their content delivery workload to EdgeCast AND keep their controls over how to provide customized content/experience to their users. Here is an example: if you’re reading this blogpost on a device with screen width larger than 640 pixels, the above iOS DND image is changed from the default portrait iPhone screen capture to landscape iPad version. Cool?
It is a busy and explorative July!
“Who are you to pass judgment on the servant of another? It is before his own master that he stands or falls. And he will be upheld, for the Lord is able to make him stand.” Romans 14:4
iOS apps recommended:
– Textastic Code Editor for iPad to develop HTML code much faster
– GifBoom to make animated GIF and save directly to Photos album
– iCurlHTTP to check HTTP respond headers
– PDF PROvider+ empowers you to edit and sign PDF with ease
– FIFA World Cup!
– VyprVPN is a great VPN service with many VPN termination points in Asia
We have our Verizon EdgeCast APAC partner training in Hong Kong this week.
Partners from different countries in the region come to HK to develop their expertise in selling and providing CDN services to their customers.
Up to now the training is very productive.
According to Edudemic, the most effective teaching methods are (in ascending order):
- Lecture (5%)
- Reading (10%)
- Audio and video aids (20%)
- Demonstration (30%)
- Group discussion (50%)
- Practice by doing (75%)
- Teach others (90%)
In our training we adopt a very interactive approach – a lot of Q&As, group discussion, quizzes as well as role playing. Participants are very initiative to voice out their questions and opinions. Professionals from telecom, cloud computing and e-commerce domains share their experiences, user demographics and market trends in their geo markets. Give and receive. I believe everyone learns a lot from each others! They gave their best during the role playing session. With their active engagement the training is very effective and efficient. From a channel development and partner enablement perspectives, I really appreciate their participations and efforts!
Training is a two-way process. Practice makes perfect.
We are going into in-depth technology areas, there will be a lot of demos and hands-on labs in the coming days. It will be very interesting! I am very excited to report this training even though it is not completed yet. I feel very happy writing this blog post! Thank you WordPress! (WordPress is a Verizon EdgeCast customer:D).
Thank you all the partners. Thank you for the dinner too!
Day 3 is focusing on sales engineer topics. We have more people and notebooks than the first two days!
Do you know what is the red text below?
GET / HTTP/1.1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:28.0) Gecko/20100101 Firefox/28.0 AlexaToolbar/alxf-2.19
Accept-Encoding: gzip, deflate
Answer: It is the HTTP Request my Mac send to the host andrecheung.wordpress.com when I enter it in the Firefox browser address box. If you are reading this blog using your browser then your machine sent a similar HTTP Request too .
There are many demonstrations and hands-on labs in Day 4. Verizon EdgeCast web-based portals empower our partners and customers to configure/manage/monitor their Verizon EdgeCast services at their fingertips.
Day 5 is about customer support. Our colleagues in US join us via online meeting and help us to conduct the training. Communication protocols between Verizon EdgeCast and partners, how to troubleshoot caching and streaming, common support issues and best practices are covered.
Thank you to all the partners who spend this week with us, as well as support from Shane, Jerry, Patrick, David, Yvonne, Suki and Alvin! Cheers!