Tacyの技術ブログ

2022年1月26日水曜日

Bloggerのチューニング、レンダリングを妨げるリソースの除外

PageSpeed Insights で分析したところ、改善点が出てきたので対策をしていきたいと思います。

どうやら、Webページ表示時に、

https://www.blogger.com/static/v1/widgets/1529571102-css_bundle_v2.css
https://www.blogger.com/static/v1/widgets/2726946046-widget_css_mobile_2_bundle.css

それぞれWeb画面用とモバイル用です。
このようにcssを自動で読み込んでしまっているのが問題のようです。

<link href='https://www.blogger.com/static/v1/widgets/2726946046-widget_css_mobile_2_bundle.css' rel='stylesheet' type='text/css'/>

この点を直していきたいと思います。

暗黙的な読み込み

「このcssが挿入される原因は何だろう？」とレイアウトファイルを除いても、こんなcssは無いんですよね。。。

どうやらレイアウトに記載せずとも暗黙的に読み込んで来るファイルのようです。

厄介です。

しかし、HTMLソースを解析すると、どうやら「headearタグの直下」に挿入するロジックになっているようです。

なので、headerタグを何とかする方向で対応していきたいと思います。

headerタグを入れ替え

カラクリとしましては、

<head>
ソース
</head>

headタグのこの構造が悪さをしているわけです。

そこで、このheadタグを以下のように変えてしまいます。

<head>
</head><!--<head/>

カッコをエスケープしてしまうことで構文解析から逃れてしまう。ただし、それだけだと構文解析エラーになってしまうので、本来のheadタグはコメントアウト状態でセット。

荒業です。(；´^ω^`)

元々のソースをインラインで記述

ただし、cssの読み込みを消しただけだとブログ全体がぶっ壊れてしまいますから、元々のcssをインラインで書き直す必要があります。

cssはパソコン用とモバイル用で別物ですから、

<b:if cond='data:blog.isMobile'>
<style type='text/css'>
   https://www.blogger.com/static/v1/widgets/2726946046-widget_css_mobile_2_bundle.cssの中身
</style>
<b:else/>
<style type='text/css'>
   https://www.blogger.com/static/v1/widgets/1529571102-css_bundle_v2.cssの中身
</style>
</b:if>

このようにBloggerタグを使って分岐させて下さい。

これでcssのインライン化完了です。

終わりに

さて、これでスピードアップしたはず。PageSpeed Insightsを再実行します。

よっしゃ、大成功ですね。

2022年1月13日木曜日

PageSpeed Insights でページの表示速度をチェック（SEO対策）

引き続きSEO対策です。

SEOで上位に表示され易くなる要素の一つに「ページの表示速度」があります。
そもそもサーバが重いとか、サイトの中で重いJSが動いちゃってるとか、そういうのがあるとSEO対策において不利なわけです。

そこで、ページの表示が遅くなる要素が無いかチェックしてみましょう。

PageSpeed Insightsでチェック

ページの表示速度確認で便利なのがこちら、「PageSpeed Insights」です。

PageSpeed Insights

使い方はシンプルで、単純にURLを投入すればＯＫ。

分析してみると。。。

表示速度の点数が100点満点で表示されますね。

これによると、う～ん。
パソコンの表示は問答無用の100点なんですが、スマホの表示がちょっと遅いようです。

遅い原因

原因も評価結果に表示されているので便利です。

これによると、使ってないJavaScriptが入っちゃってるとか、スタイルシートを外部から読み込むのが遅いとか、概ね意味が分かる表示になっています。

これらを参考にブログを改造していくわけですね。

一個一個よく見ていけば改善方法も分かってくるでしょう。

終わりに

引き続きSEO対策を頑張っていきます。

2022年1月12日水曜日

Bloggerの記事名をタイトルの先頭にする（SEO対策）

アクセス数があった方がモチベーションに繋がりますからね。検索エンジンで来てくれる人が増えるようにSEO(Search Engine Optimization)対策を行いたいと思います。(´^ω^`)

検索エンジンはページタイトルの頭を読む

今回行うのは、Webページのタイトルの工夫です。

検索エンジンは、タイトルの頭の方に書かれている言葉をより強いキーワードと認識してくれます。

この記事のタイトルは「Bloggerの記事名をタイトルの先頭にする」ですから、そのままだとこういうページタイトルになります。

<title>Tacyの技術ブログ: Bloggerの記事名をタイトルの先頭にする</title>

この場合、「Tacy」をキーワードに検索するとヒット率が高いですが、「Blogger 記事名タイトル」で検索するとヒット率が低い。

