Current time: 11-18-2019, 11:25 AM Hello There, Guest! (LoginRegister)

Post Reply 
 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Need Analyze
03-19-2014, 03:01 PM
Post: #1
Need Analyze
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...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
Find all posts by this user
Quote this message in a reply
03-20-2014, 09:15 PM
Post: #2
RE: Need Analyze
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.
Find all posts by this user
Quote this message in a reply
03-21-2014, 07:19 PM
Post: #3
RE: Need Analyze
I found that making an image as Progressive have huge impact, But how make lots of images in lots of folders Progressive, not manually
Find all posts by this user
Quote this message in a reply
03-21-2014, 08:59 PM
Post: #4
RE: Need Analyze
Jpegmini will also process progressive images and keep them progressive - as for automation I'm not certain
Find all posts by this user
Quote this message in a reply
03-21-2014, 10:49 PM
Post: #5
RE: Need Analyze
ImageMagick can do that. See, for example: https://coderwall.com/p/ryzmaa
Find all posts by this user
Quote this message in a reply
03-21-2014, 11:30 PM
Post: #6
RE: Need Analyze
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 ?
Find all posts by this user
Quote this message in a reply
03-22-2014, 02:55 AM (This post was last modified: 03-22-2014 02:55 AM by robzilla.)
Post: #7
RE: Need Analyze
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.
Find all posts by this user
Quote this message in a reply
03-22-2014, 04:52 AM
Post: #8
RE: Need Analyze
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.ph...664fcb531d 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.ph...3055ae5966
Find all posts by this user
Quote this message in a reply
03-23-2014, 03:34 PM
Post: #9
RE: Need Analyze
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.
Find all posts by this user
Quote this message in a reply
03-23-2014, 04:03 PM
Post: #10
RE: Need Analyze
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 )
Find all posts by this user
Quote this message in a reply
Post Reply 


Forum Jump:


User(s) browsing this thread: 1 Guest(s)