植物のミカタ

先日公開されたChromeのバージョン85から、CSSのcontent-visibility:auto;でブラウザにそのコンテンツが画面内にスクロールしてくるまでは描画する必要がないことを伝えられるようになったそうです。CSS content-visibility property - Chrome Platform Statusコンテンツの遅延読み込みにより、表示速度が更に向上するとのことで、当サイトで下記のように対応してみました。※今回の対応が正しいかわかりません。/...

ページの表示速度の改善の一手で画像の遅延読み込みというものがある。遅延読み込みというのはファーストビュー(ページ読み込み時にブラウザに表示される箇所)で出力されている画像以外は、ページの内容をすべて表示してから画像の取得を行うというテクニックです。ページを表示する上で重い画像(動画)ファイルやiframeを遅延させることで、ページ表示が快適になる。この遅延読み込みを利用する方法は、ブログ記事の末尾にある画像の出力箇所で、img src="/site...

【SEO対策】Gueztliで画像のファイルサイズの削減の記事でクライアント(サイトを見る側)とサーバ間でのデータのやりとりで、転送量を減らすと良いという内容を紹介しました。ここで今回紹介するHTMLの圧縮を行うと、更に転送量が減らすことが出来ます。2020年6月時点で、表示速度の高速化や転送量はSEOにあまり影響を与えないとのことですが、これから更にデータのやりとりが増えるであろう中で、転送量を減らす取り組みはエコに繋がるはずなので、HTMLの圧縮はやっておいた方が良いはず。H...

【SEO対策】他のCMS向けの総当り攻撃を避けるまでのSEO関連の記事では、グラフ化や数値化が簡単だったので成果がわかりやすかったが、この記事以降で紹介するSEO対策は、記載する対策によって成果が上がったのかわかりにくいので、あくまでも当サイトで行っていて成果が出てそうだなという認識でお願いします。SEOでよく言われることとして、ユーザ体験(ユーザエクスペリエンス：UX)がある。ユーザエクスペリエンス - WikipediaWebであれば、本当に知りたい内容に到達できたといっ...

今回の対策はSEOに直結するかわからないけれども、サイトを運営していてページの表示速度を下げる要因なので触れておく。とあるサイトを公開した後にアクセスログを確認したら衝撃的なログがあった。そのログというのが、https://example.com/wp-loginhttps://example.com/wp-adminへのアクセスだった。このサイトは世界ナンバーワンのシェアを誇る某CMSを使用していないので関係ないといえば関係ないけれども、アクセスログに上記のパスで埋...

当サイトの記事詳細ページのコンテンツの末尾辺りにTwitterのツイートボタンやFacebookのシェアボタンを設置しているが、最近、公式から配布されているものから自家製のものに変えた。例えば、Twitterで公式から配布されているパーツを貼り付けると、こんな感じで見栄えの良いボタンや様々な便利な機能が付くけれども、このボタンの読み込みにはJavaScriptが使われており、PageSpeed Insightsの評価が下がってしまう。そこで、自作でボタンを作っ...

最近のサイトのデザインをする時にCSSを利用することが大半だろう。※私がHTMLの勉強をはじめた頃はテーブルレイアウトという手法？があった。サイト読み込みの時にCSSをどのタイミングで読み込むか？でPageSpeed Insights - Google DevelopersPageSpeed Insightsのスコアが変わる。私がCSSの勉強をしていた頃は、外部CSSの読み込みは、htmlheadtitlesample/title ...

IPv6というインターネットプロトコルの報告に目を通していたら、サーバとの通信速度が改善されたという内容を見かけた。わかりやすい記事は“表示爆速”阿部寛さんのサイト、IPv6にも対応済みだった　「デザインより質」ネットで話題 - ITmedia NEWSあたりだろうか。IPv6は設定するだけで、通信速度の改善が見られてSEO上効果があるらしく、設定自体が非常に楽なので、やっておいて損はない対策だろう。というわけでIPv6について見てみることにする。Ohmshaの基礎からわかる...

