CODEWITHSUNDEEP
htmlimage
user2506685
user2506685

Reputation: 13

Improving image load speeds

A website that I'm currently working on has a number of slideshows. The issue is that the page loads and then the slideshow loads a second later. How do I improve loading speeds of the images? The site is hosted on Amazon. The url is http://gatehouse75.com to see what I mean.

Upvotes: 1

Views: 401

Answers (4)

Rowe Morehouse
Rowe Morehouse

Reputation: 4585

1. Follow image file optimization best practices.

2. Use a fast CDN combined with a smart caching strategy.

3. Put your above-the-fold image refs (especially large "hero" images) in an inline stylesheet, immediately inside the <head> tag, in the html element selector, like this:

<head> <style> html { background: url(/hero.jpg) no-repeat -9999px -9999px; } </style>

This will get you the fastest time-to-visible for the images that impact perceived page speed the most.

Upvotes: 0

Mohamad
Mohamad

Reputation: 35359

There are a few ways you can do this:

  1. Optimise image sizes. For example, images used on the front banner are 1920x1610. However, most screens are not that large. Use different sizes based on view port (screen size).

  2. Reduce image sizes by changing compression and/or using a different format.

  3. Preload images when the users visit certain parts of the site. That way when users get to a page with a gallery the images get served from the browser cache.

  4. Finally, you can put a "loading" notice while images load if none of the above suggestions help. This is good for usability.

Upvotes: 1

rdgd
rdgd

Reputation: 1446

Right now the home page slideshow images are scaled to 1349 X 429 for me. I am using a laptop. The actual size of the images on the server is 1920 X 610 (at least the one that I inspected). This means two things: (1)The image served is a larger filesize than need be which takes bandwidth, and (2)that the served image needs to get scaled down which takes client time.

What is the max width for this slideshow? It is a fullscreen slideshow, so I understand why the chose to use the bigger image. Though maybe you can take the original compress and resize in a way that is acceptable?

You can also consider having a loading .gif in place while the content loads.

Also, go through and minify linked files... css, js.

Upvotes: 0

Dunno
Dunno

Reputation: 3684

Convert your jpgs to lower quality and your logo (in png) to gif in grayscale. This should save a lot of space.

Upvotes: 0

Related Questions