スキップしてメイン コンテンツに移動

投稿

ラベル(Javascript)が付いた投稿を表示しています

BloggerブログでIntersection Observerの画像の遅延読み込みをかけるカタマイズ

イメージ
サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策(検索できる最適化)にも有効と考えられるGooglも推奨するJavaScriptのIntersection Observerを使ったサイト作成を気に入ってブログに実装している。 Bloggerでのカスタマイズはどのように可能かを取り上げてみたいLots of packed blueberries by elizadean [CC0], via Pixabay 手順は二つあって特に2017年の公式テーマのContentsとSohoとEmporioとNotableのインデックスページのサムネイル画像――ページ毎に何枚も表示される…

サイトに画像の遅延読み込みをGoogle推奨のIntersection Observerで実装しよう

イメージ
ブログの表示速度をPageSpeed Insightsで調査すると改善できる項目として「オフスクリーン画像の遅延読み込み」が出て来て取り入れると0.1秒くらい短縮できると分かる。 オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。改善できる項目 via PageSpeed Insights 真っ先に心配なのはSEO(検索エンジン最適化)対策で、専らGoogle検索でのサイト評価が下がるとしたら辛い。必要な画像が的確に表示されないとサイトを巡回するクローラーに読み込まれず、コンテンツの品質が低いと判断されて検索結果で不利になってしまうのではないか。個人的に検索エンジンからのアクセスダウンは何としても避けなくてはならないと感じる。 サイトの表示速度もGoogle検索でのサイト…

JavaScriptの画像などの読み込みが遅い場合に使いたいpreloadのソースコード

イメージ
ボタンで複数の画像を切り替える方法をやってみたら二枚目以降の画像の読み込みが遅くて参った。何とかならないかと調べてみたらhtmlの「rel="preload"」を使うと助かると分かった。ファイル毎のブラウザの先読みを可能にするからJavaScriptで後から必要な画像などが直ぐに表示できるようになるんだ。二枚目へ進む 二枚目の画像にpreloadを指定していて非表示でもサイトの閲覧と同時にブラウザに読み込まれるためにJavaScriptの切り替えボタンから待ち時間なしに表示される。 preloadに対応する十二のファイルaudio:音楽video:動画track:字幕script:JavaScriptstylesheet:cssfont:フォントimage:画像fetch crossorigin:XHR/fetchworker:Worker/SharedWorkerem…

JavaScriptの繰り返しボタン:押した回数を数えて実行結果を元に戻すプログラム

イメージ
サイトのボタンはhtmlのinputやbuttonとJavaScriptのonclickを組み合わせて実装できる。後者のプログラムが前者を押して発動するようになる。JavaScriptのonclickはイベントハンドラと呼ばれてhtmlのinputやbuttonの開始タグに他の属性と同じように記載すれば機能する。 onclick自体はhtmlの様々な要素に使えるから例えば画像のimgに組み込んだり、inputやbutton以外のデザインのボタンもspanなどにcssを付けて作成できるだろう。 htmlとJavaScriptでボタンを作成する 押すと画像が二枚目に切り替わる。 サンプルのソースコード html<img id="change-images" src="一枚目の画像URL" data-second-image="二枚目の…

JavaScriptでhtmlを書き換えるinnerHTML

イメージ
htmlのマークアップをJavaScriptのプログラミングで書き換える、またはサイトのソースコードを置き換えるにはinnerHTMLが良く使われる。 Element.innerHTML プロパティは、要素の子孫を記述する HTML 構文を設定または取得します。 element.innerHTML via MDN innerHTMLはElementインターフェースのDOMString(文字列)型のプロパティで、サイト上の要素内容のマークアップを表す。 JavaScriptでは他にも似たようなプロパティのinnerTextやtextContentがあって――どちらもNodeインターフェースのDOMString型に含まれる――プレーンテキスト(htmlタグなどのマークアップ言語を含まない)を設定取得できる。双方にはcssで非表示のコンテンツを知覚するかしないなどの細かい違いがあるけれども機…

JavaScriptで日付や時刻を取得して曜日を数値から文字列へと変換する方法

