0

I am using varnish to speed up a customer's website load time. I have a problem with the images on a page. The Images on a page are not shown on the page. here is the chrome output headers when I hit Ctrl+f5:

Request URL:https://DOMAINNAME/wp-content/uploads/2017/12/telegram-768x255.png
Request Method:GET
Status Code:200 OK
Remote Address:IPADDRESS:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Accept-Ranges:bytes
Age:28
Connection:keep-alive
Content-Length:96169
Content-Type:image/png
Date:Sat, 30 Dec 2017 14:38:40 GMT
Last-Modified:Sat, 16 Dec 2017 11:06:23 GMT
Server:Litespeed
Strict-Transport-Security:max-age=31536000
X-Cache:HIT
X-Configured-By:ServerSetup.co
Request Headers
view source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alx-4.0.1
Cache-Control:no-cache
Connection:keep-alive
Cookie:_ga=GA1.2.1062445401.1514382767; _gid=GA1.2.498856688.1514639806
Host:HOSTNAME
Pragma:no-cache
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36

and here's the output when I hit Enter on the address bar:

Request URL:https://DOMAINNAME/wp-content/uploads/2017/12/telegram-768x255.png
Request Method:GET
Status Code:304 Not Modified
Remote Address:IPADDRESS:443
Referrer Policy:no-referrer-when-downgrade
Response Headers
view source
Age:271
Connection:keep-alive
Content-Type:image/png
Date:Sat, 30 Dec 2017 14:42:43 GMT
Last-Modified:Sat, 16 Dec 2017 11:06:23 GMT
Server:Litespeed
Strict-Transport-Security:max-age=31536000
X-Cache:HIT
X-Configured-By:ServerSetup.co
Request Headers
view source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding:gzip, deflate, br
Accept-Language:en-US,en;q=0.9
AlexaToolbar-ALX_NS_PH:AlexaToolbar/alx-4.0.1
Cache-Control:max-age=0
Connection:keep-alive
Cookie:_ga=GA1.2.1062445401.1514382767; _gid=GA1.2.498856688.1514639806
Host:HOSTNAME
If-Modified-Since:Sat, 16 Dec 2017 11:06:23 GMT
Upgrade-Insecure-Requests:1
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36

and here's is the varnishlog for the image url:

varnishlog -g request -q "ReqUrl ~ 'wp-content/uploads/2017/12/telegram-768x255.png'"

*   << Request  >> 870337886 
-   Begin          req 870337885 rxreq
-   Timestamp      Start: 1514645156.766974 0.000000 0.000000
-   Timestamp      Req: 1514645156.766974 0.000000 0.000000
-   ReqStart       192.168.1.106 42860
-   ReqMethod      GET
-   ReqURL         /wp-content/uploads/2017/12/telegram-768x255.png
-   ReqProtocol    HTTP/1.0
-   ReqHeader      X-Real-IP: 192.168.1.104
-   ReqHeader      X-Forwarded-For: 46.225.112.57
-   ReqHeader      X-Forwarded-Proto: https
-   ReqHeader      X-Nginx: on
-   ReqHeader      Host: HOSTNAME
-   ReqHeader      Connection: close
-   ReqHeader      Pragma: no-cache
-   ReqHeader      Cache-Control: no-cache
-   ReqHeader      User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36
-   ReqHeader      Accept: image/webp,image/apng,image/*,*/*;q=0.8
-   ReqHeader      Referer: https://DOMAINNAME/contactus/
-   ReqHeader      Accept-Encoding: gzip, deflate, br
-   ReqHeader      Accept-Language: en-US,en;q=0.9
-   ReqHeader      Cookie: _ga=GA1.2.1062445401.1514382767; _gid=GA1.2.498856688.1514639806; _gat=1
-   ReqUnset       X-Forwarded-For: 46.225.112.57
-   ReqHeader      X-Forwarded-For: 46.225.112.57, 192.168.1.106
-   VCL_call       RECV
-   ReqUnset       Cookie: _ga=GA1.2.1062445401.1514382767; _gid=GA1.2.498856688.1514639806; _gat=1
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqUnset       Accept-Encoding: gzip, deflate, br
-   ReqHeader      Accept-Encoding: gzip
-   ReqUnset       X-Forwarded-For: 46.225.112.57, 192.168.1.106
-   ReqHeader      X-Forwarded-For: 46.225.112.57, 192.168.1.106
-   ReqUnset       Accept-Language: en-US,en;q=0.9
-   ReqUnset       User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36
-   ReqHeader      cookie: 
-   ReqUnset       cookie: 
-   ReqHeader      cookie: 
-   VCL_return     hash
-   VCL_call       HASH
-   VCL_return     lookup
-   Hit            870337573
-   VCL_call       HIT
-   VCL_return     deliver
-   RespProtocol   HTTP/1.1
-   RespStatus     200
-   RespReason     OK
-   RespHeader     Date: Sat, 30 Dec 2017 14:37:35 GMT
-   RespHeader     Server: Apache/2.2.15 (CentOS)
-   RespHeader     Last-Modified: Sat, 16 Dec 2017 11:06:23 GMT
-   RespHeader     Content-Length: 96169
-   RespHeader     Content-Type: image/png
-   RespHeader     X-Varnish: 870337886 870337573
-   RespHeader     Age: 464
-   RespHeader     Via: 1.1 varnish-v4
-   VCL_call       DELIVER
-   RespHeader     X-Cache: HIT
-   RespUnset      X-Varnish: 870337886 870337573
-   RespUnset      Via: 1.1 varnish-v4
-   RespHeader     X-Configured-By: ServerSetup.co
-   RespUnset      Server: Apache/2.2.15 (CentOS)
-   RespHeader     Server: Apache
-   VCL_return     deliver
-   Timestamp      Process: 1514645156.767049 0.000075 0.000075
-   Debug          "RES_MODE 2"
-   RespHeader     Connection: close
-   RespHeader     Accept-Ranges: bytes
-   Timestamp      Resp: 1514645156.767130 0.000156 0.000081
-   Debug          "XXX REF 2"
-   ReqAcct        631 0 631 267 96169 96436
-   End

