newrelic / instant-observability-website

Dashboards, alerts, and integrations all in one place. Our quickstarts bundle everything you need to start monitoring like a pro right out of the box.

https://newrelic.com/instant-observability/

Apache License 2.0

5 stars 20 forks source link

More image improvements #299

Closed aswanson-nr closed 2 years ago

aswanson-nr commented 2 years ago

Summary

I noticed that we were still getting dinged for the images we load "below the fold". As I dug into that I noticed that all of the SVGs in the catalogue were being loaded "eagerly" and that the landing pages were not using the version of the image processed by sharp during build.

This PR does the following:

Implements a generic SafeImage component that uses GatsbyImage and falls back to img if needed
Lazy load all SVGs
Update QuickstartImg to use the new image component
Update dashboard screenshots carousel to use the new image component
Update landing banner image to use the new image component
Various linting fixes

gatsby-cloud[bot] commented 2 years ago

Gatsby Cloud Build Report

instant-observability-website

:tada: Your build was successful! See the Deploy preview here.

Build Details

View the build logs here.

:clock1: Build time: 1m

aswanson-nr commented 2 years ago

This should wait on the fixes coming in for previews to make sure it doesn't break anything

josephgregoryii commented 2 years ago

I see the lazy loading working!

nr-opensource-bot commented 2 years ago

:tada: This PR is included in version 1.11.1 :tada:

The release is available on GitHub release

Your semantic-release bot :package::rocket: