<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>javascriptの削減 | gungiiのなるほどHack&amp;Tips</title>
	<atom:link href="https://gungii.com/tag/javascript%e3%81%ae%e5%89%8a%e6%b8%9b/feed/" rel="self" type="application/rss+xml" />
	<link>https://gungii.com</link>
	<description>「なるほど」と納得できる経験(実例)と知識(手順)を提供します。</description>
	<lastBuildDate>Tue, 23 Jul 2024 07:29:06 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.9.4</generator>

<image>
	<url>https://gungii.com/wp/wp-content/uploads/2022/02/cropped-favicon-32x32.png</url>
	<title>javascriptの削減 | gungiiのなるほどHack&amp;Tips</title>
	<link>https://gungii.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>「使用していないJavaScriptの削除」で、サイトスピードが劇的改善した。</title>
		<link>https://gungii.com/flying-info/</link>
		
		<dc:creator><![CDATA[gungii]]></dc:creator>
		<pubDate>Mon, 13 Sep 2021 01:12:09 +0000</pubDate>
				<category><![CDATA[WordPressのプラグイン]]></category>
		<category><![CDATA[javascriptの削減]]></category>
		<category><![CDATA[べージの表示速度]]></category>
		<category><![CDATA[ルクセリタス]]></category>
		<guid isPermaLink="false">https://gungii.com/?p=12703</guid>

					<description><![CDATA[PageSpeed Insightsは、モバイル、PCそれぞれのWebページの読み込み速度をスコアリングして、改善ポイントを分析してくれるツールです。Googleが提供しており、URLを入力するだけで無料でWebサイトの [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p>PageSpeed Insightsは、モバイル、PCそれぞれのWebページの読み込み速度をスコアリングして、改善ポイントを分析してくれるツールです。Googleが提供しており、URLを入力するだけで無料でWebサイトのページ読み込み速度や改善ポイントが分析されます。PageSpeed Insightsへの対応は検索エンジンの指標に対する最適化でもあるため、SEOに効果があり、Googleも検索順位付け要素にページスピードを組み込んでいると言われています。但し、ページの表示速度はランキング要因の１つに過ぎないので、PageSpeed Insightsの点数が仮に100点でも、1位になるとは限りません。また、PageSpeed Insightsも含めた「パフォーマンス測定ツール」は、ネットワークやサーバー・クライアントの負荷に応じて、分析結果が変動しますので、1回の計測だけでパフォーマンスを評価することはできません。正しく結果を評価するには、何回か計測を行い、その中で最良の点数を使うというのが良いようです。<br>今回、PaeSpeed Insightで表示された「改善できる項目」の内、「使用していないJavaScriptsの削減」について、良いプラグインがありましたので、実際に使ってみて効果がありましたので、ご紹介します。</p>




  <div id="toc" class="toc tnt-number toc-center tnt-number border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">サイトスピードが遅い</a><ol><li><a href="#toc2" tabindex="0">PageSpeed Insightsのスコア</a></li><li><a href="#toc3" tabindex="0">PageSpeed Insightsの「改善できる項目」</a></li></ol></li><li><a href="#toc4" tabindex="0">サイトスピードの改善</a><ol><li><a href="#toc5" tabindex="0">改善策:「適切なサイズの画像」</a></li><li><a href="#toc6" tabindex="0">改善策:「使用していないJavaScriptの削除」</a></li><li><a href="#toc7" tabindex="0">PageSpeed Insightの再計測</a></li><li><a href="#toc8" tabindex="0">サイトのスピード改善の評価</a></li></ol></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">サイトスピードが遅い</span></h2>



<h3 class="wp-block-heading"><span id="toc2">PageSpeed Insightsのスコア</span></h3>



<p>今回、計測したのは、次の環境です。</p>



<ul class="wp-block-list">
<li>WordPress:V5.8</li>



<li>WordPressテーマ:ルクセリタスV3.20.1</li>
</ul>



<h4 class="wp-block-heading">モバイル</h4>



<p>モバイルは、明らかにスコアがアップしています。</p>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="644" height="244" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying01.jpg" alt="" class="wp-image-12705" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying01.jpg 644w, https://gungii.com/wp/wp-content/uploads/2021/09/flying01-500x189.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying01-300x114.jpg 300w" sizes="(max-width: 644px) 100vw, 644px" /></figure>



<h4 class="wp-block-heading">パソコン</h4>



<p>パソコンもアップしています。</p>



<figure class="wp-block-image size-full"><img decoding="async" width="647" height="248" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying02-1.jpg" alt="" class="wp-image-12707" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying02-1.jpg 647w, https://gungii.com/wp/wp-content/uploads/2021/09/flying02-1-500x192.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying02-1-300x115.jpg 300w" sizes="(max-width: 647px) 100vw, 647px" /></figure>



<p>注意:<br>gungii.siteは、まだアドセンス広告を表示していませんので、表示させると大幅に評価は下がると思います。逆に言えば、アドセンスがなければ、100点も可能という事です。</p>



<h3 class="wp-block-heading"><span id="toc3">PageSpeed Insightsの「改善できる項目」</span></h3>



<p>改善できる項目としてトップに挙がっているのが「使用していないJavaScriptの削除」です。詳細を見ると、「recaptcha__ja.js」や、「adsbygoogle.js」とあります。いづれもgoogleに関連するもので、reCAPTCHAやAdSenseを止めてしまえば良いのですが、スパムメールを防ぐ為であり、アドセンス収入確保の為であり、やめる訳にはいきません。</p>



<h4 class="wp-block-heading">モバイル</h4>



<figure class="wp-block-image size-full"><img decoding="async" width="607" height="731" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying03.jpg" alt="" class="wp-image-12708" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying03.jpg 607w, https://gungii.com/wp/wp-content/uploads/2021/09/flying03-500x602.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying03-300x361.jpg 300w" sizes="(max-width: 607px) 100vw, 607px" /></figure>



<h4 class="wp-block-heading">パソコン</h4>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="627" height="861" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying04.jpg" alt="" class="wp-image-12709" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying04.jpg 627w, https://gungii.com/wp/wp-content/uploads/2021/09/flying04-500x687.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying04-300x412.jpg 300w" sizes="(max-width: 627px) 100vw, 627px" /></figure>



<h2 class="wp-block-heading"><span id="toc4">サイトスピードの改善</span></h2>



<p>改善できる項目としてトップに挙がっているのが「使用していないJavaScriptの削除」です。そして次に素人でも取り組めそうなのが「適切なサイズの画像」です。</p>



<h3 class="wp-block-heading"><span id="toc5">改善策:「適切なサイズの画像」</span></h3>



<p>Googleが開発した画像圧縮アプリ「Squoosh」で、画像サイズを削減します。Squooshで削減した画像をアップすることで、さらにWebp(ウェッピー)と言うGoogleが開発した高圧縮率の次世代の静止画フォーマットに変換します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="475" height="473" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying11.jpg" alt="" class="wp-image-12710" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying11.jpg 475w, https://gungii.com/wp/wp-content/uploads/2021/09/flying11-300x299.jpg 300w, https://gungii.com/wp/wp-content/uploads/2021/09/flying11-150x150.jpg 150w, https://gungii.com/wp/wp-content/uploads/2021/09/flying11-100x100.jpg 100w" sizes="(max-width: 475px) 100vw, 475px" /></figure>



<h3 class="wp-block-heading"><span id="toc6">改善策:「使用していないJavaScriptの削除」</span></h3>



<p>こちらは、素人では難しい為、プラグインを使用して削除します。「Flying Scripts by WP Speed Matters」というプラグインをインストールします。<br>ユーザーが何等かの操作(マウスホバーやスクロール等)を起こすまでJavaScriptの実行を遅らせるというプラグインです。そして、ユーザーが何もしなくても指定した時間が経過するとJavaScriptが実行されるので、遅延時間をあまりに伸ばさない限りは、画面表示が崩れるようなことは起こる可能性は低いようです。</p>



<h4 class="wp-block-heading">インストール</h4>



<p>インストールして有効化します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="593" height="445" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying12-1.jpg" alt="" class="wp-image-12712" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying12-1.jpg 593w, https://gungii.com/wp/wp-content/uploads/2021/09/flying12-1-500x375.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying12-1-300x225.jpg 300w" sizes="(max-width: 593px) 100vw, 593px" /></figure>



<h4 class="wp-block-heading">「Flying Scripts by WP Speed Matters」の設定</h4>



<h5 class="wp-block-heading">Flying Scripts」の起動</h5>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="628" height="262" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying13.jpg" alt="" class="wp-image-12713" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying13.jpg 628w, https://gungii.com/wp/wp-content/uploads/2021/09/flying13-500x209.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying13-300x125.jpg 300w" sizes="(max-width: 628px) 100vw, 628px" /></figure>



<h4 class="wp-block-heading">Javascriptの登録</h4>



<p>設定画面が表示されますので、「Include Keywords」欄にJavaScriptを登録します。<br>注意:Pagespeed Insightの「使用していないJavaScript」を登録します。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="541" height="780" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying14.jpg" alt="" class="wp-image-12714" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying14.jpg 541w, https://gungii.com/wp/wp-content/uploads/2021/09/flying14-500x721.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying14-300x433.jpg 300w" sizes="(max-width: 541px) 100vw, 541px" /></figure>



<p>※Timeoutは2秒。何もしないで2秒経過するとJavascriptが稼働します。</p>



<h3 class="wp-block-heading"><span id="toc7">PageSpeed Insightの再計測</span></h3>



<h4 class="wp-block-heading">「適切なサイズの画像」</h4>



<p>再度、計測すると「改善できる項目」から「適切なサイズの画像」はなくなりました。(0.45Sが無くなりました。)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="555" height="132" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying15.jpg" alt="" class="wp-image-12715" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying15.jpg 555w, https://gungii.com/wp/wp-content/uploads/2021/09/flying15-500x119.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying15-300x71.jpg 300w" sizes="(max-width: 555px) 100vw, 555px" /></figure>



<h4 class="wp-block-heading">「使用していないJavaScriptの削除」</h4>



<p>登録したJavaScriptが全て消えたわけでなく、消えていないものもあります。ただ、これは2秒後にはJavaScriptが稼働するため、PageSpeed Insightで計測する時点では稼働している為、消えてないように見えるのかも知れません。このへんのところは、知識がない為、全くわかりません。が、スコアは上がってします。(0.46Sが、0.32S)</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="444" height="487" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying16.jpg" alt="" class="wp-image-12716" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying16.jpg 444w, https://gungii.com/wp/wp-content/uploads/2021/09/flying16-300x329.jpg 300w" sizes="(max-width: 444px) 100vw, 444px" /></figure>



<h3 class="wp-block-heading"><span id="toc8">サイトのスピード改善の評価</span></h3>



<p>サイトのスピードアップ対策は、必要ですが、それぞれの環境によっても異なり、原因は複雑な為、常に同じ結果となることはありません。今回、WordPressのテーマ「ルクセリタス」を使って、「PageSpeed Insight」で表示された゛改善できる項目゛の一部「適切なサイズの画像」については、画像を圧縮して、「使用していないJavaScriptの削減」については、プラグインを使うことで、大きな改善をすることができました。但し、アドセンス広告がない状態なので、アドセンス広告を貼って、どのくらいのスコアとなるか?です。そして、WordPressのテーマ「Cocoon」で同様の対策を行ってみましたが、「ルクセリタス」ほどの大きな改善は見られましたが、以下のような改善となりました。(こちらは、アドセンス広告付きです。)</p>



<p>[ 計測環境 ]</p>



<ul class="wp-block-list">
<li>WordPress:V5.8</li>



<li>WordPressテーマ:CocoonV2.3.5.1</li>
</ul>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="631" height="338" src="https://gungii.com/wp/wp-content/uploads/2021/09/flying17.jpg" alt="" class="wp-image-12717" srcset="https://gungii.com/wp/wp-content/uploads/2021/09/flying17.jpg 631w, https://gungii.com/wp/wp-content/uploads/2021/09/flying17-500x268.jpg 500w, https://gungii.com/wp/wp-content/uploads/2021/09/flying17-300x161.jpg 300w" sizes="(max-width: 631px) 100vw, 631px" /></figure>



<p></p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