The problem is that the image is not shown on the page, but it is shown in preview section of the chrome developer panel. Moreover if I open the image in a new tab in browser it is shown properly. Varnish version is 4.0.4. and the web server is Apache 2.2.

Edit: When I load the page through varnish I get the following errors on the console tab (chrome):

(index):1820 Uncaught ReferenceError: tinymce is not defined
    at HTMLDocument.<anonymous> ((index):1820)
    at HTMLDocument.dispatch (jquery.js:3)
    at HTMLDocument.r.handle (jquery.js:3)
    at Object.trigger (jquery.js:3)
    at Object.a.event.trigger (jquery-migrate.min.js:2)
    at HTMLDocument.<anonymous> (jquery.js:3)
    at Function.each (jquery.js:2)
    at a.fn.init.each (jquery.js:2)
    at a.fn.init.trigger (jquery.js:3)
    at HTMLDocument.<anonymous> ((index):1316)

But when I load the page directly from backend server, there is no errors and the images are shown properly!!

Edit: varnish log for 304 Not Modified

*   << Request  >> 885566068 
-   Begin          req 885566067 rxreq
-   Timestamp      Start: 1515309410.697993 0.000000 0.000000
-   Timestamp      Req: 1515309410.697993 0.000000 0.000000
-   ReqStart       192.168.1.106 33782
-   ReqMethod      GET
-   ReqURL         /wp-content/uploads/2017/12/Untitled-1.png
-   ReqProtocol    HTTP/1.0
-   ReqHeader      X-Real-IP: 192.168.1.104
-   ReqHeader      X-Forwarded-For: 46.225.112.57
-   ReqHeader      X-Forwarded-Proto: https
-   ReqHeader      X-Nginx: on
-   ReqHeader      Host: bigtheme.ir
-   ReqHeader      Connection: close
-   ReqHeader      Cache-Control: max-age=0
-   ReqHeader      User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36
-   ReqHeader      Upgrade-Insecure-Requests: 1
-   ReqHeader      Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
-   ReqHeader      Accept-Encoding: gzip, deflate, br
-   ReqHeader      Accept-Language: en-US,en;q=0.9
-   ReqHeader      Cookie: _ga=GA1.2.1062445401.1514382767; _gid=GA1.2.1237154839.1515307013
-   ReqHeader      If-None-Match: "9a2989-38271-560731bc13e20"
-   ReqHeader      If-Modified-Since: Sat, 16 Dec 2017 11:06:26 GMT
-   ReqUnset       X-Forwarded-For: 46.225.112.57
-   ReqHeader      X-Forwarded-For: 46.225.112.57, 192.168.1.106
-   VCL_call       RECV
-   ReqUnset       Cookie: _ga=GA1.2.1062445401.1514382767; _gid=GA1.2.1237154839.1515307013
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqHeader      Cookie: 
-   ReqUnset       Cookie: 
-   ReqUnset       Accept-Encoding: gzip, deflate, br
-   ReqUnset       X-Forwarded-For: 46.225.112.57, 192.168.1.106
-   ReqHeader      X-Forwarded-For: 46.225.112.57, 192.168.1.106
-   ReqUnset       Accept-Language: en-US,en;q=0.9
-   ReqUnset       User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/63.0.3239.84 Chrome/63.0.3239.84 Safari/537.36
-   ReqHeader      cookie: 
-   ReqUnset       cookie: 
-   ReqHeader      cookie: 
-   VCL_return     hash
-   VCL_call       HASH
-   VCL_return     lookup
-   Hit            885027311
-   VCL_call       HIT
-   VCL_return     deliver
-   RespProtocol   HTTP/1.1
-   RespStatus     200
-   RespReason     OK
-   RespHeader     Date: Sun, 07 Jan 2018 07:15:40 GMT
-   RespHeader     Server: Apache/2.2.15 (CentOS)
-   RespHeader     Last-Modified: Sat, 16 Dec 2017 11:06:26 GMT
-   RespHeader     Content-Length: 230001
-   RespHeader     Content-Type: image/png
-   RespHeader     X-Varnish: 885566068 885027311
-   RespHeader     Age: 33
-   RespHeader     Via: 1.1 varnish-v4
-   VCL_call       DELIVER
-   RespHeader     X-Cache: HIT
-   RespUnset      X-Varnish: 885566068 885027311
-   RespUnset      Via: 1.1 varnish-v4
-   RespHeader     X-Configured-By: ServerSetup.co
-   RespUnset      Server: Apache/2.2.15 (CentOS)
-   RespHeader     Server: Litespeed
-   VCL_return     deliver
-   Timestamp      Process: 1515309410.698046 0.000053 0.000053
-   RespProtocol   HTTP/1.1
-   RespStatus     304
-   RespReason     Not Modified
-   RespReason     Not Modified
-   RespUnset      Content-Length: 230001
-   Debug          "RES_MODE 0"
-   RespHeader     Connection: close
-   Timestamp      Resp: 1515309410.698061 0.000068 0.000015
-   Debug          "XXX REF 2"
-   ReqAcct        731 0 731 231 0 231
-   End
Sinai
  • 620
  • 1
  • 14
  • 36

