1

According to GTmetrix, I have 18 static images on the homepage that are not loading via the CDN. I cannot figure out why. I've posted a screenshot of GTMetrix and the Magento backend. Any ideas?

1 Answer 1

3

Because your image-urls are hardcoded in css:

enter image description here

To fix this problem, do the following:

  1. disable css-merging from backend (System -> Configuration -> ADVANCED -> Developer then CSS Settings and set Merge CSS Files to No)
  2. reload your frontend and view your page with developer tools (i.e. F12 in Google Chrome) and find the images mentioned in GTMetrix. (Probably they are all in the same styles.css file located in your skin folder)
  3. Once you got the path to the CSS file(s), modify it so the path is "relative" (i.e. for you probably something like

.red-bar { background:url('../images/red_rptbg.jpg') ... }
/* ".." - these two dots will tell the browser that the image is located one directory below the current one (current = folder where your css file is located); "/images/" again tells the browser to access this folder on the webserver and then there's just your image' name left */

rather than


.red-bar { background:url('http://www.domian.com/skin/frontend/abc/xyz/images/red_rptbg.jpg') ... }`)

  1. NOTE: as you're working with a CDN it might be necessary to purge the cache there after you've modified your css file (also note, the changes mentioned above are meant to be done on your webserver, not in the CDN, as the CDN will just fetch the files (usually on demand, i.e. on first access of a user for a particular source) from the webserver)
10
  • good man, can you tell me fix? sorry I am not proficient coder.
    – st789
    Commented Mar 2, 2018 at 19:01
  • @st789 - see the update in the answer above Commented Mar 2, 2018 at 19:14
  • So something interesting happened. After I unmerged the CSS files (step #1), I was able to go into the specific CSS file for that page and the images were in fact given a relative path. here's a screenshot (i.imgur.com/7k2LWJ2.png). I then ran another gtmetrix test on the page (with the CSS unmerged), it is no longer showing the images as being left out of the CDN, but it is now showing CSS files being left out of the CDN. here's a screenshot (imgur.com/a/QxDqX). Google Dev Tools also shows the image link properly to the CDN (i.imgur.com/3oPWO4Z.jpg). Confused...
    – st789
    Commented Mar 2, 2018 at 19:59
  • @st789 Take a look at the paths, most of them start with "domain.com/js/..." - and your js-path is not in the CDN as per your configuration (i.imgur.com/nGuH0QY.png - see Base JavaScript URL). If you want these resources to be delivered by CDN, you need to set the CDN path there as well. Commented Mar 2, 2018 at 20:08
  • I see. Any idea why just unmerging the CSS files corrected the original issue with the images? Ideally I'd like to leave the Magento CSS Merge feature on.
    – st789
    Commented Mar 2, 2018 at 22:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.