Jump to content
Dr.Nikos

Combine images using CSS sprites

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. 

Share this post


Link to post
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?

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Hmm why would you add the fonts into the JS? 

Share this post


Link to post
Share on other sites

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.


Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
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 leo@PrestaHeroes.com (see edit history)

Share this post


Link to post
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. 

Share this post


Link to post
Share on other sites

Hi, 

This is my site www.cakecious.com

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

Thanks

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

Cookies ensure the smooth running of our services. Using these, you accept the use of cookies. Learn More