First Task: Speed up the template

I'm starting a new blog and the first thing I did was to optimize the template

Marius QuadfliegMarius Quadflieg

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 deferattribute 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 */
}