Performance.

[hellachella]

Hi @thomasjbradley

I am doing something wrong. My favicon is taking the longest? I think I've used a deprecated code to link it maybe?

I also have pretty much made my images 0 quality. They are still being ridiculously slow. I've smooshed and resized and compromised quality.

The background image (bw-xl-pic) is only present on the large screen sizes and the image is around 95k so it shouldn't be affecting the tablet and lower breakpoint sizes. Right?

Was it better to use CSS filters than 2 images/opacity as done?

?

Thanks!

[hellachella]

I have worked it over until it is here:

I don't think I can get it smaller without seriously damaging the images.

[thomasjbradley]

• Don't worry about the favicon, it isn't being loaded until after the website is displayed — you can see a blue line up there that shows when the page is rendered.

• Because of the browser's look-ahead loading, all background images will be downloaded regardless of what media query they are in, so the xl image is always being downloaded. Have a look at this website for more details: http://timkadlec.com/2012/04/media-query-asset-downloading-results/

  The solution is probably to use responsive image techniques like <img src="" srcset=""> instead. Tutorials here: http://learn-the-web.algonquindesign.ca/topics/images-for-retina/#image-tag-source-sets

  This would probably work better instead of hiding the <img> tags, because in the link above you'll see that it doesn't work.

• Another option would be to combine the Google Fonts into one <link> tag instead of two, here: https://github.com/hellachella/dsn1675-project-1/blob/gh-pages/index.html#L14-L15 In the Google Fonts interface add them all to the same collection before using them.

[hellachella]

Ok

I have made the images load in time, and I have applied the optimized google font fix that you recommend, however the fonts are still taking ages.

I am having trouble making the srcset work. It isn't displaying anything? I even watched outside tutorials..

@thomasjbradley

[thomasjbradley]

For the srcset, I'd have something like this for your images:

<img  src="images/img-placeholder-240px.jpg" srcset="images/img-placeholder-360px.jpg 360w, images/bw-xl-pic.jpg 960w" alt="">

---

For the fonts, yes, web fonts are extremely slow. If you want to go ahead to 3rd year material, there's a section on advanced performance, specifically two videos on making fonts work faster:

• Sub-setting fonts: http://learn-the-web.algonquindesign.ca/topics/advanced-performance/#sub-set-fonts-with-fontsquirrel
• Delaying font rendering: http://learn-the-web.algonquindesign.ca/topics/advanced-performance/#webfonts-delay-rendering