5 ms·
As someone who just recently worked on reducing page load times these were found to be the main issues 1- Loading large Images(below the fold/hidden) on first
by sarego 6y ago
As someone who just recently worked on reducing page load times these were found to be the main issues
1- Loading large Images(below the fold/hidden) on first load
2- Marketing tags- innumerable and out of control
3- Executing non critical JS before page load
4- Loading noncritical CSS before page load
Overall we managed to get page load times down by 50% on average by taking care of these.
- Moru 6y agoI wish 50% would be enough but some local news pages take 15 seconds after the last modernisation. And that is with ad-blockers...
- Wowfunhappy 6y agoCan someone who understands more about web tech than me please explain why images aren't loaded in progressive order? Assets should be downloaded in the order they appear on the page, so that an image at the bottom of the page never causes an image at the top to load more slowly. I assume there's a reason. I understand the desire to parallelize resources, but if my download speed is maxed out, it's clear what should get priority. I'm also aware that lazy loading exists, but as a user I find this causes content to load too late. I do want the page to preload content, I just wish stuff in my viewport got priority. At minimum, it seems to me there ought to be a way for developers to specify loading order.
- deleted 6y ago[deleted]
- deleted 6y ago[deleted]
- xenospn 6y agoThis is what lazy loading does. It doesn’t actually load images that are “below the fold”. Or at least that’s what it should do. Images should only load once your start scrolling down.
- sarego 6y agoUnderstandable but for most use-cases (if your images are hosted on a reliable CDN and are optimized) lazy load should work fine. Lazy load works based on the distance of the image from the viewport so it may not load too late. Chromium based browsers now natively support lazy-loading.
- dgb23 6y agoThat is actually the case today! But it is an opt-in feature, which is not supported in older browsers. In modern frontend development we are heavily optimizing images now. Lazy loading is one thing, the other is optimizing sizes (based on viewports) and optimizing formats (if possible). This often means you generate (and cache) images on the fly or at build-time, including resizing, cropping, compressing and so on.
- Bnshsysjab 6y agoIs putting all assets into a single png/svg to reduce total requests a dead practice now?
- tbarbugli 6y agoI guess http/2 support on CDN made this a useless (and tedious) optimization
- Polylactic_acid 6y agoThere was also the issue on an ancient version of IE that it could only load a few requests at the same time.
- reaperducer 6y agoIs putting all assets into a single png/svg to reduce total requests a dead practice now? As someone who browses the source of a lot of commercial web sites, I can say it's still dead common. There's been a lot of static about new technologies coming that will make this unnecessary, but that don't help anyone today.
- gcpwnd 6y agoShould be done only if you have to load lots of small images. If you want to render above the fold fast reduceassets there and load them directly.
- j-krieger 6y agoIt is not supported by Safari, too.
- kmlx 6y agoyes, there is already <img loading="lazy" ... /> simply add the property to your html images and the browser will automatically load them when in the viewport (i.e. just the ones you actually see) further details: https://caniuse.com/#feat=loading-lazy-attr https://caniuse.com/#feat=loading-lazy-attr https://html.spec.whatwg.org/multipage/urls-and-fetching.html#lazy-loading-attributes https://html.spec.whatwg.org/multipage/urls-and-fetching.htm...
- Wowfunhappy 6y agoBut then they always seem to not come in until I scroll to them, which is too late and just means I have to wait even more! What they ought to do is download as soon as the network is quiet.
- yoz-y 6y agoI suppose simple order in the HTML document would be a heuristic that works almost always, but due to CSS the order is actually not guaranteed. You need to download images before doing the layout first too as you don’t know the sizes beforehand.
- Something1234 6y agoThat's what the width and height attributes on the img tag are for. They're hints. Things can be redrawn later. Although I think I've been seeing a lot fewer images on the internet lately, but they must be hidden with css.
- yoz-y 6y agoI know. And I wish my static site generator of choice (Hugo) added the tags automatically to the HTML. Would it be possible to download just the headers of images first to get the metadata?
- Something1234 6y agoIt's still a decent amount of overhead to even make the request for those bytes.
- Wowfunhappy 6y agoIt's not just CSS screwing up the order! On my own (simple) sites, I can see all the images I put on a page getting downloaded in parallel—with the end result being that pages with more images at the bottom load more slowly even above the fold.
- cellar_door 6y agoYou can code split React components and create loading tiers. Facebook claims they're doing this with the facebook.com redesign, for example: https://engineering.fb.com/web/facebook-redesign/ https://engineering.fb.com/web/facebook-redesign/
- hajile 6y agoOrder in HTML doesn't necessarily correlate to what a person can actually see (it's also possible to load images using CSS or even JS). You could wait for layout and then load, but that would incur another big penalty (especially on JS-rendered pages).
- Rapzid 6y agoAdd to that a ton of un-cached images will run up against the browser concurrent connection limit(non-HTTP2) and cause queuing.. Now you have latency back in the mix between batches :/