2017-04-18 54 views
0

我在Google Speed Test Tool中檢查了我的網站。有些網頁的速度慢。如何修復所有未被評爲「好」的分數。我用來測試Url的網站是testmysite.thinkwithgoogle.com,我只是對移動速度「公平」。我正在使用htaccess文件進行URL重定向。Google Speed Test性能問題

注:

1)已經過壓縮使用本網站minifycode.com/html-minifier

2)添加外部CSS樣式在HTML中使用(添加一些樣式,內部)的所有CSS和HTML代碼關鍵路徑css生成器 - jonassebastianohlsson.com/criticalpathcssgenerator

3)已經在.htaccess文件中添加了以下代碼。

<IfModule mod_rewrite.c> 
 
RewriteEngine on 
 
RewriteOptions Inherit 
 
ReWriteCond %{HTTP:accept-encoding} (gzip.*) 
 
ReWriteCond %{REQUEST_FILENAME} !.+\.gz$ 
 
RewriteCond %{REQUEST_FILENAME}.gz -f 
 
RewriteRule (.+) $1.gz [QSA,L] 
 
</IfModule> 
 

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

 
<IfModule mod_deflate.c> 
 
AddOutputFilterByType DEFLATE text/html 
 
AddOutputFilterByType DEFLATE text/css 
 
AddOutputFilterByType DEFLATE text/javascript 
 
AddOutputFilterByType DEFLATE text/xml 
 
AddOutputFilterByType DEFLATE text/plain 
 
AddOutputFilterByType DEFLATE image/x-icon 
 
AddOutputFilterByType DEFLATE image/svg+xml 
 
AddOutputFilterByType DEFLATE application/rss+xml 
 
AddOutputFilterByType DEFLATE application/javascript 
 
AddOutputFilterByType DEFLATE application/x-javascript 
 
AddOutputFilterByType DEFLATE application/xml 
 
AddOutputFilterByType DEFLATE application/xhtml+xml 
 
AddOutputFilterByType DEFLATE application/x-font 
 
AddOutputFilterByType DEFLATE application/x-font-truetype 
 
AddOutputFilterByType DEFLATE application/x-font-ttf 
 
AddOutputFilterByType DEFLATE application/x-font-otf 
 
AddOutputFilterByType DEFLATE application/x-font-opentype 
 
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject 
 
AddOutputFilterByType DEFLATE font/ttf 
 
AddOutputFilterByType DEFLATE font/otf 
 
AddOutputFilterByType DEFLATE font/opentype 
 
# For Olders Browsers Which Can't Handle Compression 
 
BrowserMatch ^Mozilla/4 gzip-only-text/html 
 
BrowserMatch ^Mozilla/4\.0[678] no-gzip 
 
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html 
 
</IfModule> 
 

 

 

 
## EXPIRES CACHING ## 
 
<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/html "access 1 month" 
 
ExpiresByType application/pdf "access 1 month" 
 
ExpiresByType application/javascript "access 1 month" 
 
ExpiresByType application/x-javascript "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> 
 
## EXPIRES CACHING ##

提前感謝您的支持。

screenshot of google speed test result

+0

消除以上摺疊內容中的渲染阻塞js/css是最難的任務之一。沒有簡單的開關可以翻轉來啓用它。這是一個手動過程,您必須瞭解每個資源爲您的網站做了些什麼以及如何對其進行優化。儘管如此,圖像壓縮很容易;有很多網絡服務可以做到這一點(我使用kraken.io)。壓縮註釋是指在apache配置級別上完成的gzip-ing文件,但我無法說明如何做到這一點。 –

回答

1

要獲得更高級的結果,我會建議你去爲Google Audit或也稱爲「Google Lighthouse」的考驗。在測試過程中,您將會看到哪些功能無法正常工作,並且大部分時間也提供了關於如何解決問題的建議。你想達到的是綠色的性能和可訪問性。

Pagespeed before and after

還有一個非常helpful blog entry覆蓋lazyloading using lazysizes JS和why that matters

沒有實際的鏈接到您的網站或來源本身,很難給您直接的反饋和「如何解決」 - 但通過上述審覈,您應該找到自己的方式。