Improve PageSpeed with a score of 100 using Dawn theme for Ghost

Improve PageSpeed with a score of 100 using Dawn theme for Ghost

I’m using the dawn theme from this blog.  After having used PageSpeed Insights, with a score of below 91 on the front page and improved to a score of 100 for desktop and 99 for mobile after Hosting Fonts and jQuery Locally.

I followed from this guide

Hosting Fonts Locally

  1. Click here to download the font files.

2. Create a folder named fonts in assets directory.

3. Unzip the downloaded file and copy the files to assets/fonts folder.

4. Open default.hbs file and comment out the line (wrap inside {{!-- --}}) which embeds Google Fonts.  You can search for "https://fonts.googleapis.com" to be more specific.

Old Config

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,400;0,700;0,800;1,400;1,700&display=swap">

New Config

{{!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=..."> --}}

5. Add the necessary CSS in Settings > Code injection > Site Header field.

@font-face {
  font-display: swap;
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/mulish-v1-latin-regular.woff2') format('woff2'),
       url('../fonts/mulish-v1-latin-regular.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Muli';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/mulish-v1-latin-700.woff2') format('woff2'),
       url('../fonts/mulish-v1-latin-700.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Muli';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/mulish-v1-latin-800.woff2') format('woff2'),
       url('../fonts/mulish-v1-latin-800.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Muli';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/mulish-v1-latin-italic.woff2') format('woff2'),
       url('../fonts/mulish-v1-latin-italic.woff') format('woff');
}
@font-face {
  font-display: swap;
  font-family: 'Muli';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/mulish-v1-latin-700italic.woff2') format('woff2'),
       url('../fonts/mulish-v1-latin-700italic.woff') format('woff');
}

Hosting jQuery Locally

  1. Click here to download the latest version of jQuery.

2. Save the file as jquery.min.js in assets/js folder.

3. Open default.hbs file and search for "https://code.jquery.com" to find the <script> tag which embeds remote jQuery.

4. Replace the entire <script>...</script> tag with

Old config

    <script
        src="https://code.jquery.com/jquery-3.5.1.min.js"
        integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
        crossorigin="anonymous">
    </script>

New Config

<script src="{{asset "js/jquery.min.js"}}"></script>