feat: improve card loading speed (#2124)

* feat: improve card loading times

This commit adds the `stale-while-revalidate` option to speed up the
card loading times.

* mend
This commit is contained in:
Rick Staa 2022-11-21 10:21:46 +01:00 committed by GitHub
parent f07cd133d3
commit 3cb205c65b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 54 additions and 9 deletions

View file

@ -61,7 +61,12 @@ export default async (req, res) => {
CONSTANTS.ONE_DAY, CONSTANTS.ONE_DAY,
); );
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`); res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send( return res.send(
renderStatsCard(stats, { renderStatsCard(stats, {

View file

@ -58,7 +58,12 @@ export default async (req, res) => {
cacheSeconds = CONSTANTS.FOUR_HOURS; cacheSeconds = CONSTANTS.FOUR_HOURS;
} }
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`); res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send( return res.send(
renderRepoCard(repoData, { renderRepoCard(repoData, {

View file

@ -52,7 +52,12 @@ export default async (req, res) => {
CONSTANTS.ONE_DAY, CONSTANTS.ONE_DAY,
); );
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`); res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send( return res.send(
renderTopLanguages(topLangs, { renderTopLanguages(topLangs, {

View file

@ -52,7 +52,12 @@ export default async (req, res) => {
cacheSeconds = CONSTANTS.FOUR_HOURS; cacheSeconds = CONSTANTS.FOUR_HOURS;
} }
res.setHeader("Cache-Control", `public, max-age=${cacheSeconds}`); res.setHeader(
"Cache-Control",
`max-age=${
cacheSeconds / 2
}, s-maxage=${cacheSeconds}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
);
return res.send( return res.send(
renderWakatimeCard(stats, { renderWakatimeCard(stats, {

View file

@ -160,7 +160,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([ expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"], ["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.FOUR_HOURS}`], [
"Cache-Control",
`max-age=${CONSTANTS.FOUR_HOURS / 2}, s-maxage=${
CONSTANTS.FOUR_HOURS
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]); ]);
}); });
@ -170,7 +175,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([ expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"], ["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${15000}`], [
"Cache-Control",
`max-age=7500, s-maxage=${15000}, stale-while-revalidate=${
CONSTANTS.ONE_DAY
}`,
],
]); ]);
}); });
@ -191,7 +201,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([ expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"], ["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.ONE_DAY}`], [
"Cache-Control",
`max-age=${CONSTANTS.ONE_DAY / 2}, s-maxage=${
CONSTANTS.ONE_DAY
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]); ]);
} }
@ -202,7 +217,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([ expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"], ["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.FOUR_HOURS}`], [
"Cache-Control",
`max-age=${CONSTANTS.FOUR_HOURS / 2}, s-maxage=${
CONSTANTS.FOUR_HOURS
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]); ]);
} }
@ -212,7 +232,12 @@ describe("Test /api/", () => {
expect(res.setHeader.mock.calls).toEqual([ expect(res.setHeader.mock.calls).toEqual([
["Content-Type", "image/svg+xml"], ["Content-Type", "image/svg+xml"],
["Cache-Control", `public, max-age=${CONSTANTS.FOUR_HOURS}`], [
"Cache-Control",
`max-age=${CONSTANTS.FOUR_HOURS / 2}, s-maxage=${
CONSTANTS.FOUR_HOURS
}, stale-while-revalidate=${CONSTANTS.ONE_DAY}`,
],
]); ]);
} }
}); });