1. ChromeがLaz..
    2018/September/04/04:49 Tue   Comment(0)
    わたしがリスペクトしている コリスさんの情報です。 ... ( Read more )
  2. SQLite Int..
    2018/August/27/03:29 Mon   Comment(0)
    SQLite Integrationを使い SQLiteでWo... ( Read more )
  3. Hello Word..
    2018/August/22/07:37 Wed   Comment(0)
    さくらのレンタルサーバ ライトで WordPressが使えまし... ( Read more )
  4. CMSをインストール..
    2018/August/19/14:14 Sun   Comment(0)
    おそらく8月22日の システムメンテナンスで さくらのサブド... ( Read more )
  5. 何となく分かったで良..
    2018/August/15/05:14 Wed   Comment(0)
    プログラミングを勉強したり 調べたりしていると 出てくる言葉... ( Read more )
このブログの事 Performance up

2018年07月27日

Prefetch Final form

先読み(プリレンダリング)に
ついて色々と試してみましたが、

rel="prerender"については、
Edge、Firefox、Safari
は非対応
で、
プリレンダリングの制約として
対象は1ページだけ
だと分かりました。

だったら
主なブラウザに対応した
記述
は何かないかと調べました。


670711.jpg


rel="dns-prefetch"
これが大体のブラウザに
対応しているものの

httpsページはprefetchできない。

これが痛い。



さらに調べると
併記が可能だと分かりました。

だいぶ古い文献ですが、



上記によれば

rel="preload prefetch"

と併記が可能となっています。

prefetchは
IE、Edge、Firefox、
Chrome サポート。

preloadは
Edge、Chrome、
Safari サポート。


Can I use


prefetch機能は
後から読み込まれる
可能性のあるファイルを事前に
先読みしておく機能
ですが、

The as attribute is
an OPTIONAL
attribute that must
conform to requirements
defined in [PRELOAD].

preloadで定義されたas属性
指定できるようです。

ここでは as="html"
ですが、
as=documentに変えると
変化を感じられる?

かもしれません。


Resource Hints


さらに

BODYに書いてOKなのか
調べました。

next、prevはダメみたいですが、

Prefetching関係はOKのようです。


HTML Standard


そうすると
最終形態は

<link rel="preload prefetch"
crossorigin="use-credentials" as="document" href="・・.html"/>


こんな感じになります。


デザイン> PC> コンテンツ
記事パーツのコンテンツHTML編集にて

<% content.header -%>
<!-- Content -->

の後に
以下を書き加えます。





不安な方は
マネしないでください。


また、
全て自己責任にて
お願い
いたします。






貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました





posted by four4to6 at 04:27 | Comment(0) | このブログの事 Performance up

2018年07月24日

Prerendering Part 2

前回の記事にて
プリレンダリング機能について
ご紹介いたしましたが、
先読み(プリレンダリング)の
対象がarticleページのみ
でした。


533561.jpg


今回、
archives、categoryページまで
対象
としたソースを
ご紹介いたします。

よろしければ、
差し替えてください。

デザイン> PC> コンテンツ
記事パーツのコンテンツHTML編集にて

<% content.header -%>
<!-- Content -->

の後に
以下を書き加えます。




注意事項その他は
前回記事と同様です。



最新記事
http://four4to6.sblo.jp/article/184014422.html






貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました





posted by four4to6 at 04:20 | Comment(0) | このブログの事 Performance up

2018年07月22日

プリレンダリングする

この記事は
さくらのブログ、
Seesaaブログを
お使いの方が対象
ですが、

興味のある方は
是非読んでくだされば
幸いです。

さて、
次に表示される可能性の高いページを
先読み(プリレンダリング)しておけば、
そのページを表示する
待ち時間を短縮できます。

この
プリレンダリング機能を使い
ページを先読みさせてみます。


254336.jpg


プリレンダリング機能は
HTMLのhead要素内にlink要素を使って、
たった1行を書くだけで実現できます。


<link rel="prerender" href="nextpage.html">

・・と言っても

さくらのブログのheadは

テンプレートで固定されていて
記事毎に書くのはムリ!

※ その他、
headに書かない理由として、
headでは独自タグがエラーになる。


なので、bodyに書きます。

デザイン> PC> コンテンツ
記事パーツの

コンテンツHTML編集にて
独自タグを編集いたします。


さらに、
CSSの遅延読み込みソース
使いたいと思います。

headではなくbodyに書く事、
CSSの遅延読み込みソースを
使う事が正当なのか分かりません。


不安な方は
マネしないでください。


また、
全て自己責任にて
お願い
いたします。

記事パーツのコンテンツHTML編集にて

<% content.header -%>
<!-- Content -->

の後に
以下を書き加えます。




※ JavaScriptは圧縮すると
正常に動作しない
ので
そのまま記しています。

これで
記事毎に

href="・・・.html"

のURLが変わります。
また、
JavaScriptにより
遅延読み込みされる?ハズです。









最新記事
http://four4to6.sblo.jp/article/184014422.html






貴重なお時間を割き、
最後まで
ご高覧いただきまして
有難うございました





posted by four4to6 at 04:54 | Comment(0) | このブログの事 Performance up