四街道市から配信のブログ WebPで高速化 千葉県の方へ

四街道駅に到着する電車の画像
四街道駅に到着する電車

こんにちは!千葉県四街道市大日を拠点にしているPC REPAIRです!
このブログの高速化がひとまず完了しました。

高速化というとちょっとややこしそうですが、開くのを速くしました。ボタンを押してから開くまで数秒待つの嫌ですよね。

“四街道市から配信のブログ WebPで高速化 千葉県の方へ” の続きを読む

モバイルの読み込み時間の確認ツール Google TestMySite 千葉県の方へ

モバイルの読み込み時間と離脱率の確認ツール

Googleはサイトの読み込み速度を検索ランキングのシグナルに使っております。7月24日にモバイルの速度についての記事が改めて公開されています。スピードツールについてもリンクされていました。この中の1つにTestMySiteがあります。
Page Speed Insightsですとアクセス数が多いサイトでないと速度は表示されません。最適化できているかどうかのみの表示になります。ただ、最適化スコアが高くても実速は遅いという場合もあります。

そのようなときにTestMySiteですとモバイルの速度が測れます。

TestMySiteの画像
使い方は簡単で、ページを開いたらURLを張り付けるだけです。すると計測を開始して結果を表示してくれます。

TestMySiteの結果の画像1 “モバイルの読み込み時間の確認ツール Google TestMySite 千葉県の方へ” の続きを読む

Microsoft edgeがPWA(ServiceWorker)に対応 千葉県の方へ

Microsoft edgeのPWA(ServiceWorker)対応

Webサイトとアプリを融合させるような技術のPWAが話題です。PWAというのはプログレッシブウェブアプリの略称で、大元にServiceWokerという技術が使われています。(ServiceWokerとPWAを分けて説明していきます。)
ServiceWokerはGoogleが先行していてChromeのみ対応しておりましたが、4月にありましたWindows10のApril Update 2018によりMicrosoft edgeもServiceWokerに対応しました。

“Microsoft edgeがPWA(ServiceWorker)に対応 千葉県の方へ” の続きを読む

LighthouseやPageSpeedInsightsのFCPやDCLのスコアの見方 千葉県の方へ

Lighthouseの計測結果はどれくらいがいいのか

前回PageSpeed InsightsのFCPやDCLについて、最適化スコアが94点でも実速の指標であるFCPやDCLがとても低かったということをご紹介させて頂きました。結果としてCSSのインライン化がうまくできておらずFCPやDCLを下げていたのですが、それを改善したら今度は最適化スコアが下がってしまいました。FCPやDCLは速くなったけどさすがに最適化スコア下がりすぎだな……と考え対応を模索していくうちにLighthouseにたどり着きました。FCPやDCLの他にも”様々な指標を調べるように”とGoogleも伝えております
そんなLighthouseを早速Chromeにインストールして計測しました。何度も何度も計測して対策を考えて、また計測して。とやっていくうちにあることに気づきました。
この計測結果、PCの処理能力に依存しているな……と。

“LighthouseやPageSpeedInsightsのFCPやDCLのスコアの見方 千葉県の方へ” の続きを読む

PageSpeed InsightsのFCPやDCLについて 最適化スコアか体感か 千葉県の方へ

PageSpeed Insightsについて見直してみました

PageSpeed Insightsの計測結果の画像

最近、PageSpeed Insightsの内容にFCPとDCLが追加されました。FCPはFirst Contentful Paintの略称でページがユーザーに視覚的に届くまでの時間。DCLはDOM Content Loadedの略称でページのHTMLを解析し終わるまでの時間です。

“PageSpeed InsightsのFCPやDCLについて 最適化スコアか体感か 千葉県の方へ” の続きを読む

PWAとネイティブアプリを比較した時のメリットとデメリット 千葉県の方へ

PWAとネイティブアプリの比較

1年くらい前からPWA(プログレッシブウェブアプリ)という技術の話題を見かけます。数か月前からこのブログもPWAの機能は取り込んでおりまして、ホームボタンに追加するとネイティブアプリのようにスプラッシュ画面から始まり操作できるようになっております。
下の画像が開いたときに表示されるスプラッシュ画面です。ふわっと一瞬スプラッシュ画面が表示されてその後ブログが表示されます。下の画像がPWAをホーム画面に追加してから開いたときのUIです。URLなどは表示されずにネイティブアプリのような見た目です。

“PWAとネイティブアプリを比較した時のメリットとデメリット 千葉県の方へ” の続きを読む

WordPressの高速化 サイトを速くしたい 千葉県の方へ

サイトの表示速度は大切にしています

Wordpressの読み込み速度の説明画像

このブログの読み込み速度です。どの記事もだいたいこれくらいのスピードです。以前WordPressをテーマで速くする TwentySixteenがおすすめという記事を書かせて頂きました。そのときのよりも速度を速くして、現在同じページの速度を測るとパソコンが81でモバイル77です。Googleの読み込み速度テストページを使って測っています。テーマも同じテーマを使用しています。以前との変更点はプラグインです。
GoogleのAMPやFaceBookのインスタント記事にも対応させています。

PCREPAIRのホームページの読み込み速度の説明画像

こちらはPCREPAIRのホームページを測定したものです。ホームページも速度は大切にしています。パソコン95のモバイルが91ですね。
なぜそこまで速さを重視しているのかというと、ページを見て頂いた方が閲覧しやすいようにというだけです。SEO対策のためということよりも、読み込み速度が速いほうが見て頂いた方に良いと思っているだけです。それが結果的にSEOに繋がっているようです。

WordPressで使っているプラグイン

  • Disable Comments
  • EWWW Image Optimizer
  • Magic Inliner
  • WP deferred javaScript
  • WP HTTP Compression
  • Google XML Sitemaps

これに付け加えGoogleのAMPとFaceBookのInstant articlesに対応させるために

  • AMP
  • Facebook Instant Articles & Google AMP Pages by PageFrog

を入れています。8つですね。プラグインを入れることで遅くなることもあるので本当はもっと減らしたいです。

サムネイル画像は省いています

このブログ(TwentySixteen)はデフォルトですと上部に大きくサムネイル画像が表示されますが、読み込み速度を速くするためにPHPのコードを省かせて頂いております。あとCSSも圧縮しています。一度気になってサーバーのWordPressに関連しているjsファイルなど圧縮できるものは全て試そうとしたのですが、途中であまり変わりがないことに気づきやめました。
今回WordPressの読み込み速度を速くしたいという方は多いと思い、この記事を書かせて頂きました。このブログでも何かしらのお役にたてれば良いなと思います。