Although we do have the best score I don’t consider 47 being good. We do have over 7 seconds until first meaningful paint is done, that’s from what I read industry practice on the web, but Google sets the goal at 1.6 seconds.
Any idea on best practice and what can be done to achieve a higher score of Google’s Lighthouse (and similar websites testing performance) as well as decreasing time to meaningful first paint is highly appreciated. Especially some low hanging fruits
Oh I see, I actually found the thread, slow visits and there are some updates on how to improve the frist render times from @benlavalley, thought not sure if that directly translates into more points for lighthouse
@a4xrbj1 I’ve just run your page through Lighthouse and you got a performance rating of 67.
I’m not sure how much of that increase will be due to us running Lighthouse on different machines but, none-the-less, it looks like you’ve made some very decent performance improvements. Bravo
Hey Matt, you can achieve this by using WebApp.connectHandlers.use() what you basically do is tell Meteor to render a static page as your Landing page, that will avoid loading all the minified code the first time then it will load all the minified code after its ready, which will speed up the loading speed/scores. I had some help from @benlavalley as he first came with the idea of doing this to modify how meteor renders the contents for the first time, here’s a code example, Warning: it only works for production, so whenever you test run meteor --production
Code Example (Server side code):
import { SSR } from 'meteor/meteorhacks:ssr';
import { Inject } from 'meteor/meteorhacks:inject-initial';
SSR.compileTemplate('landing', Assets.getText('html/landing.html'));
const tempFunc = function () {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/assets/foo.js';
document.getElementsByTagName('body')[0].appendChild(script);
};
let convertedLoadFunc = tempFunc.toString();
convertedLoadFunc = convertedLoadFunc.replace('function tempFunc() {', '');
convertedLoadFunc = convertedLoadFunc.replace('}', '');
convertedLoadFunc = convertedLoadFunc.split('/assets/foo.js');
const lightSpeedOne = convertedLoadFunc[0];
const lightSpeedTwo = convertedLoadFunc[1];
Inject.rawModHtml('lightSpeedJS', function (htmlVar) {
let html = htmlVar;
let scripts = html.match(/<script type="text\/javascript" src.*"><\/script>\n/g); // get all scripts
if (scripts) {
scripts = scripts.join('');
let scriptReplace = scripts.replace(/<script type="text\/javascript" src="/g, lightSpeedOne);
scriptReplace = scriptReplace.replace(/"><\/script>\n/g, lightSpeedTwo);
html = html.replace(/<script type="text\/javascript" src.*"><\/script>\n/g, ''); // remove all scripts.
html = html.replace(/<body>/g, '<body>\n' + SSR.render("landing"));
html += `<script> window.onload = function () {${scriptReplace}};</script>`; // now replace with these!
} else {
console.log(`lightSpeed error: unable to find any scripts to process. htmlVar is : ${htmlVar}`);
}
return html.replace(/[\n]+/g, '\n').replace(/ +/g, ' ');
});
Also now that there’s Meteor 1.5 you can use Dynamic Imports, which should be less “hacky” but this will work if you’re not ready to update to 1.5
Thanks very much!
I’m currently in the process of refactoring my code so that I can make use of dynamic imports. But this is really cool and it’s nice to have a back-up option!
