Jump to content

Pagespeed ranking 98/100


Recommended Posts

  • Moderators

 

Quote

https://yoast.com/page-speed-ranking-factor/   April 2017

It’s official: Google announced that page speed will be a ranking factor in its mobile-first index. But what does that mean? There’s no beating around the bush anymore: you should work on making your site as fast and accessible as possible.

Googles PageSpeed tool (https://developers.google.com/speed/pagespeed/insights/) checks any website or webapp on various speedfactors, and returns a rating both for desktop and mobile.

Most of these factors are easy to implement. Just tick the relevant minifying, packing, obfuscation boxes in the "Compiler-Code generation" section of the Project Options. The PageSpeed tool also flags un-optimised images and even optimises them to download.

The more difficult option is the rule about "prioritising visible content".

Quote

Structure your HTML to load the critical, above-the-fold content first

Load the main content of your page first. Structure your page so the initial response from your server sends the data necessary to render the critical part of the page immediately and defer the rest. This may mean that you must split your CSS (and JS)  into two parts: an inline part that is responsible for styling the ATF portion of the content, and the part that can be deferred.

 

 

This is obviously difficult to do in regular SMS projects. Both the CSS and JS files generated by the compiler don't make any distinction between 'above' or 'below' the fold.

To circumvent this, the following works for me : 

  • Get the generated HTML code for the first form. Easiest is execute the project in the IDE, go to the "Console section" in DevTools and type 'copy(document.body.innerHTML);' This copies the generated HTML to the clipboard.
  • Insert this code in the HTML template in the top of the <body> section
  • Insert the keyword 'async' in the <script> section where the main.js file is loaded

This basically quickly renders the first page in HTML only and the user will see it pretty quickly. It won't do anything until the js file has loaded but that's generally ok.

CSS files, unless really really big, usually don't pose a problem as they can fit into the initial congestion window (typically 14.6kB compressed) 

Doing this gives me a 98/100 rating both for mobile and desktop.

The remaining 2% is about 'leveraging browser caching' which doesn't bother me too much. Haven't checked yet what the sms manifest file options may do to this rule.

 

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...