Skip to content
This repository was archived by the owner on Dec 19, 2024. It is now read-only.

Font load optimization #564

Merged
davidrans merged 1 commit into from
Aug 2, 2022
Merged

Font load optimization #564

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 1 addition & 26 deletions frontend/components/common/AppProviders.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { IFIXIT_ORIGIN } from '@config/env';
import { AppProvider } from '@ifixit/app';
import { theme } from '@ifixit/ui';
import Head from 'next/head';
import * as React from 'react';
import { QueryClient, QueryClientProvider } from 'react-query';
import { AlgoliaProps, InstantSearchProvider } from './InstantSearchProvider';
Expand Down Expand Up @@ -43,31 +42,7 @@ export function AppProviders({
algolia,
}: React.PropsWithChildren<AppProvidersProps>) {
const markup = (
<>
<Head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossOrigin="true"
/>
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=swap"
rel="stylesheet"
/>

<link
rel="prefetch"
href={`${IFIXIT_ORIGIN}/api/2.0/user`}
as="fetch"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
</Head>
<ChakraProvider theme={customTheme}>{children}</ChakraProvider>
</>
<ChakraProvider theme={customTheme}>{children}</ChakraProvider>
);

return (
Expand Down
4 changes: 3 additions & 1 deletion frontend/components/product-list/MetaTags.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,9 @@ export function MetaTags({ productList }: MetaTagsProps) {
const productListExemptions =
noIndexExemptions[encodeDeviceTitle(productList.deviceTitle ?? '')];
const isNoIndexExempt = itemType
? productListExemptions?.itemTypes?.includes(encodeDeviceItemType(itemType))
? productListExemptions?.itemTypes?.includes(
encodeDeviceItemType(itemType)
)
: productListExemptions?.root;
const hasResults = pagination.nbHits >= (isNoIndexExempt ? 1 : 2);
const shouldNoIndex = isFiltered || !hasResults || productList.forceNoIndex;
Expand Down
86 changes: 43 additions & 43 deletions frontend/legacyPartCollectionRoutes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
const legacyTagToItemType = {
'AC_Inlets': 'Ports',
'Adapters': 'Power_Adapters',
'Adhesive_Strips': 'Adhesives',
'Bluetooth_Boards': 'Wireless_Boards',
'Bumpers': 'Case_Components',
'Card_Cages': 'Case_Components',
'Charger_Boards': 'Boards',
'Click_Wheels': 'Buttons',
'Clips': 'Brackets',
'Controllers': 'Case_Components',
AC_Inlets: 'Ports',
Adapters: 'Power_Adapters',
Adhesive_Strips: 'Adhesives',
Bluetooth_Boards: 'Wireless_Boards',
Bumpers: 'Case_Components',
Card_Cages: 'Case_Components',
Charger_Boards: 'Boards',
Click_Wheels: 'Buttons',
Clips: 'Brackets',
Controllers: 'Case_Components',
'DC-In_Boards': 'Ports',
'Digitizers': 'Screens',
'Displays': 'Screens',
'Dock_Connectors': 'Cables',
'Docks': 'Ports',
'Earbuds': 'Accessories',
'Flash': 'Case_Components',
'Front_Panels': 'Screens',
'Hard_Drive_Brackets': 'Brackets',
'Hard_Drive_Enclosures': 'Case_Components',
'Hard_Drive_Kits': 'Kits',
"Hard_Drives_\\(PATA\\)": 'Hard_Drives',
"Hard_Drives_\\(SATA\\)": 'Hard_Drives',
'Hinges': 'Case_Components',
Digitizers: 'Screens',
Displays: 'Screens',
Dock_Connectors: 'Cables',
Docks: 'Ports',
Earbuds: 'Accessories',
Flash: 'Case_Components',
Front_Panels: 'Screens',
Hard_Drive_Brackets: 'Brackets',
Hard_Drive_Enclosures: 'Case_Components',
Hard_Drive_Kits: 'Kits',
'Hard_Drives_\\(PATA\\)': 'Hard_Drives',
'Hard_Drives_\\(SATA\\)': 'Hard_Drives',
Hinges: 'Case_Components',
'I/O_Board': 'Boards',
'Induction_Coil': 'Charging_Coils',
'Inverters': 'Boards',
'LCDs': 'Screens',
'Lenses': 'Cameras',
'Lightning_Connector': 'Cables',
'Logic_Boards': 'Motherboards',
'Magnets': 'Case_Components',
'Memory_Maxxer_Kits': 'RAM',
'Midframe': 'Case_Components',
'Power_Jacks': 'Ports',
'Rubber_Feet': 'Case_Components',
'SD_Card': 'Hard_Drives',
'SSD_Upgrade_Kits': 'Hard_Drives',
'SSDs': 'Hard_Drives',
'Straps': 'Case_Components',
'Styluses': 'Accessories',
'Test_Cables': 'Cables',
'Timing_Control_Boards': 'Boards',
'USB_Boards': 'Boards',
Induction_Coil: 'Charging_Coils',
Inverters: 'Boards',
LCDs: 'Screens',
Lenses: 'Cameras',
Lightning_Connector: 'Cables',
Logic_Boards: 'Motherboards',
Magnets: 'Case_Components',
Memory_Maxxer_Kits: 'RAM',
Midframe: 'Case_Components',
Power_Jacks: 'Ports',
Rubber_Feet: 'Case_Components',
SD_Card: 'Hard_Drives',
SSD_Upgrade_Kits: 'Hard_Drives',
SSDs: 'Hard_Drives',
Straps: 'Case_Components',
Styluses: 'Accessories',
Test_Cables: 'Cables',
Timing_Control_Boards: 'Boards',
USB_Boards: 'Boards',
'Wi-Fi_Boards': 'Wireless_Boards',
'Wireless': 'Wireless_Boards',
Wireless: 'Wireless_Boards',
};

const legacyTagsWithNoItemType = [
Expand Down
5 changes: 4 additions & 1 deletion frontend/lib/ifixit-api/devices.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,10 @@ export async function fetchDeviceWiki(
): Promise<DeviceWiki | null> {
const deviceHandle = getDeviceHandle(deviceTitle);
try {
invariant(deviceHandle.length > 0, "deviceHandle cannot be a blank string");
invariant(
deviceHandle.length > 0,
'deviceHandle cannot be a blank string'
);
const response = await fetch(
`${IFIXIT_ORIGIN}/api/2.0/cart/part_collections/devices/${deviceHandle}`,
{
Expand Down
32 changes: 32 additions & 0 deletions frontend/pages/_document.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { IFIXIT_ORIGIN } from '@config/env';
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=swap"
Copy link
Contributor

@jarstelfox jarstelfox Aug 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Google dislikes any second paint above the fold. It's likely setting font-display: optional would fix it (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
Optional will force the first load of "slow" users to not use our font(s) and thus fallback to the browser defaults.
It's possible to style the browser defaults close to the actual font, which is what we do on the main site. It's a pain to style and may not be worth it right now.

Suggested change
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=swap"
href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=optional"

Copy link
Contributor

@davidrans davidrans Aug 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think what we have here in this pull is an improvement, so let's kick this suggestion to a new issue

rel="stylesheet"
/>
<link
rel="prefetch"
href={`${IFIXIT_ORIGIN}/api/2.0/user`}
as="fetch"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}

export default MyDocument;