[SOLVED] Can't get passed render blocking css/js issue with Page Speed Insights

Can't get passed render blocking css/js issue with Page Speed Insights

I am trying to optimize my website to be as fast as possible. On Google Page Speed Insights, I have been going through the recommendations, and have gotten a lot done. One thing I can't seem to get passed is the render blocking css/js issue. I have an .htaccess file where I am compressing my css, and javascript with mod_deflate. I read that mod_deflate is the best way to get passed this issue, but I am still getting the render blocking problem with one css file, https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css

I initially though it might be because, since it is a CDN, it was not being compressed with the rest of my files, but I have been reading that a solution to get past the render block css/js is to use CDNs. Is there anyway to fix this without writing a lot of critical inline styles ? Maybe something extra I need to put in my .htaccess file, or a way I can load the CDN ?

.htaccess file

Options +FollowSymLinks
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/javascript "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

</IfModule>

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

#Begin gzip and deflate
<IfModule mod_deflate.c>

# compress text, html, javascript, css, xml:
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE text/html

# DEFLATE NOT COMPATIBLE BROWERS
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

<IfModule mod_headers.c>
Header append Vary User-Agent
</IfModule>

</IfModule>

<IfModule mod_pagespeed_ap24.c>
ModPagespeed on
ModPagespeedInheritVHostConfig on
ModPagespeedEnableFilters rewrite_css,combine_css
ModPagespeedEnableFilters recompress_images
ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
ModPagespeedEnableFilters collapse_whitespace,remove_comments
</IfModule>

Solution

Download "bootstrap.min.css" from CDN and host it on your own server and then call it on the footer of your website and your problem will be solved.

Regards Manoj Soni