Make your embed Youtube video works in China

Objective:
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.

Broken Youtube video

It is not unusual to see broken content… it is not great:(

Solution:
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.
cdn.53.cheungwaikin.com/video.html

 

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.

 

Demo setup:

  1. a webpage (a) with Youtube video, hosted on a AWS S3 bucket
  2. a similar webpage (b) using a mp4 video, hosted in another AWS S3 bucket
  3. webpage (a) is accelerated by KeyCDN for Europe, and AWS CloudFront elsewhere
  4. webpage (b) is accelerated by ChinaChina for China and Japan
  5. 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
AWS Route 53 Geolocation Routing setup

AWS Route 53 Geolocation Routing setup

Verification:
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.

Cool?

Wish you a joyful weekend:)

Advertisements

Apple iPad Pro 10.5” review – web developer and admin perspective

Last update: 20170709

Objective: to build and operate a Fast and Responsive static website, as a habit

Tool: Apple iPad Pro 10.5” only

I have been using the new Apple iPad Pro 10.5” for nearly a month. My old iPad Air was mainly used to watch TV and to do video conferencing. It could not multi-task. It was too thick and too heavy to carry when compared to iPhone.

The new Apple iPad Pro 10.5” is more, VERY to be exact, powerful. Can do better multi-tasking with iOS11. With larger screen and Smart Keyboard, it can do somethings which are difficult to do on iPhone, such as webpage coding and cloud service management.

To build and operate a website, we need both Development Tools and Cloud Services. Since we’re using iPad only, we need to make sure the platforms provide fast and easy to use web portal. After trying many options, below are my suggestions for Cloud Services (1-3) and Development Tools (4-6) to achieve our above-mentioned objective.

1.Cloud storage: AWS S3 (upload/download and edit via Transmit)


2.CDN: AWS CloudFront, KeyCDN, ChinaCache


3.Analytics

    • User demographics & behavior: Google Analytics
    • Real User Measurement: Soasta mPulse

    • Synthetic Performance Measurement: Uptrends

4.HTML Editor: Nitro HTML (split view to edit HTML source and visualize page at the same time)


5.FTP: Transmit (build-in editor to make small/quick modification on the fly is a bonus!)

6.Testing/checking Tools

    • VPN: VyprVPN
    • DNS checking: DIG

    • HTTP response header: WebScope

All these Cloud Services and Development Tools are good values and inexpensive, some of them are FREE!

With all these, I built and launched my revamped demo site demo.cheungwaikin.com .


How to use CDN: demos to show performance improvement

Latest update: 20170709

Why?
I am happy to tell you that my CDN demo site demo.cheungwaikin.com is relaunched today! The objectives of the new demos is to show how CDN improves website performance, and to help people visualize and understand how to make website faster.

My CDN demo site was first launched in early 2012 with the objective to show how to use different EdgeCast CDN products to improve the delivery of static, dynamic, video content and software download. Then in 2016 I made some demos to show how to use HolaCDN solutions to improve video streaming quality. All these demos before 2017 were focusing on HOW to use the CDN products to do somethings. For the new demos, I will focus on Why and What of parts of the equation.

“When you Speed Up service, people become more engaged – and when people become more engaged, they click and buy more” The Google Gospel of Speed, Jan 2012.

What is it?
The new demo webpages are constructed inline with the current Internet norms

  • using RWD to fit different screen sizes. Faster is a feature. Responsive too. [1][2]
  • the demo webpage size is about 3MB. According to HTTP Archive, 3MB is the average webpage size in June 2017. It was 1.0MB in June 2012!
  • there are 3rd party web components, usually for analytics and social networking[3]
  • in terms of #HTTP objects, 60% is image, 25% is JS, 15% is CSS/fonts/html.
  • in terms of object byte size, 90% is image, 5% JS and 2% fonts.
  • following the Google PageSpeed and Yslow guidelines of high performance website.
  • all demos are the same from coding perspective. They look the same. The only difference is the delivery arrangement of the first party content (1 HTML file and 13 images) – from which origin and with/without CDN(s). As of 20170707, I tired three CDNs: ChinaCache, AWS CloudFront and Google Cloud CDN. [4]

democheungwaikin.com

It looks nice, doesn’t it?

How to use the demos?
To see is to believe it. Each demo is using different Origin and CDN (if any). By clicking it and watch it, you can feel how fast your browser loads the webpage.

Besides your visual observation, there are some good online tools which provide quantitative analysis of website performance. GTmetrix.com is one of them. Below is a GTmetrix comparison of my new Demo#1 (AWS S3 Origin and no CDN) and Demo#3 (AWS Origin and ChinaCache)

GTmetrixcomparison.png

Which one is faster?

Notes:

  1. Besides focusing on mobile-friendly demos, I am trying to use mobile device (iPad), rather than laptop, to prepare the demos. Apple iPad Pro 10.5” with iOS11 Is a powerful content production device!
  2. RWD is cool. It is fun to develop a good-looking website as a habit. As a game. Do it anywhere, using iPad. Thank you w3schools.com!
  3. I am using a few 3rd party analytics tools: Google Analytics, Alexa and Soasta.
  4. AWS S3 and Google Cloud Storage are very similar. But there are many differences between CloudFront and Google Cloud CDN!

More blog posts on these topics are coming.

Please feel free to try demo.cheungwaikin.com. Wish you a nice weekend:)

Updates:

20170708 add a new demo – Origin: AWS S3, CDN: KeyCDN. Add a new performance analytics JS from uptrends.com

20170709 add e new demo – Origin: AWS S3, CDN: multi-CDN (ChinaCache for China, KeyCDN for Europe and CloudFront anywhere else)