9 ms·
Website load and speed analyzer
- shimon_e 9y agoI hate how all of these tools complain about google fonts. This looks like Google's page speed tool with a nicer UI.
- vortico 9y agoI think all the tools are trying to tell you something. Using fonts is in fact the largest dependency with many websites.
- shimon_e 9y agoI 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 9y agohttp://www.confessionsoftheprofessions.com http://www.confessionsoftheprofessions.com It probably blocked you but it's been over 5 minutes... https://www.screencast.com/t/CFkwelblQ https://www.screencast.com/t/CFkwelblQ
- hardwaresofton 9y agoHey 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)
- thegeekpirate 9y agoI've used http://yellowlab.tools 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.
- Cenk 9y agoYellowLab 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?
- thegeekpirate 9y agoI 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.
- Cenk 9y agoWhat? No, it’s definitely not a problem. If I include all the different weights of a font family in my CSS, but on some pages don’t use the bold weight, for example, how is that a problem? The browser only downloads the fonts that are actually used for exactly this reason.
- thegeekpirate 9y agoWhat I mean is that the CSS should be minified to remove _any_ extraneous rules, and should be done automatically, just as it's done with most compiled binaries. If you're using those font styles later on, but still using the same stylesheet, that's obviously alright, the performance-testing tool would need to be updated in order to spider through all the pages to verify where each one is being used.
- TheAceOfHearts 9y agoIMO, 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.
- ShirsenduK 9y agoWhen 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 9y agoAlso don't forget to strip your unused classes, which I'm embarrassed to admit, I did not start doing until recently
- borplk 9y agoThen 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 9y agoAlso, 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.
- abritinthebay 9y agoYup. I work with a very large site and our entire CSS is about 25kb after gzip. It’s a pointless micro-optimization.
- 9y ago
- pmlnr 9y agoGetting 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.
- ShirsenduK 9y agoWhat is the use of metadata of an image while rendering an image on a webpage?
- Normal_gaussian 9y agoIts 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.
- ShirsenduK 9y agoThat is not the typical use case. As web engineers one of our goals is to make websites faster. Speed is a very important UX. Also unless you have a fast website, people will drop off your site and google won't rank you. No point of having great images with good EXIF data if people never see the image. For photography websites, it does make sense to keep it but in general no point wasting those extra bytes which add upto GBs in wasted bandwidth.
- polote 9y agoRemoving EXIF data won't make your website faster lol. You should find other ways to achieve your goals ;)
- ShirsenduK 9y agoEven when your webpage has over 100s of images? Which is the case for listing pages of e-commerce sites, video sites, social networks etc. As a frontend engineer, I find every way to achieve my goals as every ms matters :).
- ShirsenduK 9y agoWebPageTest offers more actionable insights. Chrome Developer Tools and Google PageSpeed offer almost the same features.
- mrb 9y agoIt incorrectly reports that browser caching is "Not enabled for third party resources" on my site: http://blog.zorinaq.com 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/ https://fonts.googleapis.com/) and it properly sets Expires and Cache-Control...
- dbg31415 9y agoWhat does this tool do that others haven't already done? * https://tools.pingdom.com/ https://tools.pingdom.com/ * https://developers.google.com/speed/pagespeed/insights/ https://developers.google.com/speed/pagespeed/insights/ * https://developer.microsoft.com/en-us/microsoft-edge/tools/staticscan/ https://developer.microsoft.com/en-us/microsoft-edge/tools/s... * https://observatory.mozilla.org/ https://observatory.mozilla.org/ * https://securityheaders.io/ https://securityheaders.io/ * https://search.google.com/test/mobile-friendly https://search.google.com/test/mobile-friendly I'm sure there are a lot of others...
- d_theorist 9y agothanks for that list.
- janesvilleseo 9y agoOn that note, GTMetrix just did a great write up comparing a few https://gtmetrix.com/blog/the-difference-between-gtmetrix-pagespeed-insights-pingdom-tools-and-webpagetest/ https://gtmetrix.com/blog/the-difference-between-gtmetrix-pa...
- TekMol 9y agoSeems 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 9y agoThat Cache-Control header specifies one hour. My resources specify a month or two, and the tool doesn't complain about any.
- warrenm 9y agoan hour to cache? That's nothing Days, weeks, or months are more appropriate 99% of the time for 99% of content
- donohoe 9y agoOk - it works and I get a nice report. Does this offer anything more than WebPageTest.org, Google Pagespeed, or auditing in Chrome?
- ARCarr 9y agoWhat are you supposed to do about image alt text when the image is purely decorative, like a border? This complains about alt="".
- wbkang 9y agoSome people would say use a div and background image CSS property. Not sure if that's the recommended solution though.
- sdoering 9y agoWell - 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.
- amichal 9y agoPer https://www.w3.org/wiki/HTML/Elements/img https://www.w3.org/wiki/HTML/Elements/img > A purely decorative image that doesn't add any information In general, if an image is decorative but isn't especially page-specific, for example an image that forms part of a site-wide design scheme, the image should be specified in the site's CSS, not in the markup of the document. However, a decorative image that isn't discussed by the surrounding text but still has some relevance can be included in a page using the img element. Such images are decorative, but still form part of the content. In these cases, the alt attribute must be present but its value must be the empty string. I have always understood that (and earlier spec incarnations) to mean that <img alt=''> is correct for these cases.
- morley 9y agoI 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 9y agoWould be good to be able to kickstart the process via a query string, i.e. varvy.com?q=https://my.url https://my.url
- deleted 9y ago[deleted]
- erik_p 9y agoMany of these recommendations are at odds with HTTP/2 recommendations, practices.