search

Shadowen / shadowen.github.io

Personal page.
http://shadowen.github.io
1 stars 0 forks source link

Optimize loading #13

Closed Shadowen closed 9 years ago

Shadowen commented 9 years ago
LemonPi commented 9 years ago

I think the optimization should be mostly in the landing page. The loading of that page for first-time clickers will include all your site resources (javascript, css) that you share in the layout. What's the purpose of the current one being a picture of your room that pans around?

I don't recommend large images as backgrounds anyways...

Shadowen commented 9 years ago

It was kinda a placeholder because I'm not sure what to use as a front page. The panning one is an experiment with CSS animations. Anyways, the picture seems to load fine on desktops. Maybe I just have a good internet connection o.O I'll think about it.

Also I don't think all the JS/CSS loads on the first page, since it's included on an as-needed basis. Most of the loading time comes from Bootstrap since I load the full version of it. (I can selectively load Bootstrap components if it's a problem).

LemonPi commented 9 years ago

You should take a look at the network diagnostics: image Some alarming numbers there include the 2.2MB transferred (basically your large image, which took 1.96s to load) The landing page also loads jquery, bootstrap, and header.js (which were cached for me this time, so it would take longer for first-time users). One thing I noticed is that your jquery code is purposely not caching bootstrap for some reason: image

Shadowen commented 9 years ago

I know the image(s) is large; this issue is all about compressing the images (which are uncompressed at the moment).

JQuery and Bootstrap need to be loaded for almost everything, so the best I can do is find a better CDN.

Otherwise, I can't do anything about jquery not caching bootstrap.. I'm loading bootstrap directly from the CDN in the HTML file... I'm investigating why JQuery is even involved in the loading process now.

Shadowen commented 9 years ago

I figured out the jQuery caching issue.. I had multiple tags loading the same source file. That's resolved, so pages load about 3x faster now. See dfcc736a2d5b59238ad7c399648801695f003637

LemonPi commented 9 years ago
  1. It's difficult to have crisp looking images that are small in size, what about not having large images :D? Or if those background images are necessary, maybe try asynchronously loading them or have them below the fold (the part of the page that is initially visible). I know Wix (evil) loads most of your images found on your sitemap after you land on the first page in the background
  2. Definitely a good idea
  3. There's not much you can do for caching since it's hosted on Github. The policy is max-age: 600 (10 minutes)
  4. Minifying your JS and CSS won't really make a difference since the file size is TINY anyways. The time from loading them comes from stalls (asking for too many things from the same origin, limit is 6) and waits (roundtrip latency). To get around those you either inline your CSS and JS (I don't recommend it), and use a spritesheet for your images (haven't tried yet)
Shadowen commented 9 years ago

Yea, it all really comes back to large images. I haven't looked at network statistics too much yet though; I'm still thinking about content management. Writing pages by hand is such a pain...