What are preconnect and preload?

They are hints that tell the browser to start work earlier than it otherwise would:

• preconnect - open the connection to another domain now, so the handshake is done before the file is requested.
• preload - fetch a specific file early because you know it will be needed, typically the main font or hero image.
• Use them sparingly - hinting everything is the same as hinting nothing, and can crowd out what actually matters.

Two or three well-chosen hints help. A dozen usually make things worse.