Combine images using CSS sprites

[Dh42]

You will have to do this by hand, there is not really a good way to do it programatically. You basically have to make all of the different images into one big image and then write the custom css for them. 

[Dr.Nikos]

Hi everyone

 

I analyzed my site using https://gtmetrix(dot)com/.

 

Under the section "Combine images using CSS sprites" my site ranked D

How can I improve on this?

 

[Dr.Nikos]

Thank you @DH42

 

Sounds like a lot of work. I do not know where to start from.

 

Having an e-commerce site with new products going up and old products going inactive many times a day, is this something worth while doing?

 

Is there a video or a help page link that you can recommend? A module?

[Dh42]

I would not disable old products personally.

 

There is not a module that can handle this, it is something that has to be done by hand actually. Do you have a link to your site, it is generally old themes that have this issue, newer ones do not. 

[Dr.Nikos]

Products that are sold out I generally redirect them to a category page, for SEO purposes.

 

Thank you for the interest. My site is:  dromeasbikes(dot)com    Its a bilingual site

[Dh42]

After looking at your site, I honestly would not worry about doing them. There are only a few that you can actually do and it would be a more time than it is worth thing in my book.

[Dr.Nikos]

That is good news 

 

Avoid CSS @import also ranked with a D. Is this worth while doing?

 

I am trying to increase the speed time.  Tried to decrease the resolution of my pics and also decrease the number of requests to 120 (I think the are still a lot).  Is there anything you can recommend to improve my site?

 

Thanks again

[Prestachamps]

Hi Nikos 

Actually at a closer look, something that could make a significant change especially on Mobile, would be the CSS combined in a single one. At a closer look you have like 6 CSS

• http://dromeasbikes.com/…720ab318ae55349a3648dea3eb04522e_all.css
• http://fonts.googleapis.com/css?family=Lato
• http://dromeasbikes.com/…2860780aae8e70a84fcb5186243a2_screen.css
• http://fonts.googleapis.com/css?family=Lato
• http://dromeasbikes.com/…ules/video_gallery/css/style_fe.css?id=2
• http://dromeasbikes.com/…_gallery/gallery/css/jqvideobox.css?id=2
• http://fonts.googleapis.com/…,600&subset=latin,latin-ext,cyrillic-ext
  
  90% of these are font which can be included inside the global.js. Usually this shows a low quality in the theme. My point is that adding them into the Js, and having a single CSS at the end it's worth investing those 30 minutes. 
  
  LEo 

[Dh42]

Hmm why would you add the fonts into the JS? 

[Dr.Nikos]

I came acroos this link that describes that the css pages should be all combined to the main css.

It should increase site speed

 

https://varvy.com/pagespeed/combine-external-css(dot)html

 

What do you think?

[paulnevinthomas]

In short: CSS Sprites are a means of combining multiple images into a single image file for use on a website, to help with performance.

Sprite may seem like a bit of a misnomer considering that you're create a large image as opposed to working with many small ones, but the history of sprites, dating back to 1975, should help clear things up.

[Prestachamps]

Hmm why would you add the fonts into the JS? 

Hi,

as Heroes usually know, the google font can be and should be loaded using the JavaScript approach, that way the page is rendered faster and the page loadtime is reduced, since the fonts are loaded at the end of the page, after all html is loaded and displayed for the user. By loading asynchronously the fonts, you will not be penalized by google pagespeed for loading blocking resources, since loading the extra fonts should not block the rendering of the page for users.

regards, Leo

[Dh42]

@leo, he is not loading a font with @import it is an early theme version that loads a stylesheet that way. 

[Prestachamps]

hi

In this case, i see 3 Google fonts loaded, which are in fact 2 distinct fonts, because the Lato font is loaded twice. After some small digging, the ...all.css and the ...screen.css is using @import url('//fonts.googleapis.com/css?family=Lato') , wich in fact block rendering.

This font should be taken out from those two CSS files, and the 3rd one, Open Sans, together with Lato should be loaded using the JavaScript $(document).ready approach, so it would be loaded after the page has been loaded.

On this site, there are 2 other CSS files that blocks rendering, they are files of the module video_gallery, that module should be modified to include CSS using $this->context->controller->addCSS(...) in the module's hookHeader function.

 Regards, Leo

Edited April 14, 2016 by [email protected] (see edit history)

[Dh42]

Loading the font on document.ready will cause a layout jump, after the dom is rendered and the font is loaded. 

 

Also concat your fonts, Google Fonts allow for that. It cuts two requests into one. 

 

What version is the site? In the later versions of PrestaShop, the media.php will actually scour the output and remove hard added fonts and enqueue them to the css queue. 

[Himanshubishtt]

Hi, 

This is my site www.cakecious.com

Please give me some insights that how can I specify image dimensions for mobile browsers.

Thanks