Jump to content

Combine images using CSS sprites


Dr.Nikos

Recommended Posts

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. 

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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 by [email protected] (see edit history)
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

  • 3 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...