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タグを以下のように変えてしまいます。

  • &lt;head&gt;
  • &lt;/head&gt;&lt;!--<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」です。

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


分析してみると。。。


表示速度の点数が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」特化型のテキスト変換ツールです。

変換設定


変換対象ソース



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


プレビュー

ここに結果が表示されます
2022年1月8日土曜日

Blogger:ナビバーを消す

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

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


レイアウトから消す

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

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


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

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

やった、消えた~!!


と思ったんですが、あれ???
何か画面上部の余白が多いような……。
ちょっとデバッグしてみると……。


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

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

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

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

テンプレートから削除

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

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


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


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


終わりに

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

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

Blogger:HTML編集方法

 さ~て、早く本編を始められるよう、ガンガンBloggerを構築していきましょう。

まず、現時点でのこのブログの見栄えですが。


ほとんど初期状態だから、何かイマイチなんですよね。

文字サイズももっと大きい方が見易いし、ウィンドウサイズを小さくすると見切れちゃうし……。
もうちょっと何とかならんもんですかね?

そこで気合入れてカスタマイズしていきましょう。


デザインツールは機能不足

最初に言っておきますが、ここで言う「カスタマイズ」とは、Bloggerに備わっているデザインツールを使うことではありません。

Bloggerにはこのように、ブログのデザインをカスタマイズするデザインツールが備わっていますが、ハッキリ言って出来る事が極めて少ないです。

これで拘りを持った愛用のデザインを構築することは不可能と言い切って良いでしょう。

しかし、幸いなことに、このTacyはプログラマーです。

テンプレートXMLを手作業で書き換えることで無限のカスタマイズをしていきたいと思います。

プログラマーで良かった。(´^ω^`)


HTML編集

テンプレートXMLの編集は、「テーマ⇒カスタマイズ⇒HTMLを編集」から進むことが出来ます。


「HTMLを編集」をクリックすると、


こんな様に思いっきりプログラミングチックな画面に進みます。プログラマーでなければ全く意味不明でしょう。(;´^ω^`)

これの構成を見切って、変えたい部分を改造していくことでブログをカスタマイズしていくわけですね。


Blogger ヘルプ

このテンプレートXML、初期状態で2000行を越えていますが。。。

しかし、出力されている画面と突合することでカスタマイズしたい箇所に影響を与えている部分のソースを特定し、そこを書き換える、と言うやり方なら可能でしょう。

また、テンプレートXMLにはBlogger特有のタグが定義されている部分もありまして、ループとかif文とかの表現も可能になっています。


これらにつきましては、公式のBloggerヘルプにドキュメントが載っておりまして、



これらを参考にしながら手探りで改造していく、という進め方をしていくことになります。


終わりに

引き続きBloggerの構築を進めていきます。

シリーズ:Blogger管理

 さ~て、さっそく技術ブログをやっていくぞ~。

と、その前に。
執筆環境であるこのブログの見栄えが……。

本ブログはGoogle Bloggerで展開しているのですが、初期状態だとちょっと色々と気に入らんのですよ。

せっかく自分のブログを持つのですから、極力、自分の好みに合うようカスタマイズしていきたいですよね。
って言うか、それをやらないと、そもそものモチベーションが上がらん!!

と言うわけで、連載シリーズの最初はBlogger自体のカスタマイズ方法のガイダンスとなります。

宜しくお願いします。(´^ω^`)

ご挨拶

こんにちわ。IT系エンジニアのTacyです。

1982年生まれで、現在39歳です。
間もなく40歳にもなろうという僕がまた技術ブログを始めるのは、勉強用です。(;´^ω^`)

と言いますのも、IT系の技術力というのは、どれだけ頑張って勉強しても余り身に付かないもので、それを他人に説明して初めて身に付くもの、なんですよ。

だって、勉強するだけならネットの記事を目で見て理解して終わりでしょ?

でも、ブログで記事にするとなると、ちゃんとサンプルソースを作って、動作することを確認して、表現するのに適切な言葉を考えて……、とかやって、1から100まで全部辻褄合って無いと文章は書けないですからね。

  • 目で読んだだけでは60%くらいしか理解していない。
  • 他人に説明することで理解度が100%となる。

これが僕の勉強スタイルなのです。

と言うわけで、このブログに来て下さる方は、全員が僕の勉強仲間で貴重なお友達です。末永くお付き合い下さいますよう、宜しくお願いします。(´^ω^`)