質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

キャッシュ

キャッシュはドキュメントやデータを一時的に保管するもので、アクセス処理時間を短くするために使用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

238閲覧

ホームページの高速化について

yafoo

総合スコア18

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

キャッシュ

キャッシュはドキュメントやデータを一時的に保管するもので、アクセス処理時間を短くするために使用されます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2017/08/07 11:08

###前提・実現したいこと
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サーバー」を使用しております。

以上、どうぞ宜しくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hotta

2017/08/07 22:26

Internal Server Error については、Apache のログに何か出ていませんか?
yafoo

2017/08/08 05:35

すみません、よくよく見ていたらxdomainサーバーに制限がかかっており、これが原因だったようです(諦めます)。1点目の質問について、もし分かればご教示頂けるとありがたいです。
guest

回答1

0

自己解決

すみません、自己解決しました・・・

質問1はプラグインが明確な解決策を示していて、data-srcとすることで解決しました。
質問2はサーバー上の問題でしたので、また出直します・・・

どうぞ宜しくお願い致します。

投稿2017/08/08 09:43

yafoo

総合スコア18

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問