スキップしてメイン コンテンツに移動
ラベル(表示速度)が付いた投稿を表示しています すべて表示

インラインSVGのdefsとgかsymbolとuseによる呼び出しのマークアップ

イメージ

サイトに 画像を描画できるインラインSVG は小さくても乱れず、しかもサイト内にマークアップすればサーバーの呼び出しを行わず、迅速に表示できるからアイコンのデザインなどに良く使われる。 Honeycomb by Clker-Free-Vector-Images / CC0 インラインSVGには同じ画像を繰り返して表示するためのマークアップがある。 一つのsvgタグの内側にdefsタグを入れてそこにid付きのgタグかsymbolタグで描画内容を纏めておく。そして内側か、または外側の場合は他のもう一つのsvgタグにuseタグを入れてhref属性でgタグかsymbolタグのidを指定してリンクのように呼び出す。 目次 インラインSVGの二つの呼び出し方 一つのsvgタグの中で呼び出す場合 定義用と表示用のsvgタグを分ける場合 呼び出しのマークアップの長所と短所 SVGのgタグとsymbolタグの違い インラ…

画像のdecoding-async:非同期処理による高速化について

イメージ

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいdecoding-asyncの使い方を考えてみたい。 decoding-asyncは画像の非同期処理を示唆する Two swallows by Capri23auto / CC0 decodingは画像のimg要素に使える属性で、画像のデコード(ファイルの諸々のデータ形式を画面表示に適したビットマップに変換する過程)の扱いを制御する。 decoding属性で指定できる三つの値 auto 同期と非同期の処理の仕方をブラウザに任せる(初期値) sync 同期処理を示唆する async 非同期処理を示唆する decoding属性は画像と画像以外のコンテンツをどのような順番で表示するかに影響を与える。 画像のデコ…

画像のloading-lazy:遅延読み込みによる高速化について

イメージ

サイトの画像はその他のコンテンツと比べて容量が多くてサイトの表示速度を大きく下げることがある。画像の表示速度を上げることはサイトの利便性を高めることに繋がり易い。 HTMLで簡単に取り入れられてしかも効果が大きいloading-lazyの使い方を考えてみたい。 loading-lazyは画像の遅延読み込みを指定する Hoffman's Two-toed Sloth by gailhampshire / CC BY loadingは画像のimg要素、さらに別枠のiframe要素にも使える属性で、画像などの読み込みの開始位置を制御できる。 loading属性で指定できる二つの値 eager 画像などを記載位置で読み込む(初期値)。 lazy 画面内の画像などをレイアウト処理後に読み込み、画面外の画像などを読み込まない。 初期値のeagerは何もしないのと同じで、従来と変わらない。ただし不要というわけでは…

Bloggerの投稿画像の種類とサイズ/容量と画像URLについて

イメージ

Bloggerの管理画面が2020年9月から刷新されて投稿画像の出方が幾らか変わったから改めて纏めておきたい。 目次 四種類の投稿の仕方とそれぞれの最大幅 Bloggerの投稿画像のサイズ毎の圧縮の目安 画像URLで投稿画像のサイズを変更する方法 Bloggerの投稿画像のサンプルのソースコード Bloggerのimgタグのサンプルのソースコード Bloggerの画像URLのサイズ指定のパターン 画像URLでWebPファイルに変更する方法 webpファイルとその他の振り分けの仕方 四種類の投稿の仕方とそれぞれの最大幅 投稿画像の選択 via Blogger パソコンからアップロード:デバイス(パソコン、スマホ、タブレットなど)から掲載する フォト:Googleフォトのギャラリーかアルバムから掲載する Blogger:Blogger(Bloggerに以前に取り込んだ画像)かGoogleアルバムアーカイブ(Blogg…

サイトに画像の遅延読み込みを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:JavaScript stylesheet:CSS font:フォント image:画像 fetch crossorigin:XHR/fetch worker:Worker/SharedWorker em…

Bloggerの注目とブログと人気の投稿のウィジェットのスニペットの表示されない文字数を減らす

イメージ

Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableのインデックスページ(トップ、アーカイブ、ラベルなど)の記事の抜粋などに使われるスニペットの文字数が実際に表示されるよりもソースコードに多く記載されている。 Three types of devices by coffeebeanworks [ CC0 ], via Pixabay 調べると必要なのはスマホとパソコンで百文字と二百五十文字程度――文字サイズによって前後するし、小さなサムネイル画像と横並びの文章のデザインの場合は八十文字と百七十文字前後まで減る――なのにテンプレートはデフォルトで千文字が記事の本文の冒頭から抜き取られる設定になっているんだ。 最も多く必要なパソコン版の文章だけのスニペットで表現される文字数からしても七百五十文字程度が無駄だと思うし、ブログの表示速度を下げて利便性も下げるか…

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(推奨) ページの見出しや本文の <script> タグ内に埋め込まれる JavaScript 表記。このマークアップにはユーザーに表示するテキストをそのまま挿…

BloggerブログでOGP設定の画像を全ページで一枚ずつ配信する方法

イメージ

Bloggerの 2017年の公式テーマ のContempoとSohoとEmporioとNotableはトップやアーカイブなどのインデックスページでのSNSのためのOGP設定の画像(og:image)が記事の抜粋の画像の掲載数に一致している。 OGP設定の画像はSNSに共有する際に一枚しか使われないので、配信するのは一枚で良いと思う。幾つも記載されるとソースコードが長くなって表示速度を落としてしまう。Bloggerで使われる画像URLは文字列が細かく識別されて只でさも普通よりは伸びるから影響は大きそうだ。しかもインデックスページは専用の画像ではないから記事が更新されて画像が追加されると変わるのが個人的に落ち着かない。固定の画像を付けるのが望ましいから併せてカスタマイズを行いたくなる。 旧テーマのシンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルではイン…

サイトの表示速度をlinkタグの「rel="preconnect"」で上げる/WebPagetestで事前接続を調べる

イメージ

HTMLの リソースヒント ( 日本語訳 )に載っているlinkタグの「rel="preconnect"」がサイトの表示速度を上げるのに役立つと知ってブログに取り入れたんだ。 速くなるのは確かながらほんの僅かで、体感上、殆ど変わらないようだけど、しかしブラウザの外部ファイルの読み込みを効率化できるので、訪問者が以前よりも安定して閲覧できるかも知れないから外すには至らない。 Luminescence of cars running on a dark road by Mateusz Dach [ CC0 ], via Pexels 目次 リソースヒントのpreconnectの仕組み linkタグの「rel="preconnect"」の記述法 サイトの表示速度を上げ易くする条件 WebPagetestで事前接続を調べる方法 WebPagetestの通常の入力画面の日本語訳 事前接…

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

イメージ

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

detailsタグでサイトに開閉メニューを作る

イメージ

HTML5 のサイトはdetailsタグで開閉メニュー/アコーディオンを簡単に作れると分かった。バージョン5.1から新たに加わった要素らしくて発表されないまま、かつて jQueryを使って難儀に臨むしかなかった 気持ちが嘘みたいに晴れ上がっている。本当にHTMLのマークアップだけで済んでしまうからサイトの表示速度が遅くなる影響も最大限に抑えられる。 details要素は、ユーザが追加情報やコントロールを得ることができるディスクロージャーウィジェットを表す details要素 via HTML Standard 日本語訳 detailsタグのデフォルトの記載と表示 <details><summary>概略</summary>細目<br>細目<br>細目</details> 概略 細目 細目 細目 最初から開いておく <details …

CSSはどう使えば良いのか|タグ自体とidとclassの指定先とstyleタグとインラインstyleの記述法

イメージ

サイト作成でコンテンツのマークアップを行ったHTMLにデザインを付けるのがCSS(Cascading Style Sheets/カスケーディングスタイルシート)だ。記述がHTMLのようにタグで囲むだけではないからちょっと難しい。 僕は基礎を覚えるのに十年くらいかかった。デザインはテンプレートに任せておいて構わないと見向きもしなかったせいだけど、しかし CSSはレベル3から色んな表現が可能だと気付いて から新しく学び出した。サイト作成が創作活動としてさらに面白くなる。 今再び初心へ帰りながらCSSは実際にどう使えば良いのかを入門として簡単に纏めておきたい。 目次 デザインの設置について CSSの三つの指定先 CSSの二つの記述法 CSSの内容の記述について styleタグでデザインする例 インラインstyleでデザインする例 styleタグならではのデザイン styleタグのCSSの複数の指定先 複数の指定先を細か…

Googleからブログに一日百人の訪問者を得たから何が良かったかを認識してアクセスアップをさらに加速しよう

イメージ