Today I will start a new blog. So the first thing I did was optimize the template to reduce rendering time by 50%.
So how did I do it? We need to follow some steps.
Reduce Render Blocking CSS
The template uses several CSS files like this:
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/google-font.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/font-awesome.min.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/main.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/add-on.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/monokai-sublime.css">
So to get those preloaded and therefor not render blocking we need to add the preload directive:
<link rel="preload" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/google-font.css" as="style" />
<link rel="preload" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/font-awesome.min.css" as="style" />
<link rel="preload" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/main.css" as="style" />
<link rel="preload" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/add-on.css" as="style" />
<link rel="preload" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/monokai-sublime.css" as="style" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/google-font.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/font-awesome.min.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/main.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/add-on.css" />
<link rel="stylesheet" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>css/monokai-sublime.css">
That will take care of the stylesheet part.
Reduce render blocking Javascript
The Javascripts were already in the footer, but they did block the rendering.
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/jquery.min.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/skel.min.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/util.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/main.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/backToTop.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/highlight.pack.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/readingTime.js"></script>
As an analysis showed, only JQuery was needed before rendering the page. So I added the preload directive in the HTML header.
<link rel="preload" href="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/jquery.min.js" as="script" />
And added the defer
attribute to the <script>
tags in the footer. JQuery being the exception.
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/jquery.min.js"></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/skel.min.js" defer></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/util.js" defer></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/main.js" defer></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/backToTop.js" defer></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/highlight.pack.js" defer></script>
<script src="<#if (content.rootpath)??>${content.rootpath}<#else></#if>js/readingTime.js" defer></script>
Adding font-display to @font-face
The templates uses custom webfonts. By default the text is not rendered until the webfont is loaded.
To change the behaviour I added the font-display: swap
attribute and value to the existing @font-face
CSS definitions.
Example:
@font-face {
font-family: 'Raleway';
font-style: normal;
font-display: swap;
font-weight: 400;
src: url('../fonts/raleway-v10-latin-ext_latin-regular.eot'); /* IE9 Compat Modes */
src: local('Raleway'), local('Raleway-Regular'),
url('../fonts/raleway-v10-latin-ext_latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v10-latin-ext_latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/raleway-v10-latin-ext_latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/raleway-v10-latin-ext_latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/raleway-v10-latin-ext_latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}