New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Move SVG out of HTML #664

Merged
merged 1 commit into from Dec 18, 2017

Conversation

Projects
None yet
1 participant
@schneems
Member

schneems commented Dec 18, 2017

We can get a significant decrease in page size by not sending SVG along with HTML.

The warning icons have been moved to an inline CSS element. This is used on the homepage and on the “repo show” page but with half opacity.

The Logos at the bottom of the page are moved to separate image links. This limits the ability to style the SVGs via CSS. Currently on hover they will turn Red. Instead the asset can be transformed to provide some visual indication of hover state.

The “code triage” logo at the top of every page was moved to a CSS inline element.

By moving these SVG elements out of the HTML it means they do not have to be sent over the wire on every page load. Instead they’re sent once and cached in the browser either in the application.css directly (for inline CSS elements) or via image links. We also benefit by being behind cloudflare for both of these assets.

Move SVG out of HTML
We can get a significant decrease in page size by not sending SVG along with HTML.

The warning icons have been moved to an inline CSS element. This is used on the homepage and on the “repo show” page but with half opacity.

The Logos at the bottom of the page are moved to separate image links. This limits the ability to style the SVGs via CSS. Currently on hover they will turn Red. Instead the asset can be transformed to provide some visual indication of hover state.

The “code triage” logo at the top of every page was moved to a CSS inline element.

By moving these SVG elements out of the HTML it means they do not have to be sent over the wire on every page load. Instead they’re sent once and cached in the browser either in the application.css directly (for inline CSS elements) or via image links. We also benefit by being behind cloudflare for both of these assets.

@schneems schneems merged commit 5119111 into master Dec 18, 2017

1 check was pending

continuous-integration/travis-ci/pr The Travis CI build is in progress
Details
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment