Interesting Writeup on Techniques Used by Google to Speed Up Dynamic Page Loads

1
1 Like
2

One relatively obvious use-case for inlined css incl. inline images with data URIs in a Meteor app is the initial “loading” page that gets loaded immediately by the browser even before anything else, to be overwritten later on by your main.html, in my case:

injectAppLoadingContent.js, a function to be invoked from /server/main.js outside of Meteor.startup()

/* global Assets */
import { Inject } from 'meteor/meteorhacks:inject-initial';

/**
 * @see https://github.com/TimeBandit/svgLoadingScreen
 * @see https://forums.meteor.com/t/loading-screen-for-meteor-app/23301/5
 * @see https://forums.meteor.com/t/solved-display-a-spinner-while-your-app-loads/18447
 */
export default function() {
  Inject.rawBody("loader", Assets.getText('app-loading.html'));
}

/private/app-loading.html (excerpt):

<div id="render-target">
  <style>.app-loading
{background-color:#fda466!important;position:absolute;top:0;width:100%;
height:100vh}.app-loading .app-loading-container{position:absolute;
top:50%;left:50%;transform:translate(-50%,-50%);...</style>
  <div class="app-loading">
    <div class="app-loading-container">
      <div class="css-logo"></div>
      <div class="message">The app is loading, this may take a couple
of seconds...</div>
      <div class="lds-ripple">
        <div></div>
        <div></div>
      </div>
    </div>
  </div>
</div>

…with an inlined svg image for the logo and some pure css animation. The point is obviously to not have to load any external resources at all.

1 Like
3

If you want to try the in-line critical css trick, read my post here: Pre-rendered landing pages with Critical CSS

I also employ lazy loading on my main landing page for everything below the fold, with my main logo and landing page hero image as in-line SVG.

2 Likes