PART I: Optimise website with AWS

There is an increasing trend to use Amazon S3 for hosting static websites, including web applications based on Angular, Vue, React or Svelte. And rightly so, as it offers various benefits:

• Ease of deployment: The deployment could be performed by simply copying files via AWS console, pushing files via AWS CLI, or if required, support for CI/CD is there.
• High Availability: Amazon guarantees 99.99% uptime of S3, and the data is replicated across multiple data centers.
• Security: Encryption at rest and customised access control. One of the key features is an SSL certificate with auto-renewal free of cost.
• CDN: Amazon CloudFront is a fast content delivery network (CDN) service that securely delivers webpages, media and APIs to customers globally with low latency & high transfer speeds. It also comes with its security-related services support to secure the website further.
• Scalability: S3 and CloudFront auto-scale up based on traffic; hence there is no need to consider server resource requirements to cover spikes or growth scenarios.
• Cheaper than server backed deployments: S3 hosting costs are pretty negligible. Typically the price varies between £1 - £3 per month and varies based on the traffic.

Media consumption on the websites have increased, background images, banner to product demos or teasers. Often I find that teams miss out on the critical point of handling the media on the website, and it causes slow performance. Video & images files are usually served directly and sometimes at a much higher resolution than required by the client device. Search engines penalise slow websites, and no SEO work will assist. Luckily these issues can be handled with a few simple add-on steps.

Consider Streaming

Streaming allows client devices to play the video file without full download. Streaming methods also make it possible to stream videos at different quality levels and to switch in the middle of a video from one quality level to another one. MPEG-DASH and HLS are the two popular examples of streaming methods. MPEG-DASH is an international standard and works natively on most modern browsers, including Safari (Mac), but currently, iOS does not offer native support. HLS, on the other hand, is developed by Apple and provides better support over the Apple ecosystem. A detailed comparison is outside the scope of this blog, so we will instead focus on how to convert media files into DASH or HLS format using AWS MediaConvert.

AWS Elemental MediaConvert

AWS Elemental MediaConvert offers support for various input formats and adaptive Bitrate (ABR) packaging output formats for delivering high-quality content to different device types. AWS have created various pre-built solutions that can be found here: aws.amazon.com/mediaconvert/getting-started..

Here we will cover a simple use-case to provide input video files to MediaConvert that will output the DASH or HLS compatible format in the output bucket.

Template Creation

From the AWS console search for "MediaConvert" service: If the service has not been used earlier, the landing page like below will appear. Click on the hamburger icon on the left and select "Job templates". As the name suggests, templates allow us to define the media settings once and reuse them multiple times over time.

Select "Create Template". Provide a relevant name, optionally provide category and description.

Next, we will configure the output formats. The aim here is to demo how to approach the setup. For your project, actual output settings may differ based on your requirements. The goal is to configure the MPEG-DASH with three different resolutions:
Full HD: 1920 x 1080
HD: 1280 x 720
SD: 640 x 360

Click on "Add" next to "Output groups" and select "DASH ISO" in the pop-up.

STEP 1: On the next screen, provide the custom group name and select your destination bucket.

STEP 2: On the same page, scroll to the "Output" section at the bottom and click on the "Add" button twice to add two more lines of "Output 2" and "Output 3". As we want the media in three formats (FHD, HD & SD), I've updated the "Name modifier" for the outputs accordingly.

Rest can be left as default or based on your experience with media settings; please do feel free to change as per project requirements. One thing to note, all the options with the "Pro" tag has a higher cost associated with them. For full details on price, please refer to this link: aws.amazon.com/mediaconvert/pricing.

STEP 3: Under the "DASH ISO - DASH" Output group, click on the sub-section marked as FHD. Here we will input the media settings that correspond to full HD.

STEP 4 (optional): The video codec can be changed to the preferred format. Default is "H.264", in my setup, I've opted for "VP9".

STEP 5 (optional): If no audio output is required, please select the "Audio 1" tab under "Video" in the main section and choose "remove audio".

STEP 6: For the resolution, key in 1980 x 1080 and Bitrate (bits/s) as 5000000, i.e. 5 Mbps.

The rest of the settings can be left as default or changed as per project requirements.

STEP 7: Click on the sub-section marked as HD and follow the same steps with the resolution of 1280 x 720 and Bitrate of 3500000.

STEP 8: Click on the sub-section marked as HD and follow the same steps with the resolution of 640 x 360 and Bitrate of 600000.

STEP 9: Click "Save" at the bottom of the page. This will create our template with the three output media formats.

If required, other output formats like HLS can also be added by repeating the above steps.

AWS also provides a lot of presets with industry-standard settings. After "step 3" you could opt for these presets by clicking on "Select" under the "Preset" in the "Output settings".

Once you select a preset, it will auto-populate the video and audio settings for that output. Some presets do include "Pro" features, so please do make informed choices.

The input section of the template is optional, and it does contain a lot of settings under the video and audio selector sections but can be left as default.

Job Creation

On the template list page, select the template we just created and click on "Create Job".

STEP 1: Upload all the required video files in the source S3 bucket.

STEP 2: Click "Add" under "Input" and select the files one by one from the source S3 bucket.

STEP 3: Under "Job Settings", select "AWS Integration". For "service role control", select "Create a new service role, configure permissions".

• Provide a name for the role.
• Select source S3 bucket.
• Select destination S3 bucket.

If you plan to use an existing role, select "Use an existing role" and select the "Service Role" from the dropdown. Ensure the IAM role has required access to the source and destination S3 buckets.

STEP 4: Click "Create" at the bottom of the page. This will start the job. Once the job completes successfully, the status will show as "COMPLETE" on the list page.

The output bucket should now have the files in all the required formats. DASH & HLS produces .mpd and .m3u8 manifest files respectively. The media element on the HTML need to point to the manifest files, and the media is now served via streaming protocols. This makes the website load faster, and media also starts immediately without waiting for the full file download.

The next part will cover dynamic image manipulation. It provides dynamic image handling to help you maintain high-quality images on your websites and mobile applications. With this solution, you can store a single version of every image featured in your content while dynamically delivering different versions at runtime based on your end user's device.