Website load and speed analyzer

by warrenm • 9 years ago

226 68 9 years ago

shimon_e3• 9 years ago

I hate how all of these tools complain about google fonts. This looks like Google's page speed tool with a nicer UI.

vortico• 9 years ago

I think all the tools are trying to tell you something. Using fonts is in fact the largest dependency with many websites.

shimon_e3• 9 years ago

I specify only the characters I use in custom fonts. I budget no more than 30kb to fonts when making a website.

These tools complain that Google font's css is only cached for 2 hours. Which is something none of us can control. Even Google's own page speed tool complains about this. I get perfect scores in everything but Google fonts so it sticks out like an eye score.

mattbgates• 9 years ago

http://www.confessionsoftheprofessions.com

It probably blocked you but it's been over 5 minutes... https://www.screencast.com/t/CFkwelblQ

hardwaresofton• 9 years ago

Hey UI point - you might want to set a consistent height for those grid elements in the list -- would do a lot to make the elements more consistently laid out.

It looks like the individual tiles vary in about 2-4 lines for the below-title description text, so I fiddled around for a bit, and it looks like this is just about right:

  .card {
      height: 25em;
  }

Of course, if you're going to set the height of the card you should probably go in and set the heights (in em or percentage) of the children elements, etc.

(just noticed the results page cards are a lot bigger, so probably scope that rule down to only the cards on the landing page)

thegeekpirate6• 9 years ago

I've used http://yellowlab.tools religiously in the past, glad to see more solutions coming about.

Although it is frightening that we need these in the first place, to be honest.

Cenk2• 9 years ago

YellowLab complains about the number of webfonts in my CSS file, which us just stupid - fonts aren’t loaded if they’re not used, so why are they a problem? Because of the three lines of CSS needed to include them?

thegeekpirate6• 9 years ago

I mean, if it's there and not being used, yes, that's a problem.

If we were using a better platform, dead code elimination and tree shaking would have handled those types of issues for us before clients see it.

Like, fuck me, we solved this problem what, 50 years ago? Yet we still haven't solved it? WHY IS THIS STILL AN ISSUE! </rant>

Anyways, it's a problem, yes. A few programming languages wouldn't even allow you to compile equivalent code.

Cthulhu_• 9 years ago

How's that? Frightening I mean. Why do we need profilers in the first place? Git gud scrubs?

thegeekpirate6• 9 years ago

We're not profiling ns/ms differences due to the weird ways that the Intel CPU decides to cache certain instructions due to idiosyncrasies, they're tools that literally spit out "stop using so many large assets so you can cut the load time to under 10 seconds" and "learn how to minify every type of file".

I frequently come across websites with several thousand lines of extraneous CSS/JS code laying around because they've imported multiple libraries (WordPress templates are usually a surefire way to see this). Websites use multiple MB images all over the place.

It's fucking insane. The web leaves everything to be desired from a development target, yet we keep trying to build a palace on a foundation of feces simply because the lipstick is so alluring.

Just as Eternal September ruined discussion on the web, basing the internet on the most poorly designed stack we could come up with has greatly hampered the speed at which we're able to advance humanity using it.

