Improving GTmetrix results

Design help General
1

Hey guys, I’m looking for a recommendation on improving gtmetrix on our site, made and hosted via webflow (sightplan.com).

Im getting few negative marks on these particular items:

  1. Serve scaled images (F). The following images are resized in HTML or CSS. Serving scaled images could save 330.5KiB (74% reduction).
  • basically webflow serves retina images via downscale vs calling the the dpi images via media queries. Is there way around this?
  1. Combine images using CSS sprites (F). Optimizing the following images could reduce their size by 23.9KiB (36% reduction).
  • not trivial but but still would love your recommendation on this.
  1. Specify a Vary: Accept-Encoding header (B). The following publicly cacheable, compressible resources should have a “Vary: Accept-Encoding” header.
  • Looking for a suggestion here.
  1. Prefer asynchronous resources (B). The following resources are loaded synchronously. Load them asynchronously to reduce blocking of page rendering.
  • Is there a way to achieve this?
  1. Minify JavaScript (B). Minifying the following JavaScript resources could reduce their size by 11.1KiB (12% reduction).
  • I see that there is a way to minify CSS, but no JS.
  1. On YSLOW test. Add Expires headers. There are 4 static components without a far-future expiration date.
  • is there a way to add this expiries manually, those are css and js files.

Feel free to run the test on sightplan.com on http://gtmetrix.com to see these results.

Thanks!

2

Is anybody have ideas on these questions?

3

First off. GREAT job with the website. It looks beautiful. The dropdown menu for solutions especially.

For your first item, I think you should be fine. Serving a 400K gif isn’t too bad IMO. But, if you want to try doing some responsive images stuff, that could solve the issue.

Are you experiencing any major slow load times with your site? If you’re hosting your site with us, you’ll be happy to know that it is being hosted on AWS and you’re already getting super fast speeds from our CDN partnership with https://www.fastly.com/

hope this helps :smile:

4

Hi @themanro, Great questions! and ditto what @PixelGeek said: nice site! :wink:

  1. We’re working on serving images dynamically based on media queries but no firm ETA - hopefully we can implement this soon :slight_smile:
  2. You can make your sprite images in an image editing app like Photoshop and upload it to Webflow (this is how I use sprites). Then change the background position to the location of the image/icon you’re using.
  3. I’m not 100% sure about the Vary: Accept Encoding header question - I’ve reached out to some team mates and waiting for feedback. In the meantime, this article goes over a few ways you can optimize your site’s encoding (Optimizing Encoding and Transfer Size of Text-Based Assets).
  4. You can achieve the asynchronous loading of your GA integration using custom code but this is considered high-risk and is a part of Google’s experimental features (Make Google Analytics Asynchronous)
  5. Yes, minifying JS will likely be a feature we offer in a future release (as well as a refined JS export that only includes what is needed)
  6. We don’t have a way to manually change the cache-control for your images, however, we do plan on updating these to something higher than its current 24 hour setting

Hope this helps! :slight_smile:

1 Like
5

@thewonglv Is there is an alternate strategy for controlling GIF animations that doesn’t require us to expire the image? (so we don’t serve them from separate URL)

6

Hey guys, can we follow up on this?

7

Hi @themanro, thanks for the followup :slight_smile: Sorry for the late reply. The matter has not been forgotten, however there is no eta for specific feature updates yet.

When there is an update, will advise :slight_smile: Cheers, Dave

8

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.