SOY CMSでSCSSコンパイラを実装しましたの記事で、SOY CMSで運営しているサイトで直接SCSSを読み込む方法を記載した。SCSSの直接読み込みで何をしたかったのか？を記載すると、Bootstrapで【SEO対策】Core Web Vitalsに記載した内容を手軽に試したかった。今回は練習として、Bootstrapのボタンのコンポーネントの記述のみをピックアップして、ページのHTMLにインラインで挿入するということをしてみる。Bootstrap · 世界で
とにかく速いブログサイトを目指す
カテゴリー ： SEO
せっかく良いコンテンツを設けていても、サイトの最適化をせずにペナルティを受け、訪問者数が減る事は勿体無い。サイトの最適化を行い、訪問者数や滞在時間が増える事に努めよう。
SOY CMSでAVIF変換プラグインを作成しました
表題の通りでSOY CMSでAVIF(AV1 Image File Format)変換プラグインを作成しました。任意のページで、ソースコードを上の行から精査し、JPGやPNGの画像を出力しているIMGタグを見つけたら、AVIF形式の画像ファイルに変換しつつ、HTMLを書き換えます。AVIF - Wikipedia当プラグインはimageavif関数が使用できるPHPのバージョンで使用可能です。PHP: imageavif - Manual今回対応分を含んだパッケージは
SOY CMSでWebP変換プラグインを作成しました
表題の通りでSOY CMSでWebP変換プラグインを作成しました。任意のページで、ソースコードを上の行から精査し、JPGやPNGの画像を出力しているIMGタグを見つけたら、WebP形式の画像ファイルに変換しつつ、HTMLを書き換えます。WebP - Wikipedia当プラグインはimagewebp関数が使用できるPHPのバージョンで使用可能です。PHP: imagewebp - Manual今回対応分を含んだパッケージは下記のサイトからダウンロード出来ます。ht
【SEO対策】PageSpeed Insightsのユーザー補助のスコア100を目指す
GoogleのPageSpeed Insightsで新たにユーザー補助、おすすめの方法とSEOの項目が追加されたので、これらの項目のスコアの向上を目指してみた。今回の対応に関して、事前に【SEO対策】Core Web VitalsとSOY CMSでユーザー補助プラグインを作成しましたの記事で記載した方法を試している。今回対応した内容は、記事タイトルの下にあるカテゴリ名の対応で、PageSpeed Insightsのユーザー補助の項目で背景色と前景色には
SOY CMSでユーザー補助プラグインを作成しました
SOY CMSでユーザー補助プラグインを作成しました。プラグイン名からではわかりにくいですが、ユーザー補助プラグインではimgタグでalt属性の値がなかった場合にファイル名を自動挿入します。alt属性の自動補完で何が嬉しいのか？というと、ウェブページの読み込み時間 - PageSpeed Insightsで新しく追加されたユーザー補助の項目でimgタグのalt属性についての項目が増えました。今までalt属性を気にする事なく記事を投稿し続けてきたサイトで、これからす
SOY CMSのブロックでカスタムフィールドの拡張ポイントの実行設定を追加しました
表題の通りで、SOY CMSのブロックでカスタムフィールドの拡張ポイントの実行設定を追加しました。この記事の投稿時点で設定できるブロックはラベルブロックとプラグインブロックになっています。標準ページに新着記事一覧を表示する - SOY CMSを使ってみようSOY CMSでプラグインブロックを追加してみた他のブロックは要望があれば対応します。今回紹介した機能追加の背景は、SOY CMSで長い間運営しているサイトでは、カスタムフィールドアドバンスド等のプラ
SOY CMSのフロントコントローラで例外処理の大幅な削減
当ブログで利用しているSOY CMSでフロントコントローラ内の例外処理の大幅な見直しを行い、各ページの表示の省力化を行った。【SEO対策】最終産物のHTMLのキャッシュで高速化SOY CMSではPHPのコードでよく見られるtry{//ページの出力に関する処理が延々と続く}catch(Exception $e){//404 notfoundの出力に関する処理}といった処理を大域の例外処理があり、パフォーマンスに大きな影響を与えていた。PHP: 例外(ex
SOY CMSのカスタムフィールドアドバンスドの見直しで表示速度の改善
SOY CMSで運営しているサイトの表示速度を向上させたいという依頼があったので、今まで温めていた改修案を組み込んでみた。まずは表示が遅くなっていたサイトのパターンを整理しておくと、ブロックやブログブロックで一度にたくさんの記事を表示していることが原因であった。スクロールする度にAjaxで新たな記事を取得して出力というのがすぐに思い付くが、CMSの開発をしている者として一度に記事を取得するところの改善はしておきたい。ということで、表示を遅くする要因を挙げてみる事にする
【SEO対策】Google Analyticsのスクリプトをページ読み込み直後にする
先日、Googleの検索アルゴリズムでPageSpeed Insights(Core Web Vitals)の結果を試験的に導入というニュースが流れた。【SEO対策】Core Web Vitalsでも記載した通り、当サイトでもCore Web Vitalsの調査を行っていて、先日までCore Web Vitalsで重要な三要素であるLCP、FIDとCLSはオールグリーンであったが、最近仕様変更があったのか？記事詳細ページで確認してみると、スコアの色がオレン
【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="/
【SEO対策】HTMLの圧縮
【SEO対策】Gueztliで画像のファイルサイズの削減の記事でクライアント(サイトを見る側)とサーバ間でのデータのやりとりで、転送量を減らすと良いという内容を紹介しました。ここで今回紹介するHTMLの圧縮を行うと、更に転送量が減らすことが出来ます。2020年6月時点で、表示速度の高速化や転送量はSEOにあまり影響を与えないとのことですが、これから更にデータのやりとりが増えるであろう中で、転送量を減らす取り組みはエコに繋がるはずなので、HTMLの圧縮はやっておいた方が良いはず。
【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の読み込みは、<html><head>&l
【SEO対策】IPv6
IPv6というインターネットプロトコルの報告に目を通していたら、サーバとの通信速度が改善されたという内容を見かけた。わかりやすい記事は“表示爆速”阿部寛さんのサイト、IPv6にも対応済みだった 「デザインより質」ネットで話題 - ITmedia NEWSあたりだろうか。IPv6は設定するだけで、通信速度の改善が見られてSEO上効果があるらしく、設定自体が非常に楽なので、やっておいて損はない対策だろう。というわけでIPv6について見てみることにする。
【SEO対策】Google Mapsの遅延出力
仕事内容 - saitodev.co当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、このGoogle Mapsの出力によって、PageSpeed Insightsの結果が80点台になっていました。今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか？を試した結果を紹介します。遅延出力する前に記載されていたコードは、<iframe src="https://www.goog
【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 Insig
【SEO対策】HTTP/2
対応の順番を逆に紹介していましたが、前回のSEO対策、データの転送量の削減の為の圧縮で紹介した圧縮アルゴリズムのBrotliは事前にHTTP/2というプロトコルに対応している必要があります。先にHTTP/2について触れておきます。HTTP/2自身のパソコンのブラウザから遠隔にあるサーバに配置しているウェブサイトのデータを取得することを考えます。サーバは最初にブラウザから送られてきたリクエスト、例えばルート直下にあるindex.htmlファイルが欲しいというリクエストに対して、任
【SEO対策】データの転送量の削減の為の圧縮
個人事業の開業届けを出してから、当サイトに注力を注ぎ、ほぼお問い合わせのみで事業を切り盛り出来ています。開業してから最も意識していることが当サイトのSEOで、数々の試作を行いました。最近、SEOで行ってきたことを教えてほしいというお問い合わせが数件あるので、良い機会なので行ってきたことを整理してみることにします。先に一番重要なことを挙げておくと、コンテンツの充実は絶対条件で、不器用でも良いから事業主(運営者)の言葉で書き続けることが大事だと思っています。生きた文章こそが人を惹きつけると信