スキップしてメイン コンテンツに移動
4月, 2019の投稿を表示しています すべて表示

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

イメージ

サイトの表示速度を上げるために画面に入らなくてまだ表示される必要のない画像を画面に入って表示される段階で初めてブラウザに読み込ませるという画像の遅延読み込みの方法がある。 個人的に訪問者だけではなくて検索エンジンにも画像が把握できて検索結果へのサイト評価のSEO対策(検索できる最適化)にも有効と考えられるGooglも推奨する JavaScriptのIntersection Observerを使ったサイト作成 を気に入ってブログに実装している。 追記:サイトの画像の遅延読み込みは HTMLのloading属性で簡単に行える ようになった。JavaScriptのIntersection observerも同じように使えるけど、HTMLよりもコードを増やしてしまうので、むしろ画像以外のコンテンツの遅延読み込みやその他の 無限スクロール などの動作に使う方が向いているだろう。 Bloggerでのカスタマイズ…

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

イメージ

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

BloggerのSVGアイコンの共有ボタンにはてなブックマークなどのデフォルト以外の共有先を追加する方法

イメージ

Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableでSVGアイコンの共有/シェアボタンが搭載されるようになった。記事やスニペットの上段や下段にスイッチが付いていて押すと「リンクを取得」と「 Facebook 」と「 Twitter 」と「 Pinterest 」と「メール」の五種類がデフォルトで表示されて使用可能になっている。 世の中でブログの共有先は他にも数多くあって日本だと僕もやっているけれども はてなブックマーク が人気のソーシャルメディアの一つで、 検索エンジンでのサイト評価を高めるSEO対策を含めてブログのアクセスアップに大きく役立つ と考えられるから共有ボタンになるべく入れておきたい。 以前はブログのテンプレートにBloggerのシンプルテーマを使って共有ボタンは外部の Webサービスの共有ボタンのAddToAnyが便利 で、デザインもSVGアイコン…

BloggerブログのテーマのHTML編集/テンプレートのソースコードの基本構造と使用可能な独自タグについて

イメージ

Bloggerは無料のブログサービスとして何よりも サーバーの強制広告が付かないのとGoogleフォトから軽量で高画質の写真を載せられるのが何よりも素晴らしいと感じる けれどももう一つ面白いと心惹かれるのは豊富な独自タグを使った特有のサイト作成なんだ。 サイト作成のコーディングを覚えるのに役立つ情報源 HTML: HTML: HyperText Markup Language 、 HTML5(目的別) など CSS: CSS: カスケーディングスタイルシート 、 CSS3(目的別) など JavaScript: JavaScript 、 JavaScript など Blogger: レイアウト用ページ要素タグについて / レイアウト用のウィジェット タグ 、 Les balises Blogger [introduction] など 一般的にサイト作成はHTMLとCSSという構成とデザインのマークアップ言語とその他にJavaScri…