TYPO3 CDN integration

Introduction

A CDN helps a TYPO3 site deliver CSS, JavaScript, images, and fonts from edge servers closer to visitors. This can reduce the load on the origin server and improve page-loading performance for visitors in different locations.

This guide shows how to set up a CDN for TYPO3 13.4.33 in Composer mode with Amazon Web Services (AWS) Toolbox 13.0.0, from extension installation through frontend verification.

Before you start

  • This tutorial shows how to integrate a CDN service into a website. In this particular demo example we will use:
    • barsoom-cdn.cdnsun.org as the CDN Service Domain, and
    • https://barsoom.cdnsun.org as the website URL (i.e. barsoom.cdnsun.org is the Origin Domain).
  • Please visit the Services/How-To section to obtain your CDN Service Domain.
  • Before you take any steps please back up your files and database.
  • To integrate a CDN service on https:// website the CDN service must have SSL enabled.
  • If your website embeds custom fonts then please first enable CORS for them.
  • Before you take any steps please make sure that your CDN Service Domain is ready-to-use here.

Create CDN Static service

Please refer to Creating a CDN Static service for more details.

Install the AWS Toolbox extension

  1. From the root directory of your Composer-based TYPO3 project, install Amazon Web Services (AWS) Toolbox:

    composer require leuchtfeuer/aws-tools:^13.0

  2. Set up the installed extensions:

    vendor/bin/typo3 extension:setup

  3. Log in to the TYPO3 backend and open Admin Tools > Extensions. Confirm that Amazon Web Services (AWS) Toolbox 13.0.0 is listed with extension key aws_tools.

    AWS Toolbox extension listed in the TYPO3 Extension Manager

Configure the CDN Service Domain

  1. Go to Site Management > Sites and edit the site configuration.

  2. Open Languages, expand the default language, and find the Content Delivery Network section.

  3. Enable Enable CDN for this domain. In CDN Host (incl. Scheme - e.g. https://cdn.site.org), enter the full HTTPS URL of your CDN Service Domain. The screenshot uses https://barsoom-cdn.cdnsun.org.

    CDN enabled for the default TYPO3 site language with an HTTPS CDN Service Domain

  4. Click Save.

Import the CDN rewrite TypoScript

  1. Open Site Management > TypoScript, select the site root page, and edit its root TypoScript record.

  2. In the Setup field, add this import:

    @import 'EXT:aws_tools/Configuration/TypoScript/ReplaceConfig/setup.typoscript'
    AWS Toolbox CDN rewrite import in the root TYPO3 TypoScript Setup field

  3. Click Save.

Check the public frontend

  1. Open the public site and confirm that the frontend remains styled normally and static assets load from the CDN Service Domain.

    Normally styled TYPO3 frontend after CDN integration

Verify & Troubleshoot

  • View HTML source code of your web pages to verify that you are using CDN, you should see source attribute of your images, CSS, JavaScript, etc. beginning with your CDN Service Domain.
    Frontend HTML proof that static assets are loaded from the CDN Service Domain
  • Don't see your CDN Service Domain in the source code of your web pages? If your website is using any cache plug-in/mechanism then you might want to clear/flush its cache.
  • Having trouble with custom fonts? Please refer to Using custom fonts with CDN - setting CORS for more details.
  • Still having trouble? Check your CDN URLs using our content check tool or please refer to Debugging a CDN service for more hints.

Contact Us

 _____     _    _    __   __  
|  __ \\  | || | ||  \ \\/ // 
| |  \ || | || | ||   \   //  
| |__/ || | \\_/ ||   / . \\  
|_____//   \____//   /_//\_\\ 
 -----`     `---`    `-`  --`