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プラグイン Akismetは商用不可 千葉県の方へ

木更津市きみさらずタワーからの眺めの画像
木更津市きみさらずタワーからの眺め

スパム対策のプラグインAkismet

wordpressで記事を書いているとスパムコメントがとても来ます。コメントを承認するかしないか選択できるので表にはでませんが、管理している側は毎回スパムコメントの処理をします。
そういったスパム対策としてAkismetというプラグインがwordpressにはデフォルトでインストールされています。

Wordpress説明画像

 

このプラグインを有効にすることでスパム対策ができるのですが、Akismetを使用するには商用・非商用などプランを選択することになります。

商用でもBasicを利用していいのか

Akismetのプランは以下のようになっています。

Akismetの画像

 

はい。英語です。なんとなくPlus,Backup,Enterpriseのプランはお金がかかるのがわかります。Basicプランにはnon-commercial(非商用)と書かれています。ですが、月に50,000件のスパム対策をしてくれるようにも書いてあります。

PC REPAIRのこのブログは広告も載せていませんし、このブログから直接商品を販売するということもしていませんが、運営元がPC REPAIRというパソコンサポート事業のブログなので商用なのか非商用なのか。このあたりがあいまいです。

Basicプランは非商用と書いてありますが、月に50,000件のスパム対策を処理してくれるので『非商用向けという意味なのかそれとも非商用しか使用してはいけないのか。どちらなのか。』と考えていました。

画面右下にチャット発見

Basicプランは非商用向けという意味なのか非商用しか使ってはいけないのか、と考えていたら画面右下にチャット画面を発見しました。英語ができるとは言えませんが、あいまいなまま使用するのは嫌なのでチャットで質問してみました。

Akismetの画像

藤城    『こんにちは!商用ブログを持っていてAkismetを使いたいんですが、コメント数が50,000件以下なんです。Basicプランを使っても良いですか?』

スタッフさん 『こんにちは!』

『商用ブログならPlusプランを使用してください。』

藤城    『わかりました。ありがとうございます。』

商用の場合、AkismetのBasicプランはコメント数が50,000件以下でも使用不可です。Plusプランを使いましょう。

スパム対策どうしよう

AkismetのBasicプランが商用不可ということがわかりましたが、Plusプランは$5なのでどうしましょうか。とりあえず管理画面でスパムとしてマークするかゴミ箱に入れていこうかと思います。

WordPress URLが長すぎて困る!パーマリンクを短くする! 千葉県の方へ

佐倉市の七井戸公園の画像
佐倉市の七井戸公園

wordpressのURLが長すぎて困る

wordpress.orgをサーバーに組み込んでこのブログを書いているのですが、初期設定では記事を書くたびに生成されるURLがめちゃくちゃ長くてTwitterに更新を投稿する時に困っていました。URL短縮ツールを使ったりしていたのですが、設定でURLの生成方法を変更できることがわかりました。

パーマリンク設定でURLを短縮できる

wordpress.orgの左側に設定という項目があります。そこをクリックするとパーマリンク設定という項目があるのでクリックします。

Wordpress説明画像

 

パーマリンク設定を開くとURLに表示させる内容を選択できます。初め下の画像の日付と投稿名にチェックが入った状態で、生成されるURLがめちゃくちゃ長かったのでデフォルトに変えました。

Wordpress説明画像

URLが短くなって一安心けど問題発生

パーマリンク設定でURLに表示させる内容を変更したことで、生成されるURLをとても短縮できました。これで140文字までしか入力できないTwitterに入力してもハッシュタグをつけ足す余裕ができました。URL短縮ツールはいらなくなりました。

しかしこの後問題が発生しました。

今まで使っていたURLが使えなくなりました。

WordPressのブログサイトを作り始めたばかりなのですぐに対応できましたが、パーマリンク設定でURLを変更した場合元のURLから新しいURLへ301リダイレクトさせる必要があることがわかりました。
WordPressのプラグインで301リダイレクトできるものがあるようですが、お使いのサーバーで使用可能であれば.htaccessでも301リダイレクトはできます。

今回は301リダイレクトを使うまでもなく対応できました。

PCREPAIRのホームページではPCサイトとスマートフォンサイトの振り分けに.htaccessによる301リダイレクトを使用しています。