仕事内容 - saitodev.co当サイトの仕事紹介のページにiframeでGoogle Mapsを表示している個所がありますが、このGoogle Mapsの出力によって、PageSpeed Insightsの結果が80点台になっていました。今回の記事ではGoogle Mapsを遅延出力してみたらどうなるのか？を試した結果を紹介します。遅延出力する前に記載されていたコードは、iframe src="https://www.google.com...

SEO対策、データベースチューニングでサイトの表示速度を上げる為にはMySQL等のサーバ型のデータベースを採用して、サーバのメモリが許す限りデータベースにメモリ等の使用を振り分けるという内容を紹介しました。と紹介したものの、当サイトではデータベースはファイル型のSQLiteを使用しています。理由はSOY CMSを利用するであろうユーザのほとんどがMySQLがチューニング出来ないサーバを利用するはずで、SQLiteで高速化が出来なければ意味がないだろうと判断して、SQLiteを使用し続...

当サイトでは行っていないけれども、SEO対策としてのページの表示速度の面で絶対に意識する必要があるものがある。それはMySQL等のデータベースのチューニングで、チューニングするとページの表示速度が向上するのがわかりやすい。何故、当サイトではデータベースのチューニングを行っていないか？というと、SQLite Home Page当サイトを動かしているSOY CMSでは、個人的にブログページはSQLiteで運営することを推奨していて、SQLiteはチューニングが出来ないということが理由...

SEO対策、キャッシュの利用でデータ転送量を削減までの記事では、ブラウザでサイトを見る時のブラウザからリクエストを送り、レスポンスが返ってくる時のデータの最適化を見てきたけれども、今回から新たな視点を加えてのSEO対策を見ていくことにする。Google製のWebサービスであるPageSpeed Insightsでスコアが100になるためには、ラボデータで各項目がオールグリーンになる必要がある。ここで最後まで苦戦したのが、インタラクティブになるまでの時間と初回入...

SEO対策、Gueztliで画像のファイルサイズの削減までの話でブラウザがサーバにリクエストを送信し、サーバからのレスポンスで可能な限りデータ転送量を減らす必要があるという内容を記載した。レスポンスに含まれる画像を含むHTML以外のファイルの大半は一度取得したら再び取得する必要がないものです。再び取得する必要がないファイルは極力二度送らないようにできればデータの転送量を大幅に減らすことが出来る。再送しない、つまりはブラウザ側でキャッシュとして持たせることができれば良いことにな...

SEO対策、HTTP/2でデータの転送の仕組みを変えることで、リクエスト数とデータの転送時間の削減を行った。ここからは個人的な解釈なので間違えているかもしれないけれども、HTTP/2によって一度にデータを送信する量が増えた。しかも増えたのはインターネット上で最も容量を占拠していると言われる画像データになっている。回線はみんなで使うものなので、画像データのサイズが無駄に大きかったとすると、回線を圧迫する事になるので嫌だろう。PageSpeed Insights - Google Dev...

対応の順番を逆に紹介していましたが、前回のSEO対策、データの転送量の削減の為の圧縮で紹介した圧縮アルゴリズムのBrotliは事前にHTTP/2というプロトコルに対応している必要があります。先にHTTP/2について触れておきます。HTTP/2自身のパソコンのブラウザから遠隔にあるサーバに配置しているウェブサイトのデータを取得することを考えます。サーバは最初にブラウザから送られてきたリクエスト、例えばルート直下にあるindex.htmlファイルが欲しいというリクエストに対して、任...

個人事業の開業届けを出してから、当サイトに注力を注ぎ、ほぼお問い合わせのみで事業を切り盛り出来ています。開業してから最も意識していることが当サイトのSEOで、数々の試作を行いました。最近、SEOで行ってきたことを教えてほしいというお問い合わせが数件あるので、良い機会なので行ってきたことを整理してみることにします。先に一番重要なことを挙げておくと、コンテンツの充実は絶対条件で、不器用でも良いから事業主(運営者)の言葉で書き続けることが大事だと思っています。生きた文章こそが人を惹きつけると信...