Jump to content

How to cache font awesome on Cloudfront

sobrenome

By sobrenome
in Developer Connection

 Share

Recommended Posts

sobrenome Veteran

sobrenome

Posted
Posted

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?

Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
  • Author
Posted

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?

Link to comment
Share on other sites
The Old Man Grand Master

The Old Man

Posted
Posted

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.

Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
  • Author
Posted
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.

Link to comment
Share on other sites
The Old Man Grand Master

The Old Man

Posted
Posted

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.

Link to comment
Share on other sites
The Old Man Grand Master

The Old Man

Posted
Posted

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:

Could contain: Text, Page, File

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.

Could contain: Text, Page, Menu, File

These TTL shown above are too short for Woff2 fonts, you could use much longer times.

Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
  • Author
Posted
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).

Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
  • Author
Posted (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 by sobrenome
Link to comment
Share on other sites
sobrenome Veteran

sobrenome

Posted
  • Author
Posted

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"

 

Link to comment
Share on other sites
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
Invision Community © 2024 IPS, Inc.
×
×
  • Create New...