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

1 Like

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
 * @see
 * @see
export default function() {
  Inject.rawBody("loader", Assets.getText('app-loading.html'));

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

<div id="render-target">
height:100vh}.app-loading .app-loading-container{position:absolute;
  <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">

…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

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.