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
- 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
- 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>