Page Speed Insights 无法通过渲染阻塞 css/js 问题

Question

我正在努力优化我的网站，使其尽可能快。在 Google Page Speed Insights，我一直在阅读建议，并完成了很多工作。我似乎无法通过的一件事是渲染阻塞 css/js 问题。我有一个 .htaccess 文件，我在其中压缩我的 css 和 javascript 与 mod_deflate。我读到 mod_deflate 是解决这个问题的最佳方法，但我仍然遇到一个 css 文件 https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css

的渲染阻塞问题

我最初认为这可能是因为，因为它是一个 CDN，所以它没有与我的其余文件一起压缩，但我一直在阅读该解决方案以通过渲染块 css/js是使用CDN。有没有办法在不编写大量关键内联样式的情况下解决这个问题？也许我需要在我的 .htaccess 文件中添加一些额外的东西，或者我可以加载 CDN 的方式？

.htaccess 文件

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>

Answer 1

从CDN下载"bootstrap.min.css"并托管在您自己的服务器上，然后在您网站的页脚调用它，您的问题就解决了。

问候马诺杰索尼

Page Speed Insights 无法通过渲染阻塞 css/js 问题

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

css

twitter-bootstrap-3

google-pagespeed

mod-deflate