先日、Googleの検索アルゴリズムでPageSpeed Insights(Core Web Vitals)の結果を試験的に導入というニュースが流れた。【SEO対策】Core Web Vitalsでも記載した通り、当サイトでもCore Web Vitalsの調査を行っていて、先日までCore Web Vitalsで重要な三要素であるLCP、FIDとCLSはオールグリーンであったが、最近仕様変更があったのか？記事詳細ページで確認してみると、スコアの色がオレン...
とにかく速いブログサイトを目指す
カテゴリー ： SEO/
【SEO対策】Core Web Vitals
PageSpeed Insightsに新たに加えられた指標としてWeb VItalsがある。このWeb Vitalsは今年末か来年のサイトの評価の重要な要因となるらしい。Google Developers Japan: Web Vitals の概要: サイトの健全性を示す重要指標要約すると、ページを読み込む時、HTMLを読み込み、CSSを読み込み、DOMで整形という経てブラウザに表示されるわけだけれども、新たなルールとしてDOMの処理を評価に加えるそうだ。...
【SEO対策】PHPのOPCacheの更新チェックの頻度を下げる
今回の内容は高速化の検証で明らかな差が見られなかったので、あくまで仕組みとして話を進めます。PHPにはOPCacheというコンパイル済みのバイトコードを共有メモリに保存し、PHP がリクエストのたびにスクリプトを読み込み、パースする手間を省くことでパフォーマンスを向上できる機能があります。PHP: はじめに - ManualOPCacheは下記の記事に従って、PHPの環境を構築すれば自動で利用可能になります。さくらのVPSにUbuntu18.04を入れてSOY CMSを動かし...
【SEO対策】content-visibility:auto;でコンテンツの遅延読み込み
先日公開されたChromeのバージョン85から、CSSのcontent-visibility:auto;でブラウザにそのコンテンツが画面内にスクロールしてくるまでは描画する必要がないことを伝えられるようになったそうです。CSS content-visibility property - Chrome Platform Statusコンテンツの遅延読み込みにより、表示速度が更に向上するとのことで、当サイトで下記のように対応してみました。※今回の対応が正しいかわかりません。/...
【SEO対策】Lazy Load
ページの表示速度の改善の一手で画像の遅延読み込みというものがある。遅延読み込みというのはファーストビュー(ページ読み込み時にブラウザに表示される箇所)で出力されている画像以外は、ページの内容をすべて表示してから画像の取得を行うというテクニックです。ページを表示する上で重い画像(動画)ファイルやiframeを遅延させることで、ページ表示が快適になる。この遅延読み込みを利用する方法は、ブログ記事の末尾にある画像の出力箇所で、img src="/site...
【SEO対策】HTMLの圧縮
【SEO対策】Gueztliで画像のファイルサイズの削減の記事でクライアント(サイトを見る側)とサーバ間でのデータのやりとりで、転送量を減らすと良いという内容を紹介しました。ここで今回紹介するHTMLの圧縮を行うと、更に転送量が減らすことが出来ます。2020年6月時点で、表示速度の高速化や転送量はSEOにあまり影響を与えないとのことですが、これから更にデータのやりとりが増えるであろう中で、転送量を減らす取り組みはエコに繋がるはずなので、HTMLの圧縮はやっておいた方が良いはず。H...
【SEO対策】サイトの滞在時間を増やす
【SEO対策】他のCMS向けの総当り攻撃を避けるまでのSEO関連の記事では、グラフ化や数値化が簡単だったので成果がわかりやすかったが、この記事以降で紹介するSEO対策は、記載する対策によって成果が上がったのかわかりにくいので、あくまでも当サイトで行っていて成果が出てそうだなという認識でお願いします。SEOでよく言われることとして、ユーザ体験(ユーザエクスペリエンス：UX)がある。ユーザエクスペリエンス - WikipediaWebであれば、本当に知りたい内容に到達できたといっ...
【SEO対策】他のCMS向けの総当り攻撃を避ける
今回の対策はSEOに直結するかわからないけれども、サイトを運営していてページの表示速度を下げる要因なので触れておく。とあるサイトを公開した後にアクセスログを確認したら衝撃的なログがあった。そのログというのが、https://example.com/wp-loginhttps://example.com/wp-adminへのアクセスだった。このサイトは世界ナンバーワンのシェアを誇る某CMSを使用していないので関係ないといえば関係ないけれども、アクセスログに上記のパスで埋...
【SEO対策】SNS系のボタンを自作する
当サイトの記事詳細ページのコンテンツの末尾辺りにTwitterのツイートボタンやFacebookのシェアボタンを設置しているが、最近、公式から配布されているものから自家製のものに変えた。例えば、Twitterで公式から配布されているパーツを貼り付けると、こんな感じで見栄えの良いボタンや様々な便利な機能が付くけれども、このボタンの読み込みにはJavaScriptが使われており、PageSpeed Insightsの評価が下がってしまう。そこで、自作でボタンを作っ...
【SEO対策】CSSの読み込み方の変更で高速化
最近のサイトのデザインをする時にCSSを利用することが大半だろう。※私がHTMLの勉強をはじめた頃はテーブルレイアウトという手法？があった。サイト読み込みの時にCSSをどのタイミングで読み込むか？でPageSpeed Insights - Google DevelopersPageSpeed Insightsのスコアが変わる。私がCSSの勉強をしていた頃は、外部CSSの読み込みは、htmlheadtitlesample/title ...
【SEO対策】IPv6
IPv6というインターネットプロトコルの報告に目を通していたら、サーバとの通信速度が改善されたという内容を見かけた。わかりやすい記事は“表示爆速”阿部寛さんのサイト、IPv6にも対応済みだった 「デザインより質」ネットで話題 - ITmedia NEWSあたりだろうか。IPv6は設定するだけで、通信速度の改善が見られてSEO上効果があるらしく、設定自体が非常に楽なので、やっておいて損はない対策だろう。というわけでIPv6について見てみることにする。Ohmshaの基礎からわかる...
【SEO対策】Google Mapsの遅延出力
仕事内容 - saitodev.co当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、このGoogle Mapsの出力によって、PageSpeed Insightsの結果が80点台になっていました。今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか？を試した結果を紹介します。遅延出力する前に記載されていたコードは、iframe src="https://www.google.com...
【SEO対策】最終産物のHTMLのキャッシュで高速化
SEO対策、データベースチューニングでサイトの表示速度を上げる為にはMySQL等のサーバ型のデータベースを採用して、サーバのメモリが許す限りデータベースにメモリ等の使用を振り分けるという内容を紹介しました。と紹介したものの、当サイトではデータベースはファイル型のSQLiteを使用しています。理由はSOY CMSを利用するであろうユーザのほとんどがMySQLがチューニング出来ないサーバを利用するはずで、SQLiteで高速化が出来なければ意味がないだろうと判断して、SQLiteを使用し続...
【SEO対策】データベースチューニング
当サイトでは行っていないけれども、SEO対策としてのページの表示速度の面で絶対に意識する必要があるものがある。それはMySQL等のデータベースのチューニングで、チューニングするとページの表示速度が向上するのがわかりやすい。何故、当サイトではデータベースのチューニングを行っていないか？というと、SQLite Home Page当サイトを動かしているSOY CMSでは、個人的にブログページはSQLiteで運営することを推奨していて、SQLiteはチューニングが出来ないということが理由...
【SEO対策】実行環境のバージョンを上げて高速化
SEO対策、キャッシュの利用でデータ転送量を削減までの記事では、ブラウザでサイトを見る時のブラウザからリクエストを送り、レスポンスが返ってくる時のデータの最適化を見てきたけれども、今回から新たな視点を加えてのSEO対策を見ていくことにする。Google製のWebサービスであるPageSpeed Insightsでスコアが100になるためには、ラボデータで各項目がオールグリーンになる必要がある。ここで最後まで苦戦したのが、インタラクティブになるまでの時間と初回入...
【SEO対策】キャッシュの利用でデータ転送量を削減
SEO対策、Gueztliで画像のファイルサイズの削減までの話でブラウザがサーバにリクエストを送信し、サーバからのレスポンスで可能な限りデータ転送量を減らす必要があるという内容を記載した。レスポンスに含まれる画像を含むHTML以外のファイルの大半は一度取得したら再び取得する必要がないものです。再び取得する必要がないファイルは極力二度送らないようにできればデータの転送量を大幅に減らすことが出来る。再送しない、つまりはブラウザ側でキャッシュとして持たせることができれば良いことにな...
【SEO対策】Gueztliで画像のファイルサイズの削減
SEO対策、HTTP/2でデータの転送の仕組みを変えることで、リクエスト数とデータの転送時間の削減を行った。ここからは個人的な解釈なので間違えているかもしれないけれども、HTTP/2によって一度にデータを送信する量が増えた。しかも増えたのはインターネット上で最も容量を占拠していると言われる画像データになっている。回線はみんなで使うものなので、画像データのサイズが無駄に大きかったとすると、回線を圧迫する事になるので嫌だろう。PageSpeed Insights - Google Dev...
【SEO対策】HTTP/2
対応の順番を逆に紹介していましたが、前回のSEO対策、データの転送量の削減の為の圧縮で紹介した圧縮アルゴリズムのBrotliは事前にHTTP/2というプロトコルに対応している必要があります。先にHTTP/2について触れておきます。HTTP/2自身のパソコンのブラウザから遠隔にあるサーバに配置しているウェブサイトのデータを取得することを考えます。サーバは最初にブラウザから送られてきたリクエスト、例えばルート直下にあるindex.htmlファイルが欲しいというリクエストに対して、任...
【SEO対策】データの転送量の削減の為の圧縮
個人事業の開業届けを出してから、当サイトに注力を注ぎ、ほぼお問い合わせのみで事業を切り盛り出来ています。開業してから最も意識していることが当サイトのSEOで、数々の試作を行いました。最近、SEOで行ってきたことを教えてほしいというお問い合わせが数件あるので、良い機会なので行ってきたことを整理してみることにします。先に一番重要なことを挙げておくと、コンテンツの充実は絶対条件で、不器用でも良いから事業主(運営者)の言葉で書き続けることが大事だと思っています。生きた文章こそが人を惹きつけると信...