The file progress.gif is needed not so frequently, but it's always included in the compiled CSS. This huge (6 kilobytes) file is not the best candidate for inline-image(), IMHO.

CommentFileSizeAuthor
#1 zen-remove_progress_gif-1851290-1.patch105.38 KBmaximpodorov

Comments

maximpodorov’s picture

maximpodorov commented
StatusFileSize
new zen-remove_progress_gif-1851290-1.patch105.38 KB

Here's the actual patch.

maximpodorov’s picture

maximpodorov commented
Status: Active » Needs review
johnalbin’s picture

johnalbin
they/他
Primary language English
Location Taipei, Taiwan
commented
Status: Needs review » Closed (works as designed)

This huge (6 kilobytes) file is not the best candidate for inline-image(), IMHO.

It's actually the best candidate for inline image. If you reference an image in a CSS file, the browser will ALWAYS download it, even if you don't actually use that selector on the given page. That means that it will do 2 HTTP requests (one for the CSS and one for the image). Making it inline means you only need 1 HTTP request since the image is embedded in the CSS.

If you don't think the progress bar will be needed on the front-end of your site (very possible), I'd suggest removing the ruleset from your theme.

maximpodorov’s picture

maximpodorov commented

> the browser will ALWAYS download it, even if you don't actually use that selector on the given page

Are you sure? My experience is if you set a separate background image for a:hover, there is a delay when hovering - the browser makes a new HTTP request.
Maybe mobile browsers behave different...

maximpodorov’s picture

maximpodorov commented

Jonn, thank you for fixing this. At last. :)