1 Answers1

0

As your console tab shows, the problem is with a HTML document or Javascript (jquery), not with the image itself. Moreover, why isn't your varnishlog showing the second request? What server is returning the "304 Not Modified"? There's something in between Chrome and Varnish. A Chrome plugin?

Gerard H. Pille
  • 2,528
  • 1
  • 13
  • 17
  • Yes you are right. Maybe the problem is with HTML. but the strange thing is that when I load the page without varnish there is no error in console tab! There is a back end server and a varnish server I don't know what server is returning the 304 output (it maybe is back end server).There is nothing (plugin) between varnish and chrome. – Sinai Jan 04 '18 at 20:13
  • Why don't you add the varnishlog for the 304? – Gerard H. Pille Jan 05 '18 at 11:54
  • I find it hard to believe "there is nothing between varnish and chrome", the following headers have not been sent by your browser: `- ReqHeader X-Real-IP: 192.168.1.104 - ReqHeader X-Forwarded-For: 46.225.112.57 - ReqHeader X-Forwarded-Proto: https - ReqHeader X-Nginx: on` – Gerard H. Pille Jan 05 '18 at 11:55
  • Thereis no plugin between chrome and varnish but I have haproxy for load balancing. It only forwards https traffics directly to the cache server and does not do anything more for https traffics. I also use Nginx for SSL termination before passing the traffic to varnish.With this infrastructure if I eliminate varnish everything is OK and the images are shown properly. But if I activate varnish the images are not shown. – Sinai Jan 06 '18 at 08:02
  • I added varnishlog for 304, please take a look at the 2nd code segment in my question. `Status Code:304 Not Modified` – Sinai Jan 06 '18 at 08:04
  • I was just guessing about the chrome plugin. If you have both haproxy and nginx before the varnish, you should look at those, because the "If-Modified-Since" sent by your browser, never reaches Varnish. (PS. I always let haproxy do the SSL terminating) – Gerard H. Pille Jan 06 '18 at 08:46
  • Aha. OK thank you. I will eliminate haproxy and use Nginx in the near future for the new infrastructure. You mean something in haproxy or Nginx bans the "If-Modified-Since" to reach the varnish? – Sinai Jan 06 '18 at 14:01
  • You said "I added varnishlog for 304" but I don't see that in your varnishlog output. What is returning the 304? We only know this: `Server:Litespeed X-Cache:HIT X-Configured-By:ServerSetup.co` – Gerard H. Pille Jan 06 '18 at 17:42
  • Oh yeah you are right. I though I have added varnishlog but it is chrome console. I edited my question and added the varnish log for 304. Thank you. – Sinai Jan 07 '18 at 07:17
  • Then there must be something (javascript?) on your page that cannot handle a 304? Why would TinyMCE be activated for an image? Can we see an example of such a page, or is it for the customers eyes only? – Gerard H. Pille Jan 07 '18 at 11:17
  • Yes you can. But I bypassed the page in varnish. Because if I pass it through varnish the images will not be shown and my customer will get angry :D So, how do you want to see the page Gerard? – Sinai Jan 07 '18 at 20:14