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

投稿

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

サイトに画像の遅延読み込みを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…

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(推奨)ページのheadやbodyに<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からブログに一日百人の訪問者を得たから何が良かったかを認識してアクセスアップをさらに加速しよう

イメージ
昨日からブログのアクセスが急増している。二日連続だから、可成、面白い。上向きがさらに続いて行ってもはや落ちないのではないか。一日百五十人に近くてGoogleから一日百人を初めて達成しているのが考え通りの結果だからとても嬉しい。四ヶ月くらい横這いで苦しんでいただけにブロガーの夜明けみたいだ。考えてもGoogleから一日百人の訪問者を得るのは難しくないはずだったから呪われているとしかいいようがなかったけれども振り返ってみるとサイト年齢が一年以下では細かいところで嫌われるせいだったんだろう。何が良かったのかを今此処で認識しておくと将来的にきっともっと助かる。サイト年齢が上がるとそれだけでブログのGoogleでのサイト評価が上がるはずならば細かいところで取り零しても気付かないかも知れない。一日千人で頭打ちを被ってしまったらサイト広告で生活費を稼いでもギリギリの毎日を強いられるから避けたい。できれ…

サイトのヘッダー/背景画像を小さくリサイズするアプリと高く圧縮するWebサービスで最大限に軽量化して作成する

イメージ
サイトの表示速度を考えると画像が最も容量が大きくて支障を来し兼ねない。一枚で他の全てを平気で上回ったりもする。影響が非常に大きいので、載せるならば予め軽量化しておくには越さない。大きさを小さくリサイズしたり、データを高く圧縮したりする方法があってそうしたアプリやWebサービスを使うと良いと思う。ただし難しいのは画質だ。写真でも何でも画像は小さくリサイズしたり、高く圧縮したりすればするほどに画質を落とし易くてサイトのデザインが崩れて来てしまう。嘆かざるを得なくなるんだ。目次画像を最大限に軽量化するためにリサイズと圧縮の二つの方法の組み合わせる一回目の編集:アプリのPhotoshop Expressでリサイズする二回目の編集:WebサービスのTinyJPGで圧縮するホームページやブログで画像を載せる際には画質と容量の鬩ぎ合いが避けられなくて絶えず、最高のバランスを模索するように画像を望み通り…

Bloggerブログで使ってないのに出力されるWebフォントのソースコードを消す方法

イメージ
Bloggerブログの公式テーマは最初から設定されているWebフォントがたとえ他のフォントを新たに表示するべく変更してもソースコードに出力されてしまう分かった。サイトの容量を増やして表示速度/ページのダウンロード時間を必要以上に遅らせると懸念されるから消しておかなくては勿体ない。些細な日常はContempoを使っているけれども調べると最初から設定されてないWebフォントまで出力されていたんだ。デザインのパターンが、四種類、あって他の分まで入っているせいではないか。元々はRobotoなのにDamianやPlayfair Displayと使われているはずのない見たことも聞いたこともないWebフォントがソースコードに記載されていると驚いた。Contempoの基本的なテンプレートが四種類のデザインで使い分けられるように提供されていてテンプレート自体がそれぞれのデザインに合ってないから他の分の無駄…

Google FontsのEarly accessはcssのfont-faceで軽量化して使える

イメージ
ホームページでGoogle FontsのEarly accessから日本語フォントのNoto Sans Japaneseを無料で使っている。とても気に入っていてAndroidのスマホでマシュマロから搭載されているのも嬉しいかぎりだ。しかしWebフォントとしてホームページにcssへlinkのstylesheetや@importで取り込んで表示するのは非常に厳しくて表示速度を著しく低下させる。日本語は漢字が多くて英語などと比べるとデータサイズを大幅に増やしてしまうせいだ。3MBくらいだからちょっとした画像を300KBとして換算しても、百枚、載せているのと変わらない。追記:Google Fonts launches Japanese support(Googleフォントは日本語のサポートを開始)によるとフォントスライシングシステムによって、八割程、日本語のファイルサイズを削減できたようだ。世の…

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

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

Bloggerのモバイルで記事に埋め込んだYouTube動画のサイズを変更する方法

イメージ
Bloggerブログで記事にYouTube動画を載せるにはウェブの投稿の「動画」から取り込むのが便利だと思う。YouTubeの自分のチャンネルは直ぐに探せるし、他人のチャンネルは検索からキーワードやURLで埋め込みコードを簡単に取得できる。サイズが「320×266」で固定されているからタブレットやパソコンでは大きく表示したくなるけど、しかしスマホでもバランスが悪くて変えたくなって来たんだ。BloggerのデフォルトだとYouTube動画の様々な画面比にきっちり対応できるけれども昨今は16:9の画面比が大半を占めているから完全に合わせてしまった方が良いと思う。毎回、上下の余りの黒い部分が太過ぎるし、モバイルの記事では最初にサムネイル画像が上下の黒い余りなしに表示されていて実際の動画よりも、可成、大きく膨らんでいる。デザインとして画面比を16:9の「320×180」に設定するのが望ましい。モ…

ウェブクロウからスターサーバーへホームページを移転するのはリダイレクトも含めて簡単だった

イメージ
ホームページを作成している無料サーバーのウェブクロウを久し振りに観に行ったら新規登録の受け付けを停止していてもう終わりなのかと非常に焦った。以前、メールやアクセス解析が提供されていたのに停止してサービスが縮小しているイメージを抱いていたからついにメインのホームページのサーバーにも来たのではないかと感じたし、ならば早めに移転先を見付けておくべきだろうと慌ただしく考えざるを得なくなってしまったんだ。トップページ via ウェブクロウウェブクロウの画面にスターサーバーが新しくできたと大きく載っていて最初は気付かなくて他の無料サーバーを探しに出かけた。しかし同じように広告なしで容量も大きめのサービスがなくて参った。仕方なしに又戻って来てスターサーバーを改めて観に行ったら有料プランだけではなくて無料プランも用意されていると小さく表示されていてウェブクロウと中身も同じだと分かってほっとした。ホームペ…