WP REST APIで独自エンドポイントを登録しキャッシュする方法【WP REST Cache】 | Web技術Tips | ホームページ制作のDOE【横浜】
WP REST API で呼び出す投稿データの数が数千件や数万件になりそうなら、API のデータをキャッシュしたほうがいいです。 この記事では WP REST API の独自エンドポイントを追加する方法と、キャッシュを保存する方法を書いていきます。 API のキャッシュの保存には『WP REST Cache』というプラグインを使用します。 WP REST Cache は一度キャッシュに登録しておくと、投稿の更新や削除をした時に自動でキャッシュの内容が更新されて便利です。 独自エンドポイントの追加方法 register_rest_route() 関数でエンドポイントを設定します。 以下のコードでは /wp-json/vendor/v0/post をエンドポイントに指定しています。 function prefix_register_custom_route() { ///wp-json/ven
重たい処理を裏に回してサイトの読み込みを爆速にするライブラリ「Partytown」使ってみたレビュー
デロイトとGoogleの調査(PDF)によって、ウェブサイトへのアクセス数や滞在時間はページの読み込み速度に大きな影響を受けることが判明しています。できるだけ読み込み時間を短く抑えたいものですが、長年ウェブサイトを運営しているとさまざまなしがらみによってアナリティクスなどのサードパーティスクリプトが増加し、どんどん読み込み速度が遅くなってしまうことも。そうしたサードパーティースクリプトの処理をサービスワーカーに任せることで読み込み速度を爆速にしてくれるのが「Partytown」です。 Welcome To Partytown https://partytown.builder.io/ ウェブの世界では基本的にJavaScriptでしかプログラミングを行えませんが、このJavaScriptはシングルスレッドで実行されており、つまり同時に一つの処理しか行えないようになっています。多数のスクリプ
CSSの新しいプロパティ「content-visibility」レンダリングのパフォーマンスが向上する
Webページのパフォーマンスを向上させることは、CSSでも可能です。去年の暮れからChromeで利用できるようになったCSSの新しいプロパティで、2021年現在Edge, Operaにもサポートされています。 読み込みパフォーマンスを向上させるために最も効果があるCSSの新しいプロパティcontent-visibilityについて紹介します。 content-visibility: the new CSS property that boosts your rendering performance by Una Kravets, Vladimir Levin 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに content-visibilityのサポート状況 CSS Containmentとは content-visi
barba.js - スムーズなページ遷移を実現 MOONGIFT
Webページを素早く表示したいというニーズは強くあります。AMPのような技術しかり、PWAのCache APIもそうです。遅くて良いことなどありません。とにかくWebページは高速に表示すべきです。そしてそのためのライブラリも多数あります。 今回紹介するbarba.jsは高速、かつスムーズなページ遷移を可能にするライブラリです。 barba.jsの使い方 利用例です。ページが切り替わる際に真っ白な表示になることがありません。 barba.jsはプリフェッチを使ってリンク先のコンテンツを読み取り、現在のページと差し替えることでスムーズな表示を実現します。類似の技術はフレームワークで実現されていることが多いですが、任意のWebサイトに組み込める点においてbarba.jsの需要は多そうです。 barba.jsはTypeScript製のオープンソース・ソフトウェア（MIT License）です。 b
スマホ対応の優れもの！クリック・タップの直前にページを先読み、高速表示する超軽量スクリプト -instant.page
ユーザーがリンクをクリックする際のhoverとタップする際のtouchstartに合わせて、クリック・タップする直前にページのHTMLをプリロードし、高速に表示するわずか1kBの超軽量スクリプトを紹介します。 ページに外部スクリプトを1つ加えるだけの簡単実装です。 instant.page instant.page -GitHub instant.pageの特徴 instant.pageのデモ instant.pageの使い方 instant.pageの特徴 instant.pageはprefetchを使用し、ユーザーがクリック・タップする直前にページをプリロードして、ページを高速に表示します。 ユーザーがリンクをクリックする際には、そのリンクの上にマウスを移動します。そのリンクをユーザーが65ミリ秒間ホバーした場合、そのリンクをクリックする確率は1/2であるため、この時instant.p
pageAccelerator - JavaScriptだけでWebページ読み込みを高速化
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Webページの読み込み速度は速ければ速いほどメリットがあります。スマートフォンアプリのようにUIはすべてアプリの中にあり、データだけをやり取りする方法が主流になっている中、Webブラウザが遅く感じられてしまうとユーザはあっという間にブラウザから離れていってしまうでしょう。 今回は簡易的にページ読み込みを高速化してくれるpageAcceleratorを紹介します。 pageAcceleratorの使い方 pageAcceleratorはTurbolinkやpjaxと呼ばれる仕組みに近いものとなっています。まずスクリプトを読み込みます。 <script src="page-accelerator.min.js"></script> 後はpageAcceleratorを実行するだけです。
[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？ PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。 Barba.js Barba.js -GitHub Barba.jsのデモ Barba.jsの使い方 Barba.jsのデモ Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。 ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
![[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/4521503cad1ef35e553783a3eb0c0ab4a4bc1361/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016063007.png)
Clusterize.js·大量のデータを描画&高速スクロール MOONGIFT
Web上で巨大なデータを描画するとWebブラウザの動作が重たくなったり、最悪の場合落ちます。それを防ぐためにはデータをすべてDOMに描画するのではなく、表示している範囲だけに絞って表示し、非表示になったタイミングで破棄すると言った工夫が必要です。 しかしそういったDOM操作はコツがいります。そこで使ってみたいのがClusterize.jsです。巨大なデータセットを高速に表示するためのライブラリです。 Clusterize.jsの使い方 Clusterize.jsを使って5,000行のデータをスクロールする例です。スムーズに描けます。 Clusterize.jsのサイトではさらに10万、50万行のデータを描画することもできます。Clusterize.jsではリストの高さを予め計算し、それに合わせてスクロールバーが正しい長さで出るように設定されています。そのため行の高さは一定である必要がありま
WordPressでブログを開設して3ヶ月目の人にオススメしたい便利なプラグイン12選 | 株式会社LIG
こんにちは、メディア事業部のエリーです。 3年目の浮気、石の上にも3年と言いますが、ブログで言うと“3ヶ月”がターニングポイントになるんじゃないかと、わたしは思っています。 ブログを書くのにも慣れ、だんだんアクセスが増えてきたころ、「意外に読まれてるなあ」と思うと同時に、「そんなに一気には読まれないんだなあ」と現実にショックを受けるのではないでしょうか。 ということで、今回は、WordPress専用超高速サーバー「Z.com byGMO」さんに、3ヶ月目を迎えたブロガーが抱えるありがちな悩みと、それを解決するプラグインをお聞きしました。 3ヶ月目には入れておきたいプラグイン12選 WordPressでブログを始めたものの、プラグインをそこまで使いこなせてないし、「どれが良いのか分からない！」という人におすすめな12選です。 目次 スパムコメントやトラックバックを防ぐ「Akismet」 セキ
Adblockよりもはるかに軽い広告除去ツール「µBlock」を使ってみました
ウェブページの広告を非表示にすることで表示速度をアップしようとAdblockなどの拡張機能をインストールしてみたものの、かえって動作が重くなってしまうということがあります。そこで、広告を非表示にできAdblockよりもはるかに軽いと評判の拡張機能「µBlock」を使ってみました。 gorhill/uBlock · GitHub https://github.com/gorhill/uBlock ◆µBlockについて 広告を非表示にしてくれるブラウザの拡張機能としては「Adblock」が圧倒的に有名ですが、最近、企業からお金をもらってホワイトリストに追加するという動きをAdblockが見せ始め、デフォルト設定で表示される広告が増え、さらに、「以前より動作が重くなった」という意見がちらほら聞こえ始めています。 GoogleやAmazonは広告を消す拡張機能「AdBlock Plus」にお金を
Velocity.js
Overview Velocity is an animation engine with the same API as jQuery's $.animate(). It works with and without jQuery. It's incredibly fast, and it features color animation, transforms, loops, easings, SVG support, and scrolling. It is the best of jQuery and CSS transitions combined. Download Download Velocity, include it on your page, and replace all instances of jQuery's $.animate() with $.veloci
WordPress管理画面でDB Cache Reloadedエラーが出た時の対処法 - cocowa
WordPressがインストールされているWebサイトやブログの表示速度を早くするために便利なのが、キャッシュプラグインです。 そのうちの1つである、DB Cache Reloaded Fixが非常にお手軽に導入できるので、気に入っています。 ただ、DB Cache Reloaded Fixプラグインを使っていると、時々こんなエラーが表示されます。 ここに表示されているメッセージは以下のとおりです。 DB Cache Reloaded エラー: DBモジュール(wpdbクラス)はロードされませんでした。オプションページでキャッシュを無効にし (忘れずに設定を保存してください)、ふたたび有効にしてみてください。それでも解決しない場合は、手動アップグレードするためにFAQをチェックしてみてください。 なんか、赤い画面が出て怖いと思っている方、安心してください。すぐに解決できます。 赤いエラーを
WordPressを高速化するプラグイン「DB Cache Reloaded Fix」 | TechMemo
Tweet TweetWordPressでサイトを作っていると重い！と感じることありますよね。重くなる要因の一つに、データベースへのクエリ（データベースへアクセスする命令)があります。 WordPressは動的にページを作成するときに、頻繁にデータベースにアクセスします。クエリ数が多いと、データベースへの負荷が大きくなりパフォーマンスに影響します。 データベースへのクエリ数を抑えるのに役立つのが「DB Cache Reloaded Fix」です。 DB Cache Reloaded Fix は、データベースのクエリの出力結果など、 データベースとのやり取りをキャッシュしてクエリ数を減らす効果があります。データベースとのクエリ数は減りますが、動作自体は動的ページの様に動作します。クエリ数を減らしますので、記事が多くなってきたり、アクセス数が集中したときにパフォーマンスの低下を抑える効果がある
Echo.js, simple JavaScript image lazy loading - Ultimate Courses
I’m currently working on a project for Intel’s HTML5 Hub in which I require some image lazy-loading for an HTML5 showcase piece that’s high in image content. After a quick Google search for an existing lazy-load solution there was yet another mass of outdated scripts or jQuery plugins that were too time consuming to search through or modify for the project - so I ended up writing my own. Echo.js i
事前レンダリングでウェブページの表示時間を高速化
[対象: 上級] 事前レンダリングと呼ぶ技術を使って、ウェブページの表示時間を高速化する方法をこの記事では解説します。 事前レンダリングとは 事前レンダリング (Prerendering)とは、その名のとおり、ページの読み込み（正確にはレンダリング）を前もって実行する仕組みです。 Google検索で採用されている「インスタントページ」には事前レンダリングが使われています。 下のキャプチャは、Googleで「Amazon」を検索したときのChromeのタスクの状況をタスクマネージャで確認したものです。 「事前レンダリング」でAmazon.co.jpが出ています。 「Amazon」で検索したユーザーはかなり高い確率で（1位に出てきた）Amazonのホームページをクリックするはずです。 Chromeは先回りして、ユーザーがクリックしなくてもAmazonのホームページを取得および描画、つまりレンダ
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
初心者ブロガー指南：Naifix-起業バカ
bbfriend.net
ブログが壊れたのは WordPress プラグイン DB Cache Reloaded Fix が原因でした。…と垢BANの愉快な仲間たち。
IDEA * IDEA
