Welcome to WebmasterWorld Guest from 3.234.210.89

Forum Moderators: phranque

Message Too Old, No Replies

Site speed, moving parts of JS and CSS to bottom of page

     
2:08 am on May 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


I'm thinking about mobile users and, yes, I still have some dial-up users.

My current javascript.js is 14,467 bytes (14.5kb). Which isn't huge, I don't think, but still big enough to make the page load a little slower.

Google pushes me to put the file at the bottom of the page, but some functions are used throughout that need to be loaded in advance; specifically, some variables, ajax, and infinite scroll.

I've moved over all of the functions that I could realistically wait to load to a second file, and that file comes to 2.8kb, which makes the original javascript.js 11.7kb. So at the very least, I would need to load 11.7kb at the top, then 2.8kb at the bottom of the page.

What do you guys think, is the savings of 2.8kb enough to justify the additional HTTP connection? Or is a savings of 2.8kb on mobile and dial-up so irrelevant that I've already wasted more time by typing this question than it's worth?

Or, since I'm using jQuery, maybe I should go back through the site and wrap everything in $(function() { });; it would slow down parts of the site a little, but main parts would load faster and it might positively influence Google placement?

Note, the site is compressed, so that 14.5kb is before the compression...

I'm having a similar thought about the CSS stylesheet. It's getting bigger as I keep building (currently 28.8kb, but I'm not done building yet)... would it be smart to have a smaller one just for the homepage, and then load the full one at the bottom of the homepage so that it's cached for the rest of the site?
7:02 am on May 18, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Mar 25, 2018
posts:500
votes: 101


What do you guys think, is the savings of 2.8kb enough to justify the additional HTTP

I don't think so.

would it be smart to have a smaller one just for the homepage, and then load the full one at the bottom of the homepage so that it's cached for the rest of the site?

This is supposing that your visitors are entering your site by its homepage. In my case, nearly no one visit my home page :) They all arrive directly to inner pages.

Thinks you might try/consider:

- if it's not yet the case, make your site use HTTP/2 (which means TLS too),
- try brotli compression instead of GZ,
- "push" your javascript and css ressources, using the PUSH feature of HTTP/2, so that they'll start loading right away (but I don't know if google's page speed is taking this in consideration)

other ideas (things I've thought about myself, but never yet tried), but it depends of your skills in PHP (or other language)

For the first visit of a given person :
- add your css and javascript directly into your page header (no external file) => no rendering blocking , and in all events the first visit requires to load all the code,so you save on connections/packets and profit from the compresison of the whole together.
- populate the cache of the browser by asynchronously load the exernal CSS and JS, once the page is finished loading
- remember that this visitor has seen at least one page
- for the next page he visits, just add the external CSS / JS links, they should be fetched from the browse cache.
7:26 am on May 18, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1205
votes: 120


Thanks for the tips! I'll reply to each one independently:

- if it's not yet the case, make your site use HTTP/2 (which means TLS too),

I did change everything over to HTTPS awhile back, and as far as I can tell it is TLS... I think? I did an online scanner and it says the server supports TLS, anyway. But apparently it doesn't support HTTP/2. We're talking Greek now, though, so I'm not sure what that means.

- try brotli compression instead of GZ,

Looking in to it now, I'm currently using GZ

- "push" your javascript and css ressources, using the PUSH feature of HTTP/2, so that they'll start loading right away (but I don't know if google's page speed is taking this in consideration)

Since I'm not currently supporting HTTP/2 I'm not sure if this is an option with TLS, but I'll do some research tomorrow!

For the first visit of a given person :
- add your css and javascript directly into your page header (no external file) => no rendering blocking , and in all events the first visit requires to load all the code,so you save on connections/packets and profit from the compresison of the whole together.
- populate the cache of the browser by asynchronously load the exernal CSS and JS, once the page is finished loading
- remember that this visitor has seen at least one page
- for the next page he visits, just add the external CSS / JS links, they should be fetched from the browse cache.


Are you thinking something like this?

<?php

if (!isset($_COOKIE['first_time'])) {
include '/home/example/www/styles.css';
include '/home/example/www/javascript.js';

$nocookie = 1;
setcookie('first_time', '1', time() + (86400 * 365), '/');
}

else {
echo <<<EOF
<link rel="stylesheet" href="https://www.example.com/styles.css">
<script src="https://www.example.com/javascript.js"></script>
EOF;
}

// blah blah blah

// Footer
if ($nocookie) {
echo <<<EOF
<link rel="stylesheet" href="https://www.example.com/styles.css" as="style">
<script async src="https://www.example.com/javascript.js"></script>
EOF;
}

?>
7:34 am on May 18, 2018 (gmt 0)

Preferred Member

Top Contributors Of The Month

joined:Mar 25, 2018
posts:500
votes: 101


But apparently it doesn't support HTTP/2. We're talking Greek now, though, so I'm not sure what that means.

HTTP/2 means HTTP v2 , the second major version of the HTTP protocole (in fact it's the third, since v1.1 is considered a major version, in spite of the numbering). HTTP/2 requires TLS (what lot still call SSL) , this is mandatory. BUT being TLS doesn't mean you are in HTTP/2 , apparently, with your host you are "only" in HTTP v1.1 and in that case, your site is slower than without TLS and is much slower than if you were able to use HTTP/2.

Since I'm not currently supporting HTTP/2 I'm not sure if this is an option with TLS, but I'll do some research tomorrow!

PUSH is a feature exclusive to HTTP/2 it allows the server to start sending a file (like a CSS, JS, but anything else) BEFORE the client ever started to request it.

Are you thinking something like this?

WOW ! Yes.

I would make some modifications:

echo "<style>";
include '/home/example/www/styles.css';
echo "</style>";

echo "<script>";
include '/home/example/www/javascript.js';
echo "</script>";


To async load the CSS at the bottom of the page may be :

// make a stylesheet link
var myCSS = document.createElement( "link" );
myCSS.rel = "stylesheet";
myCSS.href = "styles.css";
// insert it at the end of the head in a legacy-friendly manner
document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

[edited by: phranque at 8:20 am (utc) on May 18, 2018]
[edit reason] removed css file url [/edit]