Need Analyze

Web Performance Discuss Test Results
1

Hi, Guys.

I am a QA from Ukraine how likes speed, I am here thanks to Steve Souders and Patrick Meenan =)

Here is what I have got http://www.webpagetest.org/result/140319_ES_4ZF/2/details/

need help for better result in Render time and load time

  • How? - what way to come with ?

P.S We have issues with JS size and CSS size - it is unreasonably large sized files

2

I’d compress your jpg’s a bit more too with something like jpegmini.com. Combine and Defer js using closure compiler and deferred js methods.

3

I found that making an image as Progressive have huge impact, But how make lots of images in lots of folders Progressive, not manually

4

Jpegmini will also process progressive images and keep them progressive - as for automation I’m not certain

5

ImageMagick can do that. See, for example: Use ImageMagick to create optimised and progressive JPGs (Example)

6

Thanks,
what we are trying to do

  • We are Making a Sprite image for a small icons
  • will add lazyload
  • perhaps domain for image
  • Then I would like to try UNCSS to remove all unused CSS rules

We can’t make defer js since we use CMS that puts minified JS where it wants))

What else can we do ?

7

Don’t use a separate domain for a single image, that’s generally not beneficial. You can consider BASE64-encoding the image into your CSS to save an HTTP request, but there are some older browsers which lack support, so you’ll need to carefully weigh the options – and preferably test them. As for the minified JS, perhaps you can look into altering the behavior of the CMS.

8

Bad news,

Sprite image makes visual appearing of SMALL icons slower then if they got loaded one by one in the Header

To the left - Current solution with Images for Search and other two blocks (images) and mini icons in HEADER http://www.webpagetest.org/video/view.php?id=140321_049f1ddc14e5f4b169f53d1f690524664fcb531d to the right solution with Sprite image for icons and Header is fully CSS stylled

As you will see header with single images loads faster (complete view) for a 0.5 second (to the left), then header fully CSS + 1 sprite to the right - that is bad

When we added Lazy load for start page the results became worse, since it still waits before JS loaded, then lazyload JS triggres needed images, really looks BAD(((

see the images Under main banner, for demo http://www.webpagetest.org/video/view.php?id=140321_f753073bdf9bebeb23682fcab0ecfe3055ae5966

9

Your lazy loaded images should only be those below the fold. Sprites should normally save you time as well depending on the individual above the fold images versus the single sprite image size. Maybe you can have two sprites, some website like Amazon have several - one of them being critical above the fold images.

You’ll need to re-assess the components you have in your sprites, then optimize that sprite (png → tinypng.com) and lazy load anything below the fold including most/all js.

You can probably knock off 0.3s by profiling your php using something like xdebug and using caching of parts of the page with APC or a similar cache solution for user data. There still appears to be a lot of image optimization you can do, eg jpegmini reduces your 6.jpg file down from 172kb to 83kb.

Lots more to do.

10

SolarisM,
Thanks for answer, Pretty impressed with tinypng thing))

What I will try to do
1 - compress our sprite - will reduce 63%
2 - compress banner images with jpegmini - will reduce at least 50 %

Issues we have:
1 - this web site has around 900kb of JS - I am pretty sure - half of this JS is not used

Question: is there a tool to check which JS is used in the Solution ?

2 Same goes for CSS
Though I found unCSS plugin for Grunt - but we need to investigate how to work with this guy.

3 The biggest issue - We have like 10+ js files. Our CMS combines and minifies al js in one file, but it always puts the js at the HEAD((

What I thought is to not use this CMS` feature for this, and USE MVC instead? correct
?
I hope it will reduce the first byte time, since it will work faster
and will allow us to use Deffer JS inlined code that will load all.js file on load document )

11

You’re best to get a programmer to go through the site and trim down the js completely, check elance or other places to hire someone to do so and it may be well worth the effort.

There’s bookmarklets to detect above the fold css as well:

12

Hi Guys, I feel like I am making a mistake when combine all js files into one file like Yahoo performance guys say

Now I have a js that is downloaded for 1.8 sec

if I divide into two js I will get 0.9 sec for them
if four = 0.45

1.8 and 0.45 a great difference

could someone help me in practical ? for JS and CSS