Slow Cloudfront images

Hello there!

We create Cloudfront distributions through the CDK, we got alert that "'CloudFrontWebDistribution' is deprecated" so I created new distributions with "Distribution", I create an S3 bucket, OAC policy and cache policy. The old distribution uses OAI and legacy caching (with the same settings as the cache policy).

The problem I have is that the new distributions, especially images are extremely slow, the old distribution loads an image in 13-30ms and the new distributions 300ms-1.2seconds, BUT not always.

What I have tried -

1. Manually set the new distribution to use legacy caching to no success.
2. Created an Origin Request Policy with settings Headers-None, Cookies-None and Quesry Strings-All
3. Set the permissions on the bucket to the same as the old bucket
4. I have set caching to 7 days from 1 day.

I have tested the response headers and whether it is a x-cache:Miss from cloudfront or x-cache: Hit from cloudfront it is still slow.

		let originAccessIdentity = new cloudfront.OriginAccessIdentity(this, name("oai"), {
			comment: id
		});
		const oldsiteBucket = new s3.Bucket(this, name("web-bucket"), {
			bucketName: name("web-bucket"),
			websiteIndexDocument: "index.html",
			websiteErrorDocument: "error.html",
			removalPolicy: isProd ? cdk.RemovalPolicy.RETAIN : cdk.RemovalPolicy.DESTROY
		});
		oldsiteBucket.grantRead(originAccessIdentity);

		let alternateSiteSubDomains = (buildProps.Params.LProviders as LProvider[]).filter(x => x.SiteSubDomain).map(x => x.SiteSubDomain + ".example.com");
		let tmpAlternateSiteSubDomains = (buildProps.Params.tmpLProviders as ILProvider[])
			.filter(x => x.SiteSubDomain)
			.map(x => x.SiteSubDomain + ".example.com");

		new cloudfront.CloudFrontWebDistribution(this, name("web-dist"), {
			comment: name("web-dist"),
			originConfigs: [
				{
					s3OriginSource: {
						s3BucketSource: oldsiteBucket,
						originAccessIdentity: originAccessIdentity
					},
					behaviors: [
						{
							isDefaultBehavior: true,
							defaultTtl: cdk.Duration.seconds(86400),
							maxTtl: cdk.Duration.seconds(86400),
							minTtl: cdk.Duration.seconds(86400),
							compress: true,
							forwardedValues: {
								queryString: true
							}
						}
					]
				}
			],
			httpVersion: cloudfront.HttpVersion.HTTP2_AND_3,
			viewerCertificate: cloudfront.ViewerCertificate.fromAcmCertificate(
				cert.Certificate.fromCertificateArn(this, name("eb-cert"), buildProps.Params.LWildcardCert),
				{
					aliases: [...new Set([buildProps.Params.SiteDomain, ...alternateSiteSubDomains])],
					securityPolicy: cloudfront.SecurityPolicyProtocol.TLS_V1_2_2021
				}
			),
			viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS,
			priceClass: PriceClass.PRICE_CLASS_ALL,
			errorConfigurations: [
				{
					errorCode: 404,
					errorCachingMinTtl: 300,
					responseCode: 200,
					responsePagePath: "/index.html"
				}
			]
		});

New distribution -

		// Create frontend web hosting S3 bucket
		const siteBucket = new s3.Bucket(this, name("website-bucket"), {
			bucketName: name("website-bucket"),
			websiteIndexDocument: "index.html",
			websiteErrorDocument: "error.html",
			removalPolicy: isProd ? cdk.RemovalPolicy.RETAIN : cdk.RemovalPolicy.DESTROY,
			publicReadAccess: true,
			blockPublicAccess: s3.BlockPublicAccess.BLOCK_ACLS
		});

		const distribution = new cloudfront.Distribution(this, name("dist"), {
			comment: name("dist"),
			defaultBehavior: {
				origin: origins.S3BucketOrigin.withOriginAccessControl(siteBucket),
				allowedMethods: cloudfront.AllowedMethods.ALLOW_GET_HEAD_OPTIONS,
				cachePolicy: new cloudfront.CachePolicy(this, name("CachePolicy"), {
					cachePolicyName: name("CachePolicy"),
					defaultTtl: cdk.Duration.seconds(86400),
					maxTtl: cdk.Duration.seconds(86400),
					minTtl: cdk.Duration.seconds(86400),
					queryStringBehavior: cloudfront.CacheQueryStringBehavior.all()
				}),
				compress: true,
				viewerProtocolPolicy: cloudfront.ViewerProtocolPolicy.REDIRECT_TO_HTTPS
			},
			additionalBehaviors: {},
			defaultRootObject: "index.html",
			priceClass: cloudfront.PriceClass.PRICE_CLASS_ALL,
			httpVersion: cloudfront.HttpVersion.HTTP2_AND_3,
			minimumProtocolVersion: cloudfront.SecurityPolicyProtocol.TLS_V1_2_2021,
			certificate: cert.Certificate.fromCertificateArn(this, name("cf-cert"), buildProps.Params.LWildcardCert),
			domainNames: [...new Set([buildProps.Params.tmpSiteDomain, ...tmpAlternateSiteSubDomains])],
			errorResponses: [
				{
					httpStatus: 404,
					responseHttpStatus: 200,
					responsePagePath: "/index.html",
					ttl: cdk.Duration.seconds(300)
				}
			]
		});

		siteBucket.addToResourcePolicy(
			new iam.PolicyStatement({
				actions: ["s3:ListBucket"],
				resources: [siteBucket.bucketArn],
				principals: [new iam.ServicePrincipal("cloudfront.amazonaws.com")],
				conditions: {
					StringEquals: {
						"AWS:SourceArn": `arn:aws:cloudfront::${cdk.Aws.ACCOUNT_ID}:distribution/${distribution.distributionId}`
					}
				}
			})
		);

		siteBucket.addToResourcePolicy(
			new iam.PolicyStatement({
				actions: ["s3:GetObject"],
				resources: [`${siteBucket.bucketArn}/*`],
				principals: [new iam.ServicePrincipal("cloudfront.amazonaws.com")],
				conditions: {
					StringEquals: {
						"AWS:SourceArn": `arn:aws:cloudfront::${cdk.Aws.ACCOUNT_ID}:distribution/${distribution.distributionId}`
					}
				}
			})
		);