WebPagetest Forums
Need Analyze - Printable Version

+- WebPagetest Forums (https://www.webpagetest.org/forums)
+-- Forum: Web Performance (/forumdisplay.php?fid=3)
+--- Forum: Discuss Test Results (/forumdisplay.php?fid=4)
+--- Thread: Need Analyze (/showthread.php?tid=12865)

Pages: 1 2


Need Analyze - Funkerman88 - 03-19-2014 03:01 PM

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


RE: Need Analyze - SolarisM - 03-20-2014 09:15 PM

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.


RE: Need Analyze - Funkerman88 - 03-21-2014 07:19 PM

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


RE: Need Analyze - SolarisM - 03-21-2014 08:59 PM

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


RE: Need Analyze - robzilla - 03-21-2014 10:49 PM

ImageMagick can do that. See, for example: https://coderwall.com/p/ryzmaa


RE: Need Analyze - Funkerman88 - 03-21-2014 11:30 PM

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 ?


RE: Need Analyze - robzilla - 03-22-2014 02:55 AM

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.


RE: Need Analyze - Funkerman88 - 03-22-2014 04:52 AM

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


RE: Need Analyze - SolarisM - 03-23-2014 03:34 PM

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.


RE: Need Analyze - Funkerman88 - 03-23-2014 04:03 PM

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 )