Images and CSS not rendering after configuring on Cloudflare

[s.swaranjit]

Hi,

I’ve configured few website on Free Cloudflare accout.

And, many times I’m facing issues in rendering images and CSS while browsing websites.

For example, www.simranjitk.com, this website is working perfectly fine on my local computer but when I browse on internet then this website has issues in rendering images and CSS.

On Local Computer

Please suggest a solution of this type of problem.

Thanks in advance.

[DotMrCode]

Hello,

Rocket Loader is not compatible with all JavaScript. You can disable Rocket Loader.
Disable rocket-loader / minify HTML, CSS and JavaScript to optimize.
Your CSS file is returning a 404 error.
You also have JS files also returning 404 errors.
This makes me think you have an optimizing plugin that’s causing the problem.

Yellow Lab Tools - Page Speed audit

GTmetrix Performance Report

[fritexvz]

Could you please check if you have “Flexible SSL” or “Full SSL” option enabled under your SSL dashboard for your domain?

If not related to SSL, could be some redirection or mixed contet.

[s.swaranjit]

I’ve disabled Rocket Loader and auto minify for CSS, JS & HTML.

And, enabled “Full SSL” option but still no success.

BTW, its a normal html website, not using any CMS. Please help!

[sdayman]

The waterfall view from @DotMrCode shows a lot of 404 errors. Are any of those showing up in your server log?

Though when I browse, almost everything loads perfectly. With only the exception of a 404 for:

https://www.simranjitk.com/assets/css/responsive.css+color.css.pagespeed.cc.PULa8o4Br2.css

[s.swaranjit]

Yes @sdayman I saw this line in my website source code from browser but there is no mention of this particular line in my html code.

This is the actual code:-

<!-- CSS FILES -->
<link rel="stylesheet" href="https://www.simranjitk.com/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.simranjitk.com/assets/fonts/iconfonts.css">
<link rel="stylesheet" href="https://www.simranjitk.com/assets/css/plugins.css">
<link rel="stylesheet" href="https://www.simranjitk.com/assets/css/style.css">
<link rel="stylesheet" href="https://www.simranjitk.com/assets/css/responsive.css">
<link rel="stylesheet" href="https://www.simranjitk.com/assets/css/color.css">

[M4rt1n]

This happens if you use the Apache (or Nginx) Module “PageSpeed” from Google which creates combined and compressed and optimized versions of your ressources.
The problem is, they are not saved in your own folders, but are written into PageSpeed folders and used with ReWrite rules to access them.

SO far so good. But if you use Cache Everything or any other ReverseProxy Caching mechanism infron of your page which is also using PageSpeed this can cause trouble as your Cache is not flushing the cache when PageSpeed is clearing/changing its cache.

Thats why in @DotMrCode screenshot just ressources with the string pagespeed in its name are getting 404 errors as PageSpeed already flushed the cache.

There are various options to work around this but none of these are a real solution thats why I would recommend to disable PageSpeed with this:

in your .htaccess

<IfModule pagespeed_module>
    ModPagespeed off
</IfModule>