Closed Bug 647957 Opened 13 years ago Closed 11 years ago

[meta] Make changes to cbo based on Google's Page Speed output

Categories

(Camino Graveyard :: Product Site, defect)

Product:
Camino Graveyard
Component:
Product Site
Type:
defect
Priority:
Not set
Severity:
normal

Tracking

(Not tracked)

Status:
RESOLVED WONTFIX

People

(Reporter: ss, Assigned: ss)

References

(
URL
)

Details

(Keywords: meta) 

This is a meta bug for a number of bugs I'm going to file on the output of Google's Page Speed utility.

The output is available here: http://pagespeed.googlelabs.com/#url=http_3A_2F_2Fcaminobrowser.org_2F&mobile=false

We'll do as many of these changes as is reasonable.
You could merge print.css with the main stylesheet (add at the bottom)

@media print {
/* stuff here ..... */

}
saves 1 http request.

The rest of the report is much hair pulling, not much benefit.
Is Keep-Alive suddenly working on the server, or is it no longer recommended by GOOG?  It was the big-ticket item the other day when you linked to the report, and now it's not there.

(In reply to comment #1)
> The rest of the report is much hair pulling, not much benefit.

I pretty much agree with this; if we were able to set cache headers for the images on S3, I'd tend to agree setting an expiration on them would be helpful, since they never change.  (Also, why is safari.png not on S3?)
Had a second look at the report (and double checked with the pagespeed extension in Fx 3.6). One suggestion could improve page load time: massaging a little the stylesheets:

* combine both stylesheets together, like this:
  http://dev.l-c-n.com/camino/cbo/screen.css

* link to the stylesheet first, before any linked js file.
  Ideally, as the very first thing in the <head>

* instead of using @import, link directly
  iirc, the way screen.css is loaded now is a hack/filter/_… 
  (hidding for IE5 Mac. That one is long dead, and combining both stylesheets will do the same).

<link rel="stylesheet" media="all" type="text/css" href="/css/screen.css">

* gzipping the stylesheet will buy you much more than minifying (on average, gzip will reduce the file size by 70% on apache 2 - with no adverse effect).

screen.css is currently 12,189bytes, gzipped it should come down to 3746 bytes

in htaccess:
<FilesMatch "\.(css)$"> 
SetOutputFilter DEFLATE
</FilesMatch>

---
check your google analytics settings to load that stuff async - you'll need to swap some code.
---

some images could be further optimised: I've put them on my server:
http://dev.l-c-n.com/camino/cbo/image-optim/

filename + _old is what is currently on cbo
bg-footer_060c87479b017c1a08cefb81ff90f390.jpg is optimised by the pagespeed extension on fx 3.6. I've done better :-) Ok, image-optim / JPEGoptim did the job.
In the low priority section...

  * Inline CSS (print.css is specifically called out) I can't do because we
    need to include print.css with a "media=print" attribute.
  * Optimize order of CSS/JS: done.
  * Google Analytics code swap: done.

I'm considering minifying or gzipping the JavaScript files (and gzipping but not minifying the CSS files) in the future, but I haven't decided yet. The JS files in particular are pretty large and the savings would be beneficial.

I'll upload the newly optimized image from comment 3 later, but it's on my todo list.
(In reply to comment #4)
 
>   * Inline CSS (print.css is specifically called out) I can't do because we
>     need to include print.css with a "media=print" attribute.

Sam, did you have a look at the stylesheet I linked to in comment 3? The media attributes are set inside the stylesheet
@media screen { /* stuff here */ }
@media print { /* stuff here */ }
then in the html
<link rel="stylesheet" media="all" type="text/css" href="/css/screen.css">
(I do it all the time nowadays)

(IE Mac won't see anything of that stylesheet as it does not understand that syntax - if you still worry about /that/ browser)
and you could remove that comment in the html…
'<!--link before import prevents Flash Of Unstyled Content in ie6pc -->'
(In reply to comment #4)
> I'm considering minifying or gzipping the JavaScript files (and gzipping but
> not minifying the CSS files) in the future, but I haven't decided yet. The
> JS files in particular are pretty large and the savings would be beneficial.

I'd prefer to just gzip these, because we edit various bits in the JS often enough, and working with minified anything is a nightmare, let alone minified language-I-don't-understand.(In reply to comment #4)

>   * Optimize order of CSS/JS: done.
>   * Google Analytics code swap: done.

What files do I need to update to make sure I have the changes?  Just header and footer?
(In reply to comment #5)
> Sam, did you have a look at the stylesheet I linked to in comment 3?

I think I missed that, but I'll take a look later.

(In reply to comment #6)
> I'd prefer to just gzip these, because we edit various bits in the JS often
> enough, and working with minified anything is a nightmare, let alone
> minified language-I-don't-understand.

I'd minify and include the original next to it (whatever.js and whatever.orig.js) along with the script to minify, but understood.

> What files do I need to update to make sure I have the changes?  Just header
> and footer?

Yeah, but I'm sure I've made other edits while you were away (small typos and stuff). Better to update everything when you have a chance.
In the spirit of the "shit-ass-websites" meme, philippe and I took a look at the site again (home and start) in the Web Inspector, and we optimized main-back* and bg-header/footer.

The Web Inspector suggests pretty much the same things as Google, so at some point we just need to set aside some time to plow through things.

(In reply to Samuel Sidler (:ss) from comment #4)
>   * Google Analytics code swap: done.

/start/ and /welcome/ are still using the old snippet; we'll need to swap that in on those pages; you seemed to have missed those in comment 4 ;)
Given the current state of the Camino project, we won't be fixing these website bugs. Mass changing our Product Site bugs (search on "camino-website-bugs").

RESOLVED -> WONTFIX.
Status: NEW → RESOLVED
Closed: 11 years ago
Resolution: --- → WONTFIX
You need to log in before you can comment on or make changes to this bug.