1. プリレンダリングする..
    2018/July/22/04:54 Sun   Comment(0)
    この記事は さくらのブログ、 Seesaaブログを お使い... ( Read more )
  2. 脱 jQuery?
    2018/July/16/17:08 Mon   Comment(0)
    jQueryはいらないと 言われていますが なぜなのでしょう... ( Read more )
  3. font-size:..
    2018/July/15/04:27 Sun   Comment(0)
    CSS検証サービスで CSSのエラーに font-size:... ( Read more )
このブログの事 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により
遅延読み込みされる?ハズです。















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





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

2018年07月16日

脱 jQuery?

jQueryはいらないと
言われていますが
なぜなのでしょう(・・?

jQueryのようなライブラリを
追加することなく
プレーンなJavaScriptを
Vanilla JSなんて言うそうです。


575829.jpg


当ブログでは、
jQueryも使用していますし、
Vanilla JSもあるかと思いましたが、
ほとんどのプラグインJSは
jQueryでした。

なので、
当ブログでは
jQueryはないと困る
ものです。


今更ですが、
簡単にjQueryの説明をしますと…
ブラウザ間での違いを吸収しつつ、
記述量を少なくして、
リッチなサイトをつくるための
java scriptのライブラリです。




上記を読めば
jQueryって
素敵ですよね!

わたし自身も初歩的で
短いコードでしたら
ネイティブなJavaScriptより

直感的に理解しやすく、
親しみやすいと感じて
おり、

もっと勉強してみたいな・・と
感じたりもするのですが・・、



個人的にブログに
いちばん関係の
ありそうなのは
パフォーマンスの
問題なのでしょうか?


だからと言って
今のところ使わない訳には
いかないですし、

不要と思うものも
ないと思っていますが、

脱 jQueryを意識して
ネイティブなJavaScriptを
勉強して、
ブログを見直せば

改善すべき点も
見えたりする?


のかもしれません。

取り組むべき
課題なのかな(・・?






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







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

2018年07月11日

AMPカスタムタグ利用の注意点

前記事にて
AMPカスタムタグを使うと言うのを
ご紹介したのですが、

このカスタムタグを利用してみて
いくつかの注意点を書きとめて
おきますね。

492717.jpg


AMP JSライブラリは</head>の
直前に記述する。

amp-iframeやamp-gistなどの
コンポーネントに必要な
JSライブラリは単体では使えません。

v0.js(amp-imgタグに使うJS)
とセットで動作します。




amp-imgタグは閉じる事。

<img src=""> は閉じませんが、
<amp-img src=""> は </amp-img>と
閉じタグで閉じる事です。

amp-imgタグで表示した画像は
RSSフィードで表示されません。

RSSフィードで画像を取得する
ブログパーツを利用している場合
画像が表示されなくなります。

amp-iframeタグで
リンクをtarget=_blankにするには
sandbox="allow-popups" を指定します。


GitHub GistをCSSで装飾して
表示している場合、

amp-gistタグでは
装飾が有効になりません。





上記の事から、
カスタムタグと
標準のタグを
うまく使い分ける事
必要なようです。







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







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