The same thing already happened with operating system development, where we used to have many differing options (with new ones coming out all the time), which for the most part sort of all worked together, but each had a different take on certain technical decisions, which we then gleaned valuable information from. Plan9 was the last well-known experimental OS to be released which actually made waves to operating system development (OpenBSD deserves a lot of credit here as well, as they're constantly thinking outside the box, but mainly in a security-related fashion). RedoxOS is the next OS project I'm peering into from a distance to learn from their decisions.

But I digress, that's why it's scary. The fact that everyone is wasting their lives trying to dress up a pig who only cares about frolicking around in the mud.

Unfortunately, that won't change because popularity dictates attention, and working on little experimental things that could truly revolutionize the world is far too risky for the vast majority to undertake.

Large companies are the only ones able to toy around with experimentation full-time, but the problem you come across is that they're usually going to make whatever they figured out proprietary, so they can make some money off it.

Never going to start a reply on a mobile device ever again, I hope my rambling was coherent enough =b

jklinger410• 9 years ago

Varvy is not new. It used to be feedthebot and has been operating like it is now without any updates for a least 2 years. Maybe longer.

thegeekpirate6• 9 years ago

Ah gotcha, thanks for letting me know.

TheAceOfHearts• 9 years ago

IMO, inlining styles is rarely worth it. Just include a single CSS file in the head and call it a day. There's value in simplicity.

If I'm given the choice, I usually avoid web fonts. Most platform's built-in fonts are usually pretty good and fast. It's fine for a website to look different on various browsers and operating systems.

ShirsenduK10• 9 years ago

When your CSS file gets large. Which is the case in most sites today thanks to frameworks like Bootstrap. Your page will wait for the CSS file to download, process and repaint. Inlining some of the CSS i.e. critical path CSS can give you lighting fast renders.

jameskegel• 9 years ago

Also don't forget to strip your unused classes, which I'm embarrassed to admit, I did not start doing until recently

borplk• 9 years ago

Then you need bandwidth to download the CSS that is embedded in the page.

Where as you if you cache the linked CSS file you only take the hit once but as you navigate around the site each time it'll be loaded from the cache.

blauditore• 9 years ago

Also, inlining CSS prevents its caching, so the first page load may be faster but subsequent ones will suffer from that if the amount of code is fairly large.

abritinthebay3• 9 years ago

Yup. I work with a very large site and our entire CSS is about 25kb after gzip.

It’s a pointless micro-optimization.

ShirsenduK10• 9 years ago

Critical Path CSS is not fairly large, its fairly small in most cases.

mixedbit• 9 years ago

The tool should also check if a page uses HTTP2, because for HTTP2 inlining does not give any benefits.

paulirish• 9 years ago

Not true. Even in h2, the browser will first parse the HTML to discover the `<link rel=stylesheet>` and it'll then go issue that request. In h2 it'll reuse the TCP connection (which is a win), but you've still got to round trip to start receiving the stylesheet response body.

FWIW here's a pretty good analysis that shows even with h2, bundling and inlining still has benefits: https://sgom.es/posts/2017-06-30-ecmascript-module-loading-c...

pmlnr2• 9 years ago

Getting rid of image metadata is _not_ optimization, that is simple information loss. I hate it when speed tests tell m the progressive jpgs are not optimized because they have EXIF; EXIF is part of the image.

ShirsenduK10• 9 years ago

What is the use of metadata of an image while rendering an image on a webpage?

Normal_gaussian• 9 years ago

Its not uncommon to download images from a website in general, however more specifically I know my mother - an avid photographer - uses a plugin to inspect metadata to find how and where a photo was taken.

felicianotech• 9 years ago

The same for when it's on your desktop. To be able to look into the image for additional detail. Such as where it was taken, camera specs, etc.

Beltiras• 9 years ago

Embedding copyright notice is one. I used to work in journalism. It's a real issue.

ShirsenduK10• 9 years ago

WebPageTest offers more actionable insights. Chrome Developer Tools and Google PageSpeed offer almost the same features.

mrb• 9 years ago

It incorrectly reports that browser caching is "Not enabled for third party resources" on my site: http://blog.zorinaq.com

It gives absolutely zero details about why it thinks it's not enabled, and does not say which are the affected "third party resources"... As a matter of fact I only have 1 third party resource (https://fonts.googleapis.com/) and it properly sets Expires and Cache-Control...

dbg31415• 9 years ago

What does this tool do that others haven't already done?

* https://tools.pingdom.com/

* https://developers.google.com/speed/pagespeed/insights/

* https://developer.microsoft.com/en-us/microsoft-edge/tools/s...

* https://observatory.mozilla.org/

* https://securityheaders.io/

* https://search.google.com/test/mobile-friendly

I'm sure there are a lot of others...

d_theorist• 9 years ago

thanks for that list.

janesvilleseo• 9 years ago

On that note, GTMetrix just did a great write up comparing a few https://gtmetrix.com/blog/the-difference-between-gtmetrix-pa...

TekMol• 9 years ago

Seems to be wrong about caching.

Tells me:

    Browser caching not enabled for all resources.

And then gives an example of a file that is delivered with this cache header:

    Cache-Control:max-age=3600

Also it seems to put DNS resolv time into the "Server response time". So if you get "Slow server response time" that might be something that is happening between this service, it's DNS provider and your Nameserver. Then when you try it again, suddenly it's "Fast server response time" because DNS caching took place.

theandrewbailey• 9 years ago

That Cache-Control header specifies one hour. My resources specify a month or two, and the tool doesn't complain about any.

warrenm4• 9 years ago

an hour to cache? That's nothing

Days, weeks, or months are more appropriate 99% of the time for 99% of content

donohoe• 9 years ago

Ok - it works and I get a nice report.

Does this offer anything more than WebPageTest.org, Google Pagespeed, or auditing in Chrome?

ARCarr• 9 years ago

What are you supposed to do about image alt text when the image is purely decorative, like a border?

This complains about alt="".

wbkang• 9 years ago

Some people would say use a div and background image CSS property. Not sure if that's the recommended solution though.

sdoering• 9 years ago

Well - I would try to omit the image at all and use border style properties to do it. This way I would omit an request totally.

But maybe someone with real experience (not some hobbyist when it comes to front end work) should chime in.

morley• 9 years ago

I noticed the site is reporting JS and CSS sizes AFTER gzip, not before. That seems unnecessary. Browsers will download the compressed version, so it's the compressed version that determines the page speed.

thepratt• 9 years ago

Would be good to be able to kickstart the process via a query string, i.e. varvy.com?q=https://my.url

erik_p• 9 years ago

Many of these recommendations are at odds with HTTP/2 recommendations, practices.

Website load and speed analyzer

Related Stories