イメージ
Dateクラスのコンストラクタ関数を使うとDateインスタンスを素早く生成できる。An Owl on a tree branch by Lepale [CC0], via Pixabay 四つの構文と使用可能なオブジェクト DateオブジェクトはUTC/協定世界時の1970年1月1日0時0分0秒(UNIXエポック)から始まるミリ秒までの時刻値を基準として持っている。new Date() 無名コンストラクタ:現在のシステム内の日付と時刻new Date(value) value:UNIX時刻(UNIXエポックからの経過秒)new Date("dateString") dateString:IETF準拠のRFC2822の日時指定とISO8601の拡張形式
ブラウザや書式によって誤差が生じ得るnew Date(year, monthIndex, day, hours, mi…

Bloggerの時刻のフォーマット/投稿の年月日と曜日の並び替えのカスタマイズ

イメージ
Bloggerの投稿の日付の時刻のフォーマットはデフォルトで七種類が用意されているけれどもhtml編集のカスタマイズで年月日と曜日を並び替えて他のスタイルでも表示できる。Powdery snowfield by cocoparisienne [CC0], via Pixabay目次公開日の年月日と曜日を並び替えるソースコードタイムゾーンなしの公開日の時刻のフォーマット更新日の年月日と曜日を並び替えるソースコード旧テーマの更新日のJavaScriptでのカスタマイズタイムゾーンなしの更新日の時刻のフォーマット新テーマのテンプレートへの記載の仕方公開日の時刻のフォーマットの場合更新日の時刻のフォーマットの場合旧テーマのテンプレートへの記載の仕方公開日の時刻のフォーマットの場合更新日の時刻のフォーマットの場合公開日の年月日と曜日を並び替えるソースコード<data:post.date.ye…

BloggerブログのJSON-LDの構造化データのSEO対策のためのカスタマイズについて

イメージ
Bloggerの2017年の公式テーマのContempoとSohoとEmporioとNotableの記事/追加ページにはJSON-LDの構造化データがデフォルトで付けられている。目次Google推奨のJSON-LDの構造化データはSEO対策に相応しいBloggerの新テーマのJSON-LDの構造化データのソースコードインデックスページの記事毎のJSON-LDの構造化データを削除するインデックスページに専用のJSON-LDの構造化データを付ける方法JSON-LDの構造化データのソースコードのサンプル新テーマのテンプレートへのマークアップの仕方Google推奨のJSON-LDの構造化データはSEO対策に相応しいJSON-LD(推奨)ページのheadやbodyに<script>タグで埋め込まれたJavascriptの表記法です。マークアップは利用者に見える文章で挿入されてませんが、…

Instagramの埋め込みコードがバージョン8で非常に軽量化されて使い易くなった

イメージ
ブログの記事にInstagramの写真や動画を埋め込みコードを使って載せようとするとそれ自体が長くてびっくりするけれどもJavascriptも付いていて読み込み時間が延びるのが懸念される。マークアップの<script>と</script>の囲みで、コンピューターのプログラムだからブラウザにとっては通常の場合よりも余計に計算しなくては内容がサイトに反映しない。しかしバージョンアップで8(埋め込みコードの冒頭付近に「data-instgrm-version="8"」と載っている)に変わってからInstagramの埋め込みコードのJavascriptが非常に軽量化されたようだ。外部ファイルなので、手元に取り込んで調べてみるとたったの8.23KBしかなくなっている。日本語で換算すると四千文字くらいに相当するけれども以前のバージョン7の60.85KBと比…

サイトへのAMPのとても簡単な導入手順

イメージ
普段、Google検索を使っていてAMPの実装サイトはブラウザで瞬時に開いたりして表示速度が圧倒的に速い。というのもGoogleにサイト内容がキャッシュされていてサイトへ行かずに出て来るためだ。AMPサイトならばGoogle検索でのサイト評価が上がるとも聞かれるし、訪問者の利便性を高めると共に検索エンジンからのアクセスアップにも繋がるはずだ。羨ましくて自分でもやってみたいと思うけれども既存のサイトを専用のコードで書き換えなくてはならないか、またはオリジナルとは別のAMPサイトを作成しなくてはならないのが大変だから無理だと何もせずにいた。ところが好奇心からサイトへのAMPの導入手順を調べていたら意外とできそうな感じがし来て実際にやってみたら最初はエラーを連発して相当に苦しんだにしても色々と細かく学びながら成功するや否やとても簡単だったと振り返ってしまった。有効なAMPページです via A…

TumblrブログにGoogleアドセンスが表示されない理由

イメージ
僕がブログの些細な日常をTumblrからBloggerへ移転した最大の理由の一つがGoogleアドセンスのサイト広告が表示されなくなった悲しみなんだ。TumblrのGoogleアドセンスの空白 via Super Leak以前から不可解な動きをしていて外部サイトのJavascriptが十分に働かない面がTumblrには確認されていたので、他のソースコードも駄目になったりするけど、しかしちゃんと表示される場合もあるから様子を窺いながら待つしかないと思っていた。去年、TumblrブログにGoogleアドセンスが消えてから一年近く経っても戻って来るという気配が殆どない。Tumblrから新しいサイト広告が自前で入るように変わったのが厳しくてGoogleアドセンスが表示されるのはもう無理かも知れないと危惧されて些細な日常はさっさと移転するのが賢明だろうと感じた。なぜTumblrブログにGoogle…