-
- lazy loadingで画像が出る前にローディングスピナーを表示させる方法0lazyloadingは 画像が表示されるタイミングが遅くなる わけですから、せっかちスクロールをされると画像の存在に気づいてもらえないかもしれないよね。 ということでこれまでにいくつか対策を書いてきました。 本記事は以下のリンク先記事双方の内容を実践している方に向けたtipsです。 Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法 - カスタマイズ正直あんまりおすすめではない (´・ω・`) ...
- GTmetrixスピードスコア D66%からA100%にするために行ったこと0個別記事ではなく トップページ 対策に的を絞ったお話です。 FC2ブログのシステム上、要約表示タイプ のテンプレートは表示スピード自体は速くともスコア的には低くなります。 利用する 独自変数 に左右されますので、解像度の低い画像(サムネイル専用画像)を出力する変数を用いればそこそこのスコアは出せますが、高解像度ディスプレイ(高dpi)上のスケーリングに関する問題が生じます。 今回の対策は以下のような指針に従...
- Lazy loadingにLQIP画像を利用してユーザービリティを高める8FC2ブログでLazysizesを利用していることを前提とした記事です。 画像のLazyloadingではオリジナル画像が出てくるまで閲覧者が画像の存在に気づかない場合があります。 初期表示にLQIP(Low Quality Image Placeholder, ロー クオリティ イメージ プレイスホルダー)を設定しておくと、その問題点を緩和することができます。...
- Lazyloadingでページ内スクロールの到達位置がずれる件を解消する方法0正直あんまりおすすめではない (´・ω・`) すすめない理由は 要素が増える めんどくさい 記事内でstyle属性あるいはstyle要素を必ず使う必要がある pタグ内の画像はどうする(セマンティクス面) こんなところでしょうか。 特に要素が増えてしまう点ですね。無駄なラッパーが増えるというか。 結局は自身の記事内容の管理能力であったり理解力であったりに関わってきますので、html初心者にはおすすめしません。 ...
- 超軽量画像拡大スクリプトLuminousをFC2で使う方法27画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。 FC2ブログで利用するための各ファイル導入の仕方、コードの書き方などのベーシックな内容に加え、速度強化用のコード記載の仕方や画像が拡大できることをわかりやすくするための追加CSSなど。 初心者向けになるべく事細かに説明したいと思います。 今回は...
- スピードスコアテストの考察2考察というかですね、スコアばかり気にしていると本質を見失いかねない という注意喚起でもあります (´・ω・`) GTmetrix や PageSpeed Insights でテストをするのは大変結構なことではありますけれど、スコアに気を取られすぎて泥沼にはまり込んでいる方も(笑)...
- lazysizesで掲載したYouTubeがiOSで再生できない件について18うーーん。これは困りました (´・ω・`) lazysizesで遅延読み込みを指定しているYouTubeがiPhoneで再生できないようです。 「YouTubeが」「iOSで」と書いていますが、その他動画サービス及びAndroid OSでは未検証なのでこの表現を取っています。 パソコンでの再生は問題ありません。あくまでもiPhone (´・ェ・`) 再生ボタンをクリックすると この動画は再生できません と表示されます。 私の制作したテンプレート...
- Lazyloadを使ってみる【上級編】10検討編、初級編、中級編を経て最終の上級編です。 私が制作したテンプレートを利用していることを前提とした記事内容です。 検討編では「Lazyloadingを導入するかしないかの判断」 初級編では「テンプレートに導入済みのLazyloadingを個別記事でも利用する方法」 中級編では「関連記事リストと新着記事リストにも適用する方法」 を説明しました。 今回の上級編では html5 picture要素の使い方とLazyloading用ブログカー...
-
-
-