1) Réduire le temps de réponse du serveur.

Cela ne m'avait pas sauté aux yeux de prime abord, mais le choix du site d'hébergement est primordial. En effet, la latence lors de l'envoi de requêtes est déterminante, cela peu baisser votre note chez Google PageSpeed Insights entre 10 et 20 points. C'est un domaine qui dépasse ma compétence, mais il est primordiale. Donc à essayer avant de se lancer. Pourquoi? Si votre site est compatible avec les mobiles(tablettes et smart phones) vous allez avoir de fort ralentissement, car même optimisé je trouve que la vitesse d'exécution des navigateurs n'est pas très rapide, comparativement à celle d'un pc.

De plus le choix du site d'hébergement est primordial, car vous aurez des options déterminantes pour le reste de l'optimisation de vos pages(compression, mise en cache, .htaccess).

2) Limiter le nombre de requêtes lors du chargement de la page.

Celle-là j'ai mis du temps à la comprendre, car elle va à l'encontre des habitudes de programmation. Puisque lors du chargement de la page index.php, vous allez faire des requêtes à des fichiers externes (2 fonts, 2.css, 2 .js), or, cette répartition ralentit l'affichage de la page, car on doit attendre que les serveurs répondent et envoient les fichiers.
C'est pourquoi Google PageSpeed Insights, vous place en zone orange voir rouge. Donc pour avoir une vitesse de chargement optimale vous devez tout placer dans le même fichier.
Concrètement:

1. Les fonts seront présentes sur votre site.
2. Elles seront incluses dans votre fichier css.
3. Un seul fichier CSS sera inclus : if mobile else pc. Ou CSS responsive.
4. Le fichier CSS sera inclus pas dans une balise <link /> mais <style> <?php require(./MonFichierCSS); ?> </style>
5. Le fichier JavaScript sera inclus en bas de page dans des balises <script> <?php require(./MonJS); ?> </script>
6. CAS PARTICULIER: jquery, si vous l'utilisez ce sera abordé plus loin, seul fichier ayant une requête externe via CDN(Content Delivery Network)

3) Le cas de l'importation de polices externes.

3.1) Google fonts

Google propose un service de fonts externes fort pratique,Google fonts, puisque ces fonts seront accessibles par tous et sur tout type de plateforme. Pour ma part j'utilise les fonts Ubuntu.
Après les avoir sélectionnées, via "add to collection", puis "Use". Vous arrivez sur une page, dans l'un des onglets le "3. Add this to your website" qui donne la balise <link> à ajouter. Ce que j'ai fait, or cela pose deux problèmes dans l'optique de l'optimisation et du respect des règles du W3C: Premièrement cela alourdit le temps de chargement et deuxièmement, le href ne passe pas la validation du W3C à cause de caractères non reconnus dans un href.

La solution:

Téléchargez la font, placer la sur votre serveur, puis dans le .css relier la via url()

3.2) Icomoon

IcoMoon propose une font à base d'icônes. Il offrent la possibilité de charger la font sous différents formats. Deux possibilités télécharger la font, on se retrouve alors avec une font et un fichier css avec une taille plus ou moins lourde selon le nombre d'icônes choisies. la meilleure solution est de télécharger le fichier svg, puis d'inclure les balises svg que vous utiliserez pour votre site après la balise body, puis de les appeler quand vous en aurez besoin.

4) Un seul fichier CSS.

Cela dépasse le cadre de cet article, mais vous devez faire un design web responsive, c.-à-d. un fichier css tout-terrain qui s'affichera sur toutes les formes de média. En gros sur une colonne et des largeurs en pourcentage. Pour ce qui s'affiche à l'horizontale cela doit être soit en flex soit en float pour pouvoir coulisser en cas de redimensionnement. penser à gérer les débordements, voir l'article CSS: Gérer son contenu.

Mon css est en fait un php auquel je fais passer des variables pour changer le design et l'adapter selon le client. Voir l'article PHP: Mobile ou PC?. Pour l'instant je m'en sers pour changer la taille de la police: 0.9em pour les pc et 1.1em pour tout ce qui est mobile, et aussi changer les couleurs à la volée. Mais les possibilités sont énormes ...

5) Importer le fichier Jquery et le placer à la fin du document.

Comme je l'ai précisé plus haut numéricable ne propose pas de compression de données. Mais il existe une astuce pour éviter le goulet d'étranglement que représente jquery(90ko). Soit vous le mettez en cache, soit vous le téléchargez sur un CDN(Content Delivery Network) qui le propose déjà zippé et ainsi externaliser la ressource.
Voir l'article optimiser le chargement de Jquery.

6) Placer le JavaScript à la fin du document.

Insérez le fichier minifié dans des balises <script> <?php require(./MonFichierJS); ?> </script> avant la balise </body>

7) Réduire la taille des ressources, CSS, HTML, JAVSCRIPT.

Votre document doit tenir sur une seul ligne. Voir Minifier HTML CSS JS avec les exemples pour minifier le code html, js et css.

8) Optimiser les images.

Une étape très importante qui permet de gagner de précieux Ko lors du chargement des pages.
Voir l'article optimiser les images pour le web.

9) Autoriser la compression.

Si votre hébergeur le permet cela ce fais via votre .htaccess et que la compression via gzip/deflate soit activée côté serveur.

10) Exploiter la mise en cache du navigateur.

Si votre hébergeur le permet cela ce fais via votre .htaccess(le plus simple). Ou via les header de PHP.

11) Afficher en priorité le contenu visible.

Votre site doit afficher le contenu visible sur l'écran de l'utilisateur le plus rapidement possible, pour le css les balises d'entêtes style sont le moyen le plus rapide et votre javascript en bas de page ne doit pas interférer avec l'affichage du contenu visible.