しかし、普通に考えて「Tacy」なんてキーワードで検索するのは、エゴサーチしているこのTacy自身以外に誰もいないでしょう。(；´^ω^`)

従って、ブログ名がタイトルの頭に来てしまっているBloggerの初期状態の設定だとSEO的に不利なわけです。

そこで、タイトルの出力を逆転させたいと思います。

初期状態

Bloggerの初期設定だと、タイトルはこうなっています。

<title><data:blog.pageTitle/></title>

「ブログタイトル：記事タイトル」になるのは、「<data:blog.pageTitle/>」というタグで丸ごとセットになっちゃってるわけですね。

このタグ自体を加工することは出来ませんので、違うタグを使う必要があります。

改良後

一方、「記事タイトル：ブログタイトル」になるよう改善を加えた書き方はこうなります。

    <b:if cond='data:blog.pageName == ""'>
       <title><data:blog.pageTitle/></title>
    <b:else/>
       <title><data:blog.pageName/>|<data:blog.title/></title>
    </b:if>

説明しますと、pageNameが空白の場合、つまりページのトップアドレス「https://www.tashi-neko.net/」を表示した場合は、記事名自体が存在しませんので、現状のままとするしか無い。

それ以外、つまり記事個別のURLを表示した場合は、「<data:blog.pageName/>」「<data:blog.title/>」とすることで、記事名とブログタイトルそれぞれのタグを使用することで任意に出力を変えられるわけです。

レイアウトXMLの書き方さえ分かれば簡単な原理ですね。

終わりに

引き続きSEO対策も頑張っていきたいと思います。

2022年1月9日日曜日

Blogger：モバイル画面の設定が反映されない

くだらないことでトラブっていたのでメモ。(；´^ω^`)

パソコンからの見栄えはそこそこ良くなってきたのですが、

スマホからの見栄えが全くダメ。(´×ω×`)

と言うか、編集しても設定が反映されないんですよ。

一体どうしたのかと思ったら、テーマ設定の問題でした。

これで「モバイル」にチェックをつけているから良いかと思ってたらそうじゃなくて、「モバイルのテーマの選択」が必要だったんです。

テーマをカスタムにしなければいけない。

これを見落としててエラく苦労しましたが、お陰で何とかイメージどおりになってきました。

こういう落とし穴にハマっちゃうと大変ですね。(；´^ω^`)

pretty練習

ソースコード貼り付けの練習中

https://github.com/googlearchive/code-prettify

https://rawgit.com/google/code-prettify/master/styles/index.html

https://github.com/googlearchive/code-prettify/blob/master/docs/getting_started.md

class Voila {
public:
  // Voila
  static const string VOILA = "Voila";

  // will not interfere with embedded tags.
}

code-prettify変換支援ツール

技術ブログ執筆者の支援用。
ソース張り付けライブラリ「code-prettify」特化型のテキスト変換ツールです。

変換設定

行数を表示する

codeタグをつける

対象言語：一つ選択して下さい

変換対象ソース

変換結果：コピペして自身のブログに張って下さい。

プレビュー

ここに結果が表示されます

2022年1月8日土曜日

Blogger：ナビバーを消す

さて、ブログのカスタマイズ。最初は手始めに、ナビバーを消したいと思います。

ブログのヘッダー部分に付いている青いヤツですね。

レイアウトから消す

最初は、Bloggerのレイアウトデザイン画面から消すことを狙ってみましょう。

「Navbar」がありますね。ここから「編集」をクリックします。

やった。「オフ」がありました。これで消えるか？(´^ω^`)

レイアウトでは完全には消えない

やった、消えた～！！

と思ったんですが、あれ？？？

何か画面上部の余白が多いような……。

ちょっとデバッグしてみると……。

バカヤロ～。
見えないだけで残っとるやないか！！

だから必要無い余白が表示されちゃうんだな。

Webのデザインは余白をどれくらい取るかというのも重要だから、こんな無駄な出力を残しておくわけにはいきません。

完全消去していきましょう。

テンプレートから削除

ナビバーを完全削除するには、テンプレートXMLから該当ソースを抹消することになります。

エディターを開いて、「navbar」で検索すると、すぐに見つかりました。

このnavbarというsectionがあるから画面に出てくるわけですね。
sectionを丸ごと削除しちゃいます。

やりました。これで無駄な余白が消えてスッキリです。

終わりに

こんな風に、Blogger標準のツールでは出来ないことも、直接XMLを書き換えていけば、かなり自由にカスタマイズできるわけですね。

引き続き頑張っていきます。

登録: 投稿 (Atom)