QooQ 高速化トップへ戻るボタン【脱jQuery、脱JavaScript】

2023年02月01日 2023年03月11日

また、最近、ページエクスペリエンスが、黄色好いんですよ。もう！（困）

そんなわけで、またしても、、高速化の試練？色々と調査の日々。トホホ。

トップへ戻るボタンを「jQuery」も「JavaScript」もなしで

あっ、確かに、そうだよね。。なるべく、軽くしてしまいましょ♪

こちらの達人に伝授戴いた。。🙏ある意味、目からうろこだったわ♪

ページトップへ戻るボタンをHTMLとCSSのみで実装する方法 | 株式会社リラクス

そう、「href="#"」で、「そのページの先頭」にリンクするわけです。

「CSS」は、今までのを活かして、このように変更しました。

また、「TOP」という文字を使用しないことで、、

「PageSpeed Insights」の「背景色と前景色には十分なコントラスト比がない」

と出てたのを、改善できました。

html {
    scroll-behavior: smooth;
}
.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 5px;
    bottom: 5px;
    background: #f59c00;
    opacity: 0.6;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
}
.pagetop__arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: translateY(20%) rotate(-45deg);
}
.pagetop:hover {
    opacity: 0.8;
    cursor: pointer;
}

後は、フッターの[HTML]ガジェットに、下記のコードを追記しました。

<a href="#" id="page-top"><i class="blogicon-chevron-up"></i></a>
<a class="pagetop" href="#"><div class="pagetop__arrow"></div></a>

「QooQ v1.30」で一箇所ある、【脱document.write()】

    <div class='list-item-inner'>
      <p class='list-item-date'><script type='text/javascript'>document.write(jsdate)</script></p>
      <h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
      <p class='list-item-category'>
        <b:loop values='data:post.labels' var='label'>
          <span class='list-item-category-item'><a expr:href='data:label.url'><data:label.name/></a></span>
        </b:loop>
      </p>
    </div>

「PageSpeed Insights」に「document.write() を使用しない」と出るんですが、

こちらで、書き換えられるようです。

こちらの達人に伝授戴いた。。🙏

年月日表示にしました。

    <div class='list-item-inner'>
      <p class='list-item-date'><data:post.date.year/>年<data:post.date.month/>月<data:post.date.day/>日</p>
      <h3 class='list-item-title'><a expr:href='data:post.url'><data:post.title/></a></h3>
      <p class='list-item-category'>
        <b:loop values='data:post.labels' var='label'>
          <span class='list-item-category-item'><a expr:href='data:label.url + &quot;?max-results=10&quot;'><data:label.name/></a></span>
        </b:loop>
      </p>
    </div>

もはや「widget.js」も「plusone.js」も削除

こちらの達人に伝授戴いた。。🙏

ブログアーカイブのガジェットが、動かなくなった？ので削除しました。

今のところ、他に影響はでてないもようです。

残りのJavaScriptは、、圧縮！

こちらのツールを使用させて頂きました。。🙏

TM - WebTools JavaScript圧縮

追記

「PageSpeed Insights」って、「パフォーマンス」ばかり気にしてたんですが、

「ユーザー補助」とか、「おすすめの方法」、「SEO」とか見始めると、

サイズとか、説明とか、どんだけ～明記してないことかと思い知ってしまう。

（その辺は、また別途、記事にしようと思います。）

そんなわけで、、ますます深みに嵌っていってる、最近の状況です。。（難）

Blogger