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

投稿

4月, 2019の投稿を表示しています

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検索でのサイト…

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…