sobrenome Posted August 16, 2022 Posted August 16, 2022 I can't hit Cloudfront cache for font awesome. I have checked that IPS can serve font awesome from Cloudfront. Here is my request (https://www.webpagetest.org/result/220816_BiDcWR_ACG/1/details/#waterfall_view_step1😞 :authority: fisiculturismo.com.br :method: GET :path: /applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0 :scheme: https accept: */* accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.9 cookie: AWSALB=V+qLZCNbjEfbsPzZCvXjy8lR1d7lJw+6Qz1bNnwYg3ri9BdDQEtMndfBsf/Hz6jHSj9ffTMEA4MsyUU2es6+KXvX4j590g0Rnn2XevQuROzwR/vyxmaPt32qn142; AWSALBCORS=V+qLZCNbjEfbsPzZCvXjy8lR1d7lJw+6Qz1bNnwYg3ri9BdDQEtMndfBsf/Hz6jHSj9ffTMEA4MsyUU2es6+KXvX4j590g0Rnn2XevQuROzwR/vyxmaPt32qn142; ips4_IPSSessionFront=fi6hu5jv1pl00tp6jshi3uf2ka origin: https://fisiculturismo.com.br referer: https://fisiculturismo.com.br/ sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="104", "Google Chrome";v="104" sec-ch-ua-mobile: ?1 sec-ch-ua-platform: "Android" sec-fetch-dest: font sec-fetch-mode: cors sec-fetch-site: same-origin user-agent: Mozilla/5.0 (Linux; Android 8.1.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.79 Mobile Safari/537.36 PTST/220727.131331 customize waterfall • View all Images • View HTTP/2 Dependency Graph • Filmstrip Connection View Here is IPS website request (https://www.webpagetest.org/result/220816_BiDcMK_A8Y/2/details/#waterfall_view_step1😞 :authority: invisioncommunity.com :method: GET :path: /applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0 :scheme: https accept: */* accept-encoding: gzip, deflate, br accept-language: en-US,en;q=0.9 origin: https://invisioncommunity.com referer: https://invisioncommunity.com/forums/ sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="104", "Google Chrome";v="104" sec-ch-ua-mobile: ?1 sec-ch-ua-platform: "Android" sec-fetch-dest: font sec-fetch-mode: cors sec-fetch-site: same-origin user-agent: Mozilla/5.0 (Linux; Android 8.1.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.5112.79 Mobile Safari/537.36 PTST/220727.131331 My request sends the loud balancer sticky cookies and ips4 session cookie (AWSALB, AWSALBCORS, ips4_IPSSessionFront). On Cloudfront I am using an origin request policy with no cookie. What am I missing?
sobrenome Posted August 16, 2022 Author Posted August 16, 2022 To make the information more complete, we can see that the font has a Cloudfront hit for IPS website: accept-ranges: bytes age: 20403 content-length: 77160 date: Tue, 16 Aug 2022 08:39:39 GMT etag: "12d68-5e5e6f965f240" last-modified: Wed, 10 Aug 2022 18:11:13 GMT server: Apache set-cookie: AWSALB=d6OLM/lKlq1X47HnfNQVg1FkXxrGusuU+o2LGV90rM4zGRFOoMpfajibPJqVNR+XboSUTzadqFbHRq21GusiocuVGg9ZKDrxKJolQWux//W99zrxDV3qxvgzl4eK; Expires=Sun, 21 Aug 2022 08:29:36 GMT; Path=/ set-cookie: AWSALBCORS=d6OLM/lKlq1X47HnfNQVg1FkXxrGusuU+o2LGV90rM4zGRFOoMpfajibPJqVNR+XboSUTzadqFbHRq21GusiocuVGg9ZKDrxKJolQWux//W99zrxDV3qxvgzl4eK; Expires=Sun, 21 Aug 2022 08:29:36 GMT; Path=/; SameSite=None via: 1.1 8bc02eb70fbe9b20b0505e49467df014.cloudfront.net (CloudFront) x-amz-cf-id: FbMiym9-hjnyPqx1kE22ga9N1Nk0EYTZpXAYtnzG8GXZ7DROZYtYeA== x-amz-cf-pop: IAD66-C2 x-cache: Hit from cloudfront x-content-type-options: nosniff :status: 200 And do not for mine: accept-ranges: bytes cache-control: max-age=2592000, public content-length: 77160 content-type: application/font-woff2 date: Tue, 16 Aug 2022 14:33:40 GMT etag: "12d68-5e3c8209e1ce0" expires: Thu, 15 Sep 2022 14:33:40 GMT last-modified: Thu, 14 Jul 2022 18:32:43 GMT server: Apache/2.4.54 (Ubuntu) set-cookie: AWSALB=ldcCFgF+iJ0E/9dkC7wI4cjnuEVQbpZIdhNTudEvrd2RNGyXq1KOUVxtocvI6fgV6ZgUUbC34vikqmDhDGNxJuswDudtAo0P8RpZDyi/k2/Njzu5uQUSS0REf8QM; Expires=Tue, 23 Aug 2022 14:33:40 GMT; Path=/ set-cookie: AWSALBCORS=ldcCFgF+iJ0E/9dkC7wI4cjnuEVQbpZIdhNTudEvrd2RNGyXq1KOUVxtocvI6fgV6ZgUUbC34vikqmDhDGNxJuswDudtAo0P8RpZDyi/k2/Njzu5uQUSS0REf8QM; Expires=Tue, 23 Aug 2022 14:33:40 GMT; Path=/; SameSite=None; Secure :status: 200 On the response, the difference is huge. How can I configure Cloudfront to achieve the same request and response?
The Old Man Posted August 19, 2022 Posted August 19, 2022 Hi, I'm guessing but it looks like the caching behaviour isn't set up correctly on your Cloudfront distribution. You may have a general configuration that needs to be checked, or you may have individual caching behaviours set up for different types of content, in which case check the one for fonts or WOFF2 files. If you have some individual behaviours say for CSS or Images but don't have one one for fonts Cloudfront falls back to the default caching behaviour so check that in case it's not configured to cache properly. Double check your paths have wild cards for your caching behaviours: https://aws.amazon.com/premiumsupport/knowledge-center/cloudfront-not-following-cache-behavior/ If you have made changes but are not seeing them you may need to invalidate the cache. https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html Hope this helps. sobrenome 1
sobrenome Posted August 19, 2022 Author Posted August 19, 2022 1 hour ago, The Old Man said: If you have some individual behaviours say for CSS or Images but don't have one one for fonts Cloudfront falls back to the default caching behaviour so check that in case it's not configured to cache properly. CSS, images and JS come from S3 and they hit Cloudfront cache. To make sure that I was not messing with custom policies, I have tested the manage cache policy (CachingOptimized) and no origin policy and no headers response. Same issue. The request goes along with cookies and that mess the cache.
The Old Man Posted August 19, 2022 Posted August 19, 2022 Hi Sobrenome, Yes your CSS files etc are being served by Cloudfront on your CDN domain, in fact when I first looked at your site, all the CSS, images etc were missing, so I assumed either you were working on it or you just have Cloudfront unavailable from the UK where I am, no biggie of course, it just means your CDN content is only available in Brazil and wherever else you have it enabled for. I used a Brazil based endpoint to view the site and it loaded the CSS just fine. I just checked your first link and you tested from Virgina US, so it is available there too. I'm wondering though if it's because your whole site is hosted on S3 and behind Cloudfront and you have a sub domain behind Cloudfront too; so your font isn't being served from the same origin. The font doesn't get transferred to the CDN domain by IPS like images, CSS etc hosted on S3 storage do, it's remains located on the main local domain, not cdn.yoursite.com. Have you therefore got 2 Cloudfront origins set up, one for the IPS site and one for the CDN subdomain? If you only have one for the CDN domain it may be the cause? Hope this makes sense. sobrenome 1
The Old Man Posted August 19, 2022 Posted August 19, 2022 Have you got cache-control headers set up on that file? https://fisiculturismo.com.br/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0 Quote HTTP Status for: "https://fisiculturismo.com.br/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" HTTP/1.1 200 OK Date: Fri, 19 Aug 2022 15:27:25 GMT Content-Type: font/woff2 Content-Length: 77160 Connection: close Set-Cookie: AWSALB=IfTShhirxu9cWpPC6gVHzB0GWSiov+RK6f4UjBuQofYJ5Ei+Kjwu6bVdyKJwAgpsyMx8NCFvfMkXk4706TgEZk7gN2ClDH3aefbBP4HG3NX1HMD8mz6pc40Bjnk2; Expires=Fri, 26 Aug 2022 15:27:25 GMT; Path=/ Set-Cookie: AWSALBCORS=IfTShhirxu9cWpPC6gVHzB0GWSiov+RK6f4UjBuQofYJ5Ei+Kjwu6bVdyKJwAgpsyMx8NCFvfMkXk4706TgEZk7gN2ClDH3aefbBP4HG3NX1HMD8mz6pc40Bjnk2; Expires=Fri, 26 Aug 2022 15:27:25 GMT; Path=/; SameSite=None; Secure Server: Apache/2.4.54 (Ubuntu) Last-Modified: Thu, 14 Jul 2022 18:32:43 GMT ETag: "12d68-5e3c8209e1ce0" Accept-Ranges: bytes Check the cache-control meta data on the file in S3 console, should look something like: What does your cache behaviour configuration look like? Do you have it set to use the origin cache headers? If so they can be set incorrectly, with the cache-control and/or file-type incorrect or missing. If you have it set to custom, make sure the minimum TTL isnt 0. E.g. These TTL shown above are too short for Woff2 fonts, you could use much longer times. sobrenome 1
sobrenome Posted August 19, 2022 Author Posted August 19, 2022 9 hours ago, The Old Man said: so I assumed either you were working on it or you just have Cloudfront unavailable from the UK where I am Yes! As long as the site written in Portuguese and many robots from UK were intensively consuming the resources, UK was blocked on Cloudfront distribution (China and Russia for the same reason). 9 hours ago, The Old Man said: I'm wondering though if it's because your whole site is hosted on S3 and behind Cloudfront and you have a sub domain behind Cloudfront too Only CSS, images and JS is hosted on S3 (using the IPS 4 feature). The website pages are on EC2, behind ELB and Cloudfront. 9 hours ago, The Old Man said: Have you therefore got 2 Cloudfront origins set up, one for the IPS site and one for the CDN subdomain? Yes, 2 origins. One is S3 and the other one is ELB. 8 hours ago, The Old Man said: Check the cache-control meta data on the file in S3 console, should look something like: S3 files are caching fine. The issue is related to woff2 font (that is not hosted on S3) and web manifest (also not hosted on S3).
Randy Calvert Posted August 20, 2022 Posted August 20, 2022 You may need to look at your cache policy. Many default rules will treat files with a query string as uncachable. Since the requested object has a query string, it could be skipping cache and considering the file as dynamic. sobrenome 1
sobrenome Posted August 20, 2022 Author Posted August 20, 2022 (edited) 2 hours ago, Randy Calvert said: You may need to look at your cache policy. Many default rules will treat files with a query string as uncachable. Since the requested object has a query string, it could be skipping cache and considering the file as dynamic. I have tried with and without que query string. No change. The issue is related to the cookies that are sent with the request, that should not be sent. Even if I set no cookie on cache policy and no cookie on request policy, the cookies are sent. I can’t figure out why. Edited August 20, 2022 by sobrenome
sobrenome Posted August 22, 2022 Author Posted August 22, 2022 @Marc Stridgen could you please inform the CloudFront behavior to cache Font Awesome (Cache Policy, Origin request policy and Responde headers)?
sobrenome Posted August 24, 2022 Author Posted August 24, 2022 The issue was on DNS. Route53 was pointing to ELB, not to Cloudfront.
sobrenome Posted August 29, 2022 Author Posted August 29, 2022 Now there is another problem. Font Awesome is not being cached by browsers. Here is my apache conf directives for fonts: # Add correct content-type for fonts AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg AddType application/x-font-woff2 .woff2 # Fonts ExpiresByType font/ttf "access plus 1 year" ExpiresByType font/otf "access plus 1 year" ExpiresByType font/woff "access plus 1 year" ExpiresByType font/woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType application/x-font-woff2 "access plus 1 year" ExpiresByType application/font-woff2 "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year"
Recommended Posts