17
iamavalos
14d

Yeah! Reduced the size of my website from 12.33MB to only 3.22MB by reducing the size of the images and compressing the bigger ones to 50%. Some images were about 7MB with really high resolution (4208 × 2368). It's incredible that the load time was reduced from 52s to 5s, my website was really, really heavy!
Apart from the heavy images, I don't like using too many JavaScript, and thus, my website is now faster than ever.

Before:
https://gtmetrix.com/reports/...
After:
https://gtmetrix.com/reports/...

Comments
  • 4
    Ops! Forgot to add the image.
  • 12
    *only* 3 megabytes! 😅
  • 1
    @irene I won't resize the images to 10x10px with 10% of JPEG quality only to make it smaller. I think 3.22MB is more than enough for my website, since it has a lot of images.
  • 2
    @iamavalos how much is it without non essential images?
  • 0
    @irene Well, I can remove some images, but I still consider them essential. I think some people won't click all the links just to see a simple picture (including me), so that's why I have many images.
  • 2
    Im not a web dev but woudlnt caching those images speed up the load time to instant ?
  • 6
    @Haxk20 Yes, but the client has to get them first so
  • 15
    12MB? Wtf are you hosting? eBay?
  • 7
    Looks like you have some more work to do. I would losslessly compress the images again. There are online services that will do this for you for free.

    I would also look at lazy loading your images so that they get downloaded only when they become visible to improve your initial page load speed
  • 10
    I love the fact that some websites take up as much space as the original DOOM... Glorious isn't it
  • 6
    gtmetrix says you could save another 900 kB just be not rescaling images in the browser, but serving them in proper size, and another 245 kB by optimising them. Just look in the PageSpeed tab.

    Specifying the image dimensions in the HTML would avoid layout jumping during loading.

    Also, by using the revolutionary technology of browser caching, visitors would not need to reload all the static stuff every time.

    Combining CSS into one CSS and JS into one JS would save round trips, especially important on mobile.

    Next would be adding https, and you have a lot of HTML errors in your code, see https://validator.w3.org/ .
  • 5
    > avoid layout jumping during loading.

    One of the mayor things that annoys me on websites !
  • 0
    @lxmcf exactly.
  • 1
    The load times compared to the page size are quite concerning.
  • 8
    You should use THANOS JS 😏
  • 3
    51 requests. Ok...
  • 1
    Btw, am i the only one who thinks that the "use CDN" advice is not a great one?
  • 3
    Btw. thanks dude. You gave me that type of inspiration with your website that I needed since a long time.
  • 1
    @irene for static assets, it can bring a speed boost. The drawbacks are more complex deployment and usually cost of money. I wouldn't do that for a smallish homepage.
  • 1
    @Fast-Nop I mean all your assets are on someone's else servers. And yeah, for something small that's not a good advice.
  • 0
    @irene well ok? It's the static resources that each visitor must download anyway. It's not like you'd be outsourcing the databases. If you want to make sure that nobody tampers with the files on the CDN, you can use CSP with hashes.
  • 2
    I'm in the process of optimizing one of my projects as well. Below is the shit I have to deal with.

    1) Optimizing images
    2) optimizing css and js
    3) caching queries, pages
Your Job Suck?
Get a Better Job
Add Comment