###前提・実現したいこと
「GTmetrix」でウェブページの速度を計測したところ、PageSpeed ScoreがC(72%)、YSlow Scoreに至ってはE(59%)という成績でした・・・。
まずは、PageSpeedで提示されている項目から、改善を試みたいと考えております。
具体的には、以下3点につき改善したいと考えております。
0. Defer Parsing of JavaScript (GradeF(4/100点))
0. Enable gzip compression (Grade F(7/100点))
0. Leverage browser caching(Grade F(28/100点))
この件につき、質問事項を以下2件にまとめました。
どちらかでも構いませんので、ご教示頂けますとありがたく存じます。
###【質問1】Defer Parsing of JavaScript について
- ホームページの作成にあたっては、”fullpage js”のプラグインを活用しています。現時点でのHTMLは、簡略化すると以下の通りです。
<div id="fullpage"> <div class="section" id="section1"> <iframe src=https://www.youtube.com/embed/videoseries?list=・・・・> ※Youtubeのプレイリストを埋め込んでいるので、「サムネで代替表示」等はできないかと思います・・・。 </div> <div class="section" id="section2"> <iframe src="https://calendar.google.com/calendar/embed・・・> </div> </div>
- 途中のスライドにYoutubeやGoogleカレンダーの埋め込みを行っていますが、どうやらこれを「始めに読み込ませていること(すなわち、スクロール完了後ではない)」が主原因かと思いました。(すみません、的外れかもしれませんが・・・GTmetixから提示された詳細を見ると、これら二つが読み込みをストップさせている主原因のように読めたので)
- 改めて”fullPage js”の配付元を確認したところ、afterload()がこの解決策のように思えました(スクロール完了後に読み込みを行うという意味で。違っていたらこめんなさい・・・)。
しかし、初心者の手前どのように記述すれば良いか分からず、もしご存知でしたらアドバイス頂けると幸いに存じます。
###【質問2】Enable gzip compression、Leverage browser caching について
GTmetrixのサジェスチョンに基づき、これら2つについては.htaccessファイルに以下を記述すべきとのことでしたので、取りあえず以下を記述(コピペ)し、.htaccessファイルにし、サーバーにアップロードしてみました。
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule> ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 2 days" </IfModule> ## EXPIRES CACHING ##
しかし、実際にHPの表示を試みると”Internal Server Error”が表示されてしまいました。
恐らく初歩的なミスだろう・・・と考えておりますが、なにぶんhtaccessについては何も知識がなく、もし解決法等ご存知でしたらご教示頂けますと幸いです。
なおサーバーは、xdomainの「PHP・MySQLサーバー」を使用しております。
以上、どうぞ宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー