Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 39 additions & 0 deletions dotcom-rendering/docs/architecture/030-amp-removal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# AMP Removal

## Context

Google AMP is an open-source, website-publishing technology that enables you to create a website that loads almost instantly on mobile devices. AMP stands for “accelerated mobile pages.” Google created AMP so that publishers and businesses could avoid slow-loading web pages that frustrate users.

The pages loaded more quickly for users on constrained devices, and Google’s search algorithm had a requirement that stories that appeared in the top stories carousel would have to be amp pages.

In June 2021 an update to Google's Top Stories algorithm meant AMP was no longer needed to appear in top stories. In November 2021 Twitter phased out support for AMP.

### Negatives

- Issues with maintaining and updating AMP as a separate platform from a technical perspective

- User experience impact of sign in & cookies for AMP

- Design opportunities are limited on AMP

- The website accessibility and performance improvements we make only affect web/apps

- Better user experience editorially to land on a Guardian page than an AMP page when coming via Google

- For contributions AMP is the worst performing platform between Apple News, Web and AMP

More details in [Guardian and AMP](https://docs.google.com/document/d/1LLv_KFP5WVPis7KtWhJQNwZwWyJ_JuH2bDNxkAUymIU/edit?tab=t.0)

## Decision

We switched off AMP for a trial period between 12th August 2024 to 9th September 2024

Following analysis of the trial period we switched off AMP completely on 7th January 2025.

AMP code can now be deleted.

More details in the [chat channel](https://mail.google.com/chat/u/0/#chat/space/AAAA5AQB80w)

## Status

Approved
Original file line number Diff line number Diff line change
Expand Up @@ -22,15 +22,15 @@ In DCR, we use file suffixes to help provide some context & information around f

**Rendering Target**

DCR supports rendering for different targets - web, apps & amp.
DCR supports rendering for different targets - web & apps.
To mark code which is only to be used for specific rendering target, this should be added to the suffix of the file, e.g `MyComponent.apps.tsx`, `MyLib.amp.ts` or `MyLayout.web.tsx`.

These files all still live in the directories, and the suffixes are used to determine which target that code is for.
In the case that there's no suffix, it can generally be assumed this code can be shared across targets.

> Note: When this was set up, most web code stayed without suffixes, which means there's a chance it's not compatible with other targets, so be vigilant when using shared code on a new target for the first time.

> Note: Some un-suffixed code might be shared across apps & web, but not AMP, or some other combination, so keep an eye out to see if there's a platform specific version of the file you're working on!
> Note: Some un-suffixed code might be shared across apps & web or some other combination, so keep an eye out to see if there's a platform specific version of the file you're working on!

**Islands / Client side (P)react**

Expand Down
4 changes: 0 additions & 4 deletions dotcom-rendering/docs/elements/Disclaimer.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,3 @@ This is represented in frontend by [DisclaimerBlockElement](https://github.com/g
## CAPI HTML Output

This is inserted raw into the document.

## AMP Cleaned HTML

This is run through the BodyCleaner and the AMP cleaners.
10 changes: 0 additions & 10 deletions dotcom-rendering/docs/elements/Embed.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,4 @@ Appears raw.

If an embed uses `<figure>` tag, then the `ShowAllArticleEmbedsSwitch` can be used with `InBodyElementCleaner` to render a reduced subset of embeds.

## AMP Cleaned HTML

The html included in a potential embed may not be permitted by the AMP specification. For each embed that is renedered in an article we can:

- Transform the embed into something which is valid amp.
- Remove the embed.
- Fail to render the article in AMP.

The field `isMandatory` should control whether an embed is removed or if the page is. Dotcom does not currently support this API, so currently a workaround is used by central production to force the page to fail amp validation.

## Salient Points
4 changes: 0 additions & 4 deletions dotcom-rendering/docs/elements/Image.md
Original file line number Diff line number Diff line change
Expand Up @@ -208,10 +208,6 @@ This is run through the [PictureCleaner](https://github.com/guardian/frontend/bl
- Uses [WidthsByBreakpoint](https://github.com/guardian/frontend/blob/91e117429d865936692de60aa2bea6740bde4f75/common/app/layout/WidthsByBreakpoint.scala#L1) to generate a list of _image_ breakpoints to combine with the media into urls.
- Combines the **master** ImageAsset and [breakpoints](https://github.com/guardian/frontend/blob/a101940926699230b8a95a9082aa56327ca98988/common/app/views/support/Profile.scala#L17) to generate [srcset](https://github.com/guardian/frontend/blob/a101940926699230b8a95a9082aa56327ca98988/common/app/views/support/Profile.scala#L240)s.

## AMP Cleaned HTML

This is run through the same cleaners and templates up to `image.scala.html` where it is then rendered using [ampImage](https://github.com/guardian/frontend/blob/f16a4ac50492dc65d7274576840c6993165a2485/common/app/views/fragments/amp/ampImage.scala.html) which uses [getAmpImageUrl](https://github.com/guardian/frontend/blob/a101940926699230b8a95a9082aa56327ca98988/common/app/views/support/Profile.scala#L298) to get a 620px wide crop.

## Salient points

- Image URLS need to be rewritten from `media.guim` to `i.guim` on the server.
Expand Down
11 changes: 0 additions & 11 deletions dotcom-rendering/docs/elements/Instagram.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,3 @@ This is represented in frontend by [InstagramBlockElement](https://github.com/gu
## CAPI HTML Output

Absolute tonnes of it wow.

## AMP Cleaned HTML

An amp tag [`<amp-instagram>`](https://www.ampproject.org/docs/reference/components/amp-instagram) exists to represent this content.

It requires the following data:

`data-shortcode` | the URL slug for the embed
`data-captioned` | whether a caption is displayed
`width` | the width of the image (not the whole embed)
`height` | the height of the image (not the whole embed)
6 changes: 0 additions & 6 deletions dotcom-rendering/docs/elements/Text.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,3 @@ The [BlockNumberCleaner](https://github.com/guardian/frontend/blob/bb83dabb21aea
- Something else about quotes.
- AffiliateLinksCleaner
- Rewrites URLs on applicable links and adds a disclaimer.
- AttributeCleaner("style")
- Removes inline style on amp articles. Inline style could be in a text block, but it's unlikely.

## AMP Cleaned HTML

This is run through the BodyCleaner and the AMP cleaners.
2 changes: 0 additions & 2 deletions dotcom-rendering/docs/elements/Tweet.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,6 @@ These are dynamically enhanced on the client side by loading the twitter javascr

## Article Cleaned HTML

## AMP Cleaned HTML

## Salient Points

We store enough in CAPI to handle deleted tweets and displaying their images without the twitter js enhancement.
29 changes: 0 additions & 29 deletions dotcom-rendering/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -31,35 +31,6 @@ interface PerformanceEntry {

declare namespace JSX {
interface IntrinsicElements {
// ------------------------------------- //
// AMP types //
// ------------------------------------- //
'amp-accordion': any;
'amp-ad': any;
'amp-analytics': any;
'amp-audio': any;
'amp-consent': any;
'amp-embed': any;
'amp-experiment': any;
'amp-facebook': any;
'amp-form': any;
'amp-geo': any;
'amp-iframe': any;
'amp-img': any;
'amp-instagram': any;
'amp-list': any;
'amp-live-list': any;
'amp-pixel': any;
'amp-script': any;
'amp-sidebar': any;
'amp-soundcloud': any;
'amp-state': any;
'amp-sticky-ad': any;
'amp-twitter': any;
'amp-video': any;
'amp-vimeo': any;
'amp-youtube': any;

/** Island {@link ./src/components/Island.tsx} */
'gu-island': import('./src/components/Island.tsx').GuIsland;
}
Expand Down
2 changes: 0 additions & 2 deletions dotcom-rendering/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,6 @@
"@testing-library/jest-dom": "6.6.3",
"@testing-library/react": "16.3.0",
"@testing-library/user-event": "14.6.1",
"@types/amphtml-validator": "1.0.1",
"@types/body-parser": "1.19.2",
"@types/clean-css": "4.2.11",
"@types/compression": "1.7.5",
Expand Down Expand Up @@ -101,7 +100,6 @@
"@types/youtube": "0.0.50",
"ajv": "8.17.1",
"ajv-formats": "2.1.1",
"amphtml-validator": "1.0.35",
"aws-cdk": "2.1007.0",
"aws-cdk-lib": "2.189.0",
"body-parser": "1.20.3",
Expand Down
1 change: 0 additions & 1 deletion dotcom-rendering/playwright/lib/cmp.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const CMP_LAYER2_REJECT_ALL_BUTTON = 'button.sp_choice_type_REJECT_ALL';
* Accept all on the Sourcepoint CMP banner
*/
const cmpAcceptAll = async (page: Page, rootIframe?: string): Promise<void> => {
// root iframes are used for AMP pages which have two layers of iframes
const root = rootIframe ? page.frameLocator(rootIframe) : page;
const acceptAllButton = root
.frameLocator(CMP_LAYER1_IFRAME)
Expand Down
58 changes: 0 additions & 58 deletions dotcom-rendering/scripts/test/amp-validation.js

This file was deleted.

16 changes: 0 additions & 16 deletions dotcom-rendering/src/AMPAttributes.amp.ts

This file was deleted.

133 changes: 0 additions & 133 deletions dotcom-rendering/src/components/Ad.amp.tsx

This file was deleted.

Loading