1. HOME
  2. Blog
  3. コラム
  4. 穂苅智哉の「真剣!KUSANAGI語り場」

更新情報

NEWS

穂苅智哉の「真剣!KUSANAGI語り場」

Webフロントエンド高速化 画像の最適化(穂苅智哉氏)

1.はじめに こんにちは!プライム・ストラテジーでマーケッターをしている、穂苅智哉と申します。 まだまだ気温が夏みたいで汗かきながら仕事に向かっています。 前回は、KUSANAGIの新たなステージであるDocker正式対応についてお伝えをしてきました。Dockerの大きなメリットとして、生産性の向上というキーワードがあります。そのDockerに超高速なKUSANAGIが加われば鬼に金棒です。 そんな前回のコラム、気になる方はこちらからご覧ください! ▶ 穂苅智哉の「真剣!KUSANAGI語り場」 さて、今回はWebサイトの画像最適化を少し深堀って見ていきます。 画像サイズは激減し軽くなるのに、人間の目からはほぼ違いがわからない画像を作ってみます! プライム・ストラテジーでは、Webサイトの表示を高速化させることでユーザー体験を向上させ、結果としてWebサイト運営側のコンバージョン向上や収益向上に貢献できる技術、WEXAL® Page Speed Technologyを開発しました。 Page Speed Technologyについては、前々回のコラムで取り上げています。こちらも併せてご覧いただくとこれからのお話がよりわかりやすくなると思います。 ▶ 【モバイル高速化技術】KUSANAGI環境で実現できるモバイル表示高速化技術 “WEXAL® Page Speed Technology”(穂苅智哉氏) 2.画像サイズ 今回は、僕の実家の犬の画像を使って画像最適化を行ってみようと思います。 ① 現状を把握 オリジナルのサイズを確認してみます。画像サイズが1478px × 1108px でデータ量が131kでした。 この画像がどこまで最適化されてどのように見えるのかを確認します。 ② リサイズ コマンドを使って、サイズ1478px × 1108pxの画像を1280px×960pxにリサイズしてみました。すると、131kあったデータ量が0.8kまで下がりました! ブラウザで確認してみましたが、見た目も荒くなっているなどの大きな変化はありませんでしたのでリサイズは有効ということになります。 元の画像をブラウザで確認 リサイズをした画像をブラウザで確認 ③ 次世代フォーマット WebPへの変換 WebPとはGoogleが開発している次世代の画像フォーマットのことです。次世代フォーマットの利用については、Googleの提供するPageSpeed Insightsの項目にもなっていますので重要です。 WebPを利用するには、cwebpが必要なため入っていない場合はインストールしておきます。 それでは、WebP化を行い、画像ファイル名をresize-my-dog.webpとして最適化をします。 cwebpコマンド(Compress WebP)を行います。拡張子は、.webpになります。 最適化された画像サイズを見てみると、0.4kになりました。 サイズはリサイズしたサイズと同じですので、リサイズした画像からすると同じサイズでデータ量が半分になったことになります。 こちらもブラウザで確認してみます。オリジナル画像と比較するとどうでしょう。 「この画像、粗くない?」と思われることはあまりないのではないでしょうか。 以上で画像をリサイズし、次世代フォーマット化することができました。 ただしこれを画像の1枚1枚にやっていくのは現実的ではありません。 そこで、WEXAL® Page Speed Technologyの機能を利用することで解消可能です。興味をお持ちの方は、ぜひこちらをご覧ください。 ▶ WEXAL® Page Speed Technology 3.おわりに 今回は、Webサイトの表示最適化の例として画像のリサイズと次世代フォーマットへの変換について紹介してきました。 PageSpeed Insightsについては改善すべき項目も提示してくれるため何をすればいいのかは明確ですが、実際にその項目を解消できるかどうかは別の問題です。今回は画像の話でしたが、不要なCSSやJavaScriptの削減なども必要ですし継続的に運用に当て込んでこの最適化を続けていく必要があります。 このコラムを掲載いただいているデジタル・ヒュージ・テクノロジー様はWordPressサイトのKUSANAGI化やサイト保守はもちろん、OracleDBからPostgreSQLのマイグレーションサービスやパフォーマンス保障マネージドサービスの提供も可能です。興味がある方はぜひご相談ください! ※PostgreSQLパフォーマンス保証マネージドサービスについては以下をご覧ください。 ▶ PostgreSQLパフォーマンス保証マネージドサービス ※KUSANAGIについては以下をご覧ください。 ▶ KUSANAGI紹介ページ それでは、また次回をお楽しみに!!

コラム

KUSANAGI がDockerに正式対応!を解説!(穂苅智哉氏)

1.はじめに こんにちは!プライム・ストラテジーでマーケッターをしている、穂苅智哉と申します。 前回は、プライム・ストラテジーで開発した新しいモバイルサイト高速化技術 ”WEXAL® Page Speed Technology” について書いてきました。 ユーザーの使うギガ数はますます増える中、5Gなども実導入が始まろうとしています。そんな中で今重要なのはモバイルサイトの表示高速化です。 ”WEXAL® Page Speed Technology” を利用することで、対応が難しい バックエンド×ネットワーク×フロントエンドの3つの最適化が実現し、ユーザーフレンドリーなサイトを提供することが可能になります。 そんな前回のコラムはこちらからご覧ください! ▶ 【モバイル高速化技術】KUSANAGI環境で実現できるモバイル表示高速化技術 “WEXAL® Page Speed Technology”(穂苅智哉氏) さて、今回も必見のテーマです! KUSANAGIに戻ります。 なんと待望のKUSANAGIのDocker正式版がリリースされました。Docker?何がすごいの?という基本のところから紹介していきます。 ▶ 「KUSANAGI Runs on Docker」正規版を提供開始(ニュースリリース) 2.Dockerとは まずDockerについてお話していきます。 Dockerは、Docker社が2013年から提供しているコンテナ型の仮想環境を構築、配布、実行するためのプラットフォームです。 もともとは開発者やIT部門をターゲットにアプリケーションやOSの開発・配備を行うための基盤ソフトウェアとして開発されました。 Docker社のサイトにも「Dockerとは?」というページがありますのでご覧下さい。 ▶ Why Docker? このDockerですがLinuxのコンテナ技術を使っています。よく仮想マシン(ハイパーバイザー型)と比較されるのですが、仕組みは異なります。 仮想マシンといえば、VirtualBoxやAWSのなどのクラウドサーバーが有名ですがこれは、ホストマシン(WindowsやMacOSなど)上でハイパーバイザーという技術を利用しゲストOS(Windows、MacOS、LinuxなどすきなOS)を動かし、その上でミドルウェアなどを稼働させる仕組みです。 一方、コンテナ技術はホストマシンのカーネル(OSの中心となるソフトウェア)を利用し、プロセスやユーザなどを隔離することで、まるで別のマシンが動いているかのように稼働させる仕組みです。 メリットとしては、リソースの消費量が少なく、軽量、高速に起動や停止などが可能なことです。 この仕組み、なかなか理解するのが難しいのですが、今までKUSANAGIは「仮想マシンでの稼働」を提供してきました。今回は今までとは別の「コンテナ技術」を利用してもKUSANAGIを正式版として利用することが可能になりましたので、技術者の方、普段Dockerを使っている方にとっては超高速環境を簡単に利用いただけるようになりました。 IDC Japanが2019年7月に発表したデータによると、Dockerコンテナを本番環境で利用している企業は9.2%、ステージングや開発環境で利用している企業は16.7%だそうです。 まだ、日本では検証段階にとどまっており、本番での利用についてはもう少し時間がかかりそうです。 ▶ 日本企業のDockerコンテナー本番導入率は1割未満–IDC調べ ただし、Dockerはビジネスにおけるシステムの本番環境でも有益です。先程紹介した「Why Docker?」ページの中で、ビジネスに対して貢献していることが6つ紹介されています。 新しいサービスの市場投入を3倍早く 開発者の生産性を13倍向上 デプロイの時間を60%向上 ITインフラコストを40%削減 IT運用効率を40%向上 問題解決までの時間を72%削減 今後本番環境への導入が進んでくるとよりDockerの恩恵を受けて効率化が進んでいくでしょう。これは、働き方などを含めて時代に即しているサービスのため拡大シていくことでしょう。 ちなみに、大手クラウドベンダーでは、Dockerやコンテナに関するページやサービスは充実していますので参考にしてください。 Azure:Azure 上の Docker AWS:Docker とは Alibaba:Container Service GCP:GOOGLE のコンテナ 3.KUSANAGI Runs on Docker そんなDockerの恩恵+KUSANAGIの超高速という環境を実現したのがKUSANAGI Runs on...

コラム

【モバイル高速化技術】KUSANAGI環境で実現できるモバイル表示高速化技術 “WEXAL® Page Speed Technology”(穂苅智哉氏)

1.はじめに こんにちは!プライム・ストラテジーでマーケッターをしている、穂苅智哉と申します。 前回は、KUSANAGIで利用できるクラウドサーバーの種類や特徴、クラウド業界の現状について書いてきました。 KUSANAGIは対応可能なプラットフォームがどんどん増えていますが、世界シェアで見ると、アジア圏以外は1位がAWS、2位がAzureという世界シェアです。 Azureは現在伸びがAWSよりも高く、Office365という強力なサービスも持っておりさらに様々な企業との連携をすることでシェアを伸ばしています。今後、どうなっていくのか、要注目です。 そんな前回のコラムはこちらからご覧ください! ▶ 【クラウドサーバーの特徴】KUSANAGIで利用できるパブリッククラウドの現状とどこを選んだらいいのか?(穂苅智哉氏) さて、今回は必見のテーマです!プライム・ストラテジーの新技術であり、最近のモバイルファースト時代に求められている、『WEXAL® Page Speed Technology』についてです。 2.モバイルファースト時代に求められるUX この『WEXAL® Page Speed Technology』は、まさに今どきのモバイルファースト時代に求められるUX(ユーザーエクスペリエンス)を求めて開発されました。 今やメディアやネットショッピングはPCではなくほぼスマートフォンで閲覧され、購入される時代です。日本においては20代、30代のスマートフォン利用率は総務省発表の「平成30年版情報通信白書」によると90%を超え、13歳〜19歳のティーンエージャー、40代でも80%以上の利用率です。現在のところこの勢いが無くなる要素が無いため、今後もスマートフォンによるWebサイト、サービス利用は増えてくるでしょう。 (出典)平成30年版情報通信白書(総務省) その中で、やはりユーザーが気になるのはどれだけのレスポンス速度でサイトが表示されるのかというところです。 Googleもモバイルファーストインデックスを開始して、PCサイトではなくモバイルサイトを検索ランキングの基準にしていますし、普段スマートフォンを利用していて一番イライラするところではないでしょうか。 こういったモバイルファースト時代にはいかにユーザーが離脱したいと思わせないような表示速度を実現する必要がどのサイトにもあります。結果としてUXの向上、コンバージョンの増加とつながっていくからです。 3.『WEXAL® Page Speed Technology』技術 『WEXAL® Page Speed Technology』という技術は、3つの最適化から成り立っています。バックエンド最適化、ネットワーク最適化、フロントエンド最適化です。この3つが三位一体となることで、ユーザーも納得のページスピードになります。 この『WEXAL® Page Speed Technology』エンジンは、KUSANAGIのPremium Editionに搭載され、利用することができるようになる予定です。今回まで取り上げてきたKUSANAGIの高速化、セキュリティの特徴をベースにそれをエンハンスする形でバックエンド、ネットワーク、フロントエンドの最適化を行うことによりモバイルファーストのページを実現します。また、この技術は既存のアプリケーションのソースコードには原則一切の改変を加えないという特徴があるため、どの利用者様にも安心して使っていただくことが可能です。 4.『WEXAL® Page Speed Technology』を見る 『WEXAL® Page Speed Technology』については、指標としてGoogleが提供しているPageSpeed Insightsがわかりやすいです。 最適化処理を加えることで、PageSpeed Insightsの評価が向上するからです。 以下は、 1.KUSANAGIを導入する前 2.KUSANAGIを導入した後 3.KUSANAGIを導入しWEXAL® Page Speed Technology も導入した後 の3つのPageSpeed Insightsのスコアを比較したものです。わかりやすくスコアに出ているのが確認できます。 (出典)WEXAL® モバイル表示高速化サービス(プライム・ストラテジー) サイトは千差万別です。様々なタグを仕込んでいたり外部リソースを取得していたり広告があったりですのでどの程度改善するのかをお伝えするのは難しいのですが、点数はともかく概ね上の図のような流れでスコアがアップするようにはなるかと思います。 ということは、SEOなどにもいい影響が出るということになります。 5.おわりに 今回は、プライム・ストラテジーの新技術『WEXAL® Page Speed Technology』を紹介してきました。今どきのUXのために、モバイルサイトの表示速度をいかにして向上させるかという部分を突き詰めた技術です。この技術を用いて自社のWebサイトの表示高速化をKUSANAGIとともに実現していき、サイトのコンバージョンが上がることができればと思います。また、この技術を用いたサービス『WEXAL® モバイル表示高速化サービス』で定期的にスコアや速度の維持を行うことも出来ます。 Webのコンテンツはますますリッチに、容量が大きくなってきます。そんな中でユーザーに見てもらうための施策として表示高速化は必須です。これを機に一度モバイルサイトの表示速度について考えるきっかけになれたら嬉しいです。 今回紹介したWEXAL® Page Speed TechnologyもしくはKUSANAGIにご興味をお持ちいただいた方はぜひご相談いただければと思います! このコラムを掲載いただいているデジタル・ヒュージ・テクノロジー様はWordPressサイトのKUSANAGI化やサイト保守はもちろん、OracleDBからPostgreSQLのマイグレーションサービスやパフォーマンス保障マネージドサービスの提供も可能です。興味がある方はぜひご相談ください! ※PostgreSQLパフォーマンス保証マネージドサービスについては以下をご覧ください。 ▶...

コラム

【クラウドサーバーの特徴】KUSANAGIで利用できるパブリッククラウドの現状とどこを選んだらいいのか?(穂苅智哉氏)

1.はじめに こんにちは!プライム・ストラテジーでマーケッターをしている、穂苅智哉と申します。 前回は、KUSANAGIで使用しているCentOSとPHPについて書いてきました。 CentOSの最新版、CentOS7をyumでインストールするとデフォルトがPHP5.4系になります。WordPress5.2以降はPHPのバージョンが5.6.20以上サポートとなりますのでこの部分も留意するひつようがあるかと思います。 そんな前回のコラムはこちらからご覧ください! ▶ 第18回 CentOS7のPHPとWordPress さて、今回はKUSANAGIで利用できるクラウドサーバーの話をしていきます。 2.クラウド業界は全体的に好調 強者にシェアが集まってきた ▶ The Leading Cloud Providers Increase Their Market Share Again in the Third Quarter(Synergy Research Group) まず現在のクラウド業界から見てみます。 このデータは、Synergy Research Groupの2018年 第3クウォーターのクラウドマーケットシェア(IaaS、PaaS、プライベートクラウド)調査ですが現在はAmazon(AWS)がTOPを維持しています。 ただ、Microsoftに関しては、現在AmazonよりもMarket Share Gain(マーケットシェアの拡大)が2%以上伸びているのがわかります。 つまりこのまま伸びていけば、AWSの地位を脅かすのがMicrosoftということになります。 また、Alibabaは中国に圧倒的なアドバンテージを持っている企業です。中国の人口現在約14億人というマーケットにおいてのアドバンテージはかなり強力ですし、周辺のアジアにも強みがあります。 以下のグラフを御覧ください。これは、地域別のパブリッククラウドの順位を示しています。すべての地域でAWSがリーダーなのですが、APAC Region を見てみましょう。 APACは、Asia-Pacificのことですので、ここを見ると、他の地域と異なっているところがあります。それは、2位がMicrosoftではなくAlibabaである点です。現在中国、アジアへのビジネスを行う際のクラウドの選択しとしては圧倒的に1位なので今後APAC RegionのLeaderがAlibabaになる可能性も十分にあると思います。 ▶ No Change at the Top as AWS Remains the Leading Public Cloud Provider in all Regions 3.主要クラウド3つの特徴 今回は、パブリッククラウドの上位3社に絞って、紹介をしていきます。 ① AWS まずは圧倒的No.1のAWSです。 AWSは2004年からサービス提供をしているクラウドのデファクトスタンダードのような状態です。 世界中の21の地理的リージョンにある 66 のアベイラビリティーゾーンで運用され、さらに 4 つのリージョン (バーレーン、ケープタウン、ジャカルタ、ミラノ) と 12 のアベイラビリティーゾーンが追加される予定とのことですので、コンピューティングだけでなくブロックチェーンやIoT、ビックデータなど非常に多様な機能を追加、ブラッシュアップしているクラウドです。 ▶...

コラム

CentOS7のPHPとWordPress(穂苅智也氏)

1.はじめに こんにちは! プライム・ストラテジーでマーケッターをしている、穂苅智哉と申します。 前回は、WordPressがPHP5.2から5.5までのサポートを終了させる発表を行ったことによる紹介と解説、対処法について書いてきました。 この話題はニュースにはなりましたが、現在でもPHP5.x系を使っている割合はまだまだ多く、世界のサイトが完全に安全なPHPのバージョンにできるまでにはまだまだ時間がかかりそうです。 そんな前回のコラムはこちらからご覧ください! ▶第17回【WordPress セキュリティ】WordPressがPHP5.2から5.5までのサポートを終了させるを読み解く さて、今回は引き続きPHPの話ですが、切り口を変えてみます。OSと絡めて考えていきたいと思っています。 日本で一般的に利用されているWordPressのOSは、CentOSです。現在はCentOS7が最新版として、多くのWordPressで利用されていますが、そのCentOS7とPHPの関連性はご存知でしょうか。 2.KUSANAGIのOS まずは、プライム・ストラテジーで開発している超高速WordPress仮想環境 KUSANAGI を見てみます。 KUSANAGIは、現在以下のような構成が提供されています。 ・WordPress 最新版(KUSANAGI 専用プラグイン同梱) ・CentOS 7.6 ・Nginx 1.17.0 ・Apache 2.4 ・HHVM 3.19.2 ・PHP7.3.5 (php-fpm, Cli) ・PHP5.6.x (php-fpm, Cli) ・MariaDB-server 10.1.40 (一部省略) CentOSは7.6、PHPは現在最新の7.3系が利用可能です。 3.CentOSとPHPとWordPress ▶The CentOS Project CentOSは、Red Hat Enterprise Linux(RHEL)という商用向けのLinuxOSの派生版で、無料で利用できるOSのことです。RHELはサポートがしっかりしており、その分有償での提供がされていますが、CentOSはRHELのクローンOSとして無償で提供されています。 シェアはというと、安定して20%弱を維持しています。日本では主流なCentOSですが、海外ではUbuntuという別のLinux派生のOSが主流です。 ▶Historical trends in the usage of Linux subcategories for websites 意外と知らないかもしれませんが、日本で有名なCentOSの最新版CentOS7を単純にyumでインストールしても、PHPは5.4系になります。さらにWordPress5.2のアップデートに関連して実施された、WordPressの必須PHPバージョンが、PHP5.6.20以降となりました。これは、大きな動きとして捉えられましたが、このような情報を常に追いかけていくのはかなり大変なことではないでしょうか。 ▶PHP 最低必須バージョンの変更 PHPのバージョンの話は、以前のコラムでも書いておりますのでご参照ください。 ▶【WordPress・PHP】あなたのPHPのバージョンは大丈夫? なぜこうなっているのかというと、CentOSのWikiに以下のような記述がありました。 you will generally NOT find the very latest versions of various packages included...

コラム

穂苅智哉氏【WordPress セキュリティ】WordPressがPHP5.2から5.5までのサポートを終了させるを読み解く

1.はじめに こんにちは!プライム・ストラテジーでコンサルタントをしている、穂苅智哉と申します。 前回は、高速化の前段階、まず自分の関係しているWebサイトについてしっかり知るべきということで、パフォーマンスの計測ツールについて書いてきました。 売上を○万円達成するためGoogle PageSpeed Insightsの点数をモバイルで70点まで上げるなど、結構この計測ツールでのランクや点数をKPIにすることもあると思うので、重要な指標となってくるのではないでしょうか。 そんなWebサイト測定ツールコラムはこちらからご覧ください! 第16回【WordPress 高速化】WordPressのパフォーマンス測定ツールで自分のサイトを測定しよう さて、今回は最近WordPressについて話題になりました「WordPressがPHP5.2からPHP5.5までのサポートを終了させる」ということについて書いていきます。 WordPressを使っている人・企業は多いと思いますがPHPのバージョンはどうでしょう。 2.WordPressの発表を見てみる 2019年3月20日に発表された内容によると、このようになります。 Message: PHP: End official support for PHP5.2 -> 5.5 For the time being, we are ok with failures rather than not running the tests at all on these old versions. We will make decisions on fixes on a case by case basis. (引用元)https://core.trac.wordpress.org/changeset/44950 PHP5.2からPHP5.5までのバージョンではWordPressのオフィシャルサポートを終了するということです。 ただし、記述によるとケースバイケースで修正をするかどうかを決定すると書いてあります。 今後のWordPressを利用するには、PHPの5.6が最低限のバージョンになってしまうということです。 また、最新のPHP事情を見てみましょう。 W3Techによると、まずはPHPを利用しているウェブサイトは全体の79%だそうです。その中でPHPのVersion 5 の占める割合は54.9%もあることがわかります。 また、PHPのVersion 5と言ってもそこからさらに5.1や5.2のようにバージョンが分かれています。 その割合が以下です。 今回対象になっているPHPのバージョンがつまりはPHP5.5以下がサポート外になるので、そこに絞って見てみると実に55.6%になりました。(less than 0.1% は数が少ないため計算には入れていません。) この数値、放置している個人のサイトなども多く入っているのかも知れませんが、正直かなり多いです。 PHP自体のサポートバージョンを見ると、PHPのVersion 5系はこの2019年3月末現在すべてEnd of...

Web更新

穂苅智哉氏の「真剣!KUSANAGI語り場」第16回【WordPress 高速化】WordPressのパフォーマンス測定ツールで自分のサイトを測定しよう

1.はじめに こんにちは。プライム・ストラテジーでコンサルタントをしている、穂苅智哉と申します。 前回は、知識として必須なAMPとFacebook Instant Articlesの概要について書いてきました。 AMPは近年対策を行う企業が増えてきており、注目している方も多いのではないでしょうか。WordPressでは基本的な部分としては専用プラグインで実装できてしまうこと、また利用事例が増えてきていることから、「モバイルの高速化といえば」という対策方法になってきています。 そんなAMPとFacebook Instant Articlesのモバイルサイト高速化コラムはこちらからご覧ください! 【WordPress 高速化】WordPress高速化の肝はモバイル高速化!AMPとInstant Articlesで高速化!(穂苅智哉の真剣!KUSANAGI語り場) さて、今回も高速化の話をします。一歩下がって客観的に自分の関係するWebサイトについての把握とよく言われている数値と比較してどうなのか?という話です。 2.Webサイトを計測してみよう Webサイトの高速化というのは、よく言われる話ですよね。ただ、「高速化」と一口に言ってもなかなか幅広いものです。 そこで、いくつかあるWebサイトの測定ツールを使って計測をしてみましょう。 測定対象は私のブログ『新卒IT文系セールスのBLOG』( https://webtomoblg.net/ )で行いました。 Google PageSpeed Insights( https://developers.google.com/speed/pagespeed/insights/ ) ページスピード測定ツールとしては最も有名です。 モバイルとPCのそれぞれのパフォーマンスを計測し、最適化についての提案も表示されるので、この結果をもとに施策を練ることも重要となります。 Pingdom( https://tools.pingdom.com/ ) こちらも有名な測定ツールです。スウェーデンの会社のツールで、スコアやサイトのどこにパフォーマンスを阻害する問題があるのかを確認することができます。WordPressサイトの計測の際によく使われているようでGoogle PageSpeed Insights と合わせて計測してみると良いかも知れません。 WebPagetest( https://www.webpagetest.org/ ) AOL社が開発したWebページのパフォーマンステスト用ツールです。かなりいろいろな分析をしてくれるため、利用するのも良いと思います。 このように、3つ紹介してきましたが実はこのサイトは、WordPressの公式ドキュメントとなる、Codex日本語版『WordPressの最適化』( https://wpdocs.osdn.jp/WordPress_%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96 )であげられている測定ツールですので、このページをご覧いただくのも有益だと思います。 3.サイト表示速度と離脱率の関係 2018年2月の『Think with Google』のページ「Find out how you stack up to new industry benchmarks for mobile page speed」( https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ )によると、 スピードは収益 モバイルページのロード時間(パフォーマンス)に3秒かかってしまうと、53%のユーザーが離脱してしまう 現在モバイルページの読み込み時間が7秒短縮されたが、まだ15秒ほどかかっている 表示速度が1秒から3秒に落ちると、直帰率が32%向上してしまう 表示速度が1秒から5秒に落ちると、直帰率がなんと90%向上してしまう 表示速度が1秒から10秒に落ちると、直帰率がなんと123%向上してしまう ということですので、いかにサイト表示速度が離脱と関係しているか、そしてそこを改善することがWebサイトの価値を上げることになるかがわかります。 4.サイト表示速度を上げる ここまでで、計測ツールで計測してみたところ遅いという結果になったサイトをお持ちの方は、殆ど例外なく離脱の原因になっていることでしょう。そこで、サイトの表示速度を上げる施策を取ることになります。 WordPressですと、キャッシュプラグインを利用して速度向上を図ったり画像最適化のプラグインを入れたりするのではないでしょうか。 しかし、ここまで重要なサイト表示速度は根本の部分から対策をする価値があります。 それが、KUSANAGIです。 KUSANAGIは、パフォーマンスチューニングを施したLAMP環境のようなもので、CentOS 7 標準環境に比べてWordPressが​10-15倍高速に動作するという実行環境になります。また、先に申し上げたキャッシュや画像最適化についてもKUSANAGIの標準機能として実装がされていますので、管理画面からのコントロールも可能です。...

コラム

【WordPress】いよいよWordPress5.0リリース!Gutenberg主要機能解説!KUSANAGI環境で使ってみよう!(穂苅智哉の「真剣!KUSANAGI語り場」 )

1.はじめに こんにちは。プライム・ストラテジーでコンサルタントをしている、穂苅智哉と申します。前回は、KUSANAGIで利用できるデータベース『PostgreSQLとMariaDB』について書いてきました。 PostgreSQLは業務システム系のデータベースとして多く利用されているオープンソースのリレーショナル・データベース・マネジメント・システム(RDBMS)で、MariaDBはおなじみのWebサイトなどで多く利用されているRDBMSです。 従来業務システム系のデータベースはOracleなどが圧倒的でしたが、近年はPostgreSQLがどんどん増えてきています。 !前回のコラムはこちらからご覧ください! 【PotgreSQL・MariaDB】2つのデータベースとKUSANAGI さて、今回は2018年12月のWordPressで大きな話題となっている、『WordPress5.0リリース』の話をします。当然環境としてKUSANAGIも利用できます。実際に触ってみないとわからない部分もあると思いますので、この記事をお読みいただきKUSANAGIの環境でお試しいただけると嬉しいです。 2.WordPress5.0とは WordPress5.0は、WordPressの最新メジャーアップデートバージョンです。従来のメジャーアップデートはWordPress4.9系まででしたが、今回機能の大幅リニューアルも相まって5.0としてリリースされました。 最大の変更は、『Gutenbergエディタ』です。あの活版印刷で有名なグーテンベルクから名前をとっています。従来のコンテンツ入稿を革命するためという意味合いなのでしょう。 このGutenbergエディタ、皆さんは利用しましたか? 「まだ」 という方は、雰囲気が体験できるサイトがwordpress.orgにありますので、よろしければ利用してみてください。テキストや画像などご自由に触っていただけると感覚がわかります。 (参考)https://ja.wordpress.org/gutenberg/ 2−1.Gutenbergはブロックエディタ Gutenbergについて、特徴的な部分と簡単な使い方を説明していきます。 エンジニア向けにコードがどう、タグがどうという話ではなく、一般の記事投稿者(Web担やライターさん)向けになっていますのでご了承ください。 Gutenbergはブロックエディタです。 以下のような特徴を持っているブロックを自由に作り、組み立てて記事を構成していきます。 以下の例では、タイトルから段落、見出しとカバーブロックというのを利用して任意の画像にテキストを入力してみました。 管理画面のエディタ部分以外をみても従来のエディタとは違っていることがわかりますね。 ものすごく簡単ですし、このブロック単位で並びを自由に変更できますので、デフォルトで柔軟性も高いです。 ブロックごとの背景や文字の装飾も自由自在。これはもしかするとGutenbergと呼ぶにふさわしいエディタかもしれません。 WordPressによる記事入稿作業を行う際に今回はとても大きい変化なので、当然慣れが必要になります。ガラケーからスマートフォンに変わっていった数年前のように最初は徐々に、一定数浸透したあとは一気に広まるのでは無いでしょうか。 WordPressを利用して新規サイト、新規記事を作成する場合はこのGutenbergおすすめしたいと思います。 2−2.従来の記事をブロックエディタで管理する 今までWordPressの4.x系を利用し、通常のエディタを利用していた場合、Gutenbergになるとどうなるのでしょう? 例えばClassicエディタ(WordPressの4.x系の標準のエディタ)で作成した以下の記事をGutenbergで見てみましょう。 ↑Classicエディタで書いたコンテンツ例 すると、こんな形でGutenbergのクラシックブロックにすべて囲まれて管理される形になります。 ↑Classicエディタで書いたコンテンツをGutenbergエディタで見た例 面白いのが、クラシックブロックの右上の縦「…」のマークをクリックすると、「ブロックへ変換」という選択肢がありますので選択するとGutenbergに沿った形で要素ごとにブロックに自動的に変換されます。 もしかするとこの「ブロックへ変換」を安易に行ってしまうと従来のエディタで編集した記事が崩れる場合があるのかもしれませんが、こういった機能も存在しています。 2−3.その他機能 その他、いいなと思った標準機能は、エディタの左上にある「i」のボタンをクリックすると、その記事の構成や単語数、ブロック数が簡単に確認できるのです。 これを見れば、どのくらいの記事になっているのか、構成は問題ないかといった確認に非常に有益ではないかと思います。 4.終わりに 今回はWordPressの最新版、「WordPress5.0」について説明をしてきました。従来WordPressを利用している方は管理画面から「アップデート」をクリックするとWordPress5.0になってしまいます。ただし、機能的に大きなアップデートですので、厳重に調査を行った上でアップデートを行うなりリニューアルを行うなりを選択するのが良いかと思います。 エディターやライター、Web担からしてみると慣れの問題はあるにせよ従来のエディタより非常に使いやすくなるなと思いました。 また、WordPress5.0ではClassicエディタもプラグインの機能として利用できるのですが、以下にある通り、2021年でオフィシャルサポートが終了する予定なので、今後のサイトはGutenbergを見据えて行くのが自然の流れになるのではと思います。 The Classic Editor plugin will be officially supported until December 31, 2021. このコラムを掲載いただいているデジタル・ヒュージ・テクノロジー様はKUSANAGIの保守はもちろん、OracleDBからPostgreSQLのマイグレーションサービスやパフォーマンス保障マネージドサービスの提供も可能です。興味がある方はぜひご相談ください! ※PostgreSQLパフォーマンス保証マネージドサービスについては以下をご覧ください。 ※KUSANAGIについては以下をご覧ください。 それでは、また次回をお楽しみに!!

Web更新

穂苅智哉氏のコラム【PotgreSQL・MariaDB】2つのデータベースとKUSANAGI

1.はじめに こんにちは。 プライム・ストラテジーでコンサルタントをしている、穂苅智哉と申します。 前回は、『KUSANAGIの機能』について書いてきました。 KUSANAGIには、通常のLAMP環境では備わっていないKUSANAGI専用の機能があります。キャッシュ制御や画像の圧縮、自動アップデートなどの必要機能はあると本当に便利です!前回のコラムはこちらからご覧ください! 【KUSANAGI】WordPressの管理画面で実現!KUSANAGIの機能を使ってみよう!! さて、今回はKUSANAGIで利用できるデータベースの話をします。KUSANAGIには現在2つのデータベースがコマンド1つで利用ができてしまいます。 2.KUSANAGIの2つのデータベース KUSANAGIでは、以下のデータベースが利用できます。 MariaDB PostgreSQL MariaDBは、MySQLの派生で現在も開発されているオープンソースのリレーショナル・データベース・マネジメント・システム(RDBMS)です。 MySQLとほぼ同じで、データの移行もスムーズです。また、WordPressなどのCMS、LAMPとしても名高くオープンソースのデータベースの中では、シェアも一番高いものになります。 KUSANAGIでも、もともとはMariaDBのみが利用できるようになっていました。 KUSANAGIの環境で # kusanagi status と入力した際にMariaDBが使用されているとこの様になります。 PostgreSQLは、通称ポスグレとも呼ばれMariaDB同様に現在開発が活発なオープンソースのリレーショナル・データベース・マネジメント・システム(RDBMS)です。 「PostgreSQLって何?」 という方は、以前に私が書いたコラムも合わせてご覧ください。 第6回「PosgreSQLとKUSANAGI」 KUSANAGIの環境で # kusanagi status と入力した際にPostgreSQLが使用されているとこの様になります。 3.2つのデータベースの概況 現在、MariaDB、PostgreSQL双方ともシェアはどんどん伸びてきています。 以下は、DB-Engines Ranking – popularity ranking of relational DBMS による2018年11月時点の最新のDBMSのシェアを表したものです。 1位はOracleのデータベースになっています。商用のデータベースですが重要な情報を格納するデータベースということでその分の信頼性は絶大です。No.1であるのも頷けますが、このDB-Enginesが評価するScoreを見ると、大きくマイナスとなっています。一概にシェアが下がっているということではなく、こちらのMethodで独自に評価した結果です。検索された回数や、一般的な関心、求人情報の数といった指標での判断で評価をしているのですが、市場の概況を見るという意味では有益ではないかと思います。 一方のPostgreSQL、MariaDBともにScoreはかなりの上昇となっています。 4.PostgreSQLマイグレーション 私がコラムを寄稿させていただいている、このデジタル・ヒュージ・テクノロジー社では、近年業務システム系のデータベースでの導入が加速しているPostgreSQLへ、有料ライセンス・データベースからのマイグレーションを提供しています。DHT DBマイグレーションサービス、クラウド及びKUSANAGI for PostgreSQLを保守範囲としたワンストップマネージドサービスとして、PostgreSQLパフォーマンス保証マネージドサービスの提供も行っております。 「データベースマイグレーション」+「KUSANAGI環境(通常のPostgreSQLより6倍の高速化を実現!)」+「パフォーマンス保証」を大きなメリットとしています。 ※PostgreSQLパフォーマンス保証マネージドサービスについては以下をご覧ください。 https://kusanagi.dht-jpn.co.jp/solutions/kusanagi/postgresql_managed/ 4.終わりに 今回はKUSANAGIで利用できる2つのデータベースにフォーカスを当てて、業務系のサービスで多く使われるようになってきているPostgreSQLにも触れて書いてきました。 KUSANAGIの保守はもちろん、OracleDBからPostgreSQLのマイグレーションサービスやパフォーマンス保障マネージドサービスの提供も可能ですので、興味がある方はぜひご相談ください! ※PostgreSQLパフォーマンス保証マネージドサービスについては以下をご覧ください。 https://kusanagi.dht-jpn.co.jp/solutions/kusanagi/postgresql_managed/ ※KUSANAGIについては以下をご覧ください。 https://kusanagi.dht-jpn.co.jp/solutions/kusanagi/ それでは、また次回をお楽しみに!!

コラム

穂苅智哉氏のコラム「【KUSANAGI】WordPressの管理画面で実現!KUSANAGIの機能を使ってみよう!!」

1.はじめに こんにちは。 プライム・ストラテジーでコンサルタントをしている、穂苅智哉と申します。 前回は、『PHPのバージョン』について書いてきました。 WordPressのバージョンアップに比べたら軽視されがちな部分で、レンタルサーバーでも、クラウドでも、VPSでもPHPは5系を使っていてセキュリティサポートも終了しているような状態のサイトは現実問題ものすごく多いです。 前回のコラムはこちらからご覧ください! 【WordPress・PHP】あなたのPHPのバージョンは大丈夫? さて、今回はKUSANAGIの機能面の話をします。KUSANAGIの環境のWordPress管理画面には通常のLAMP環境にはない「KUSANAGI」メニューが表示されます。そこで、一体どんなことができるのか?という疑問に答えてみたいと思います。 2.WordPressの管理画面から実現できるKUSANAGIの機能 超高速仮想マシン『KUSANAGI』は、WordPressを始めとしてPHPやMySQLを使っているアプリケーションやRuby on Railsの実行環境として提供されています。特にWordPressでは、以下の機能がWordPressの管理画面から制御できます。 1. ページキャッシュの設定 2. デバイス切り替えの設定 3. 翻訳アクセラレーターの設定 4. パフォーマンス表示の設定 5. 画像最適化の設定 6. 置換の設定 7. 自動更新の設定 簡単に一つずつ見ていきましょう。 1.ページキャッシュの設定 ページキャッシュは、WordPressパフォーマンス向上のため、表示するHTMLを一時データとして保存し再利用する機能です。 KUSANAGIにはキャッシュとして、WordPress側のbcacheとNginx(Webサーバー)側のfcacheが存在しますが、この管理画面で制御するのはbcacheの方です。 ※bcacheはSSHでサーバーへログインし、rootユーザーで kusanagi bcache on とコマンドを実行することで使えるようになります。 デフォルトで値が入っていますが、それぞれのサイトの特性によってキャッシュの保持率を変更することが可能です。また、キャッシュを除外したいページの設定など細かいところの制御も可能です。また、bcacheの削除もここから可能です。 ※bcacheのキャッシュ削除は、管理画面へログインしていれば画面上部の管理バーの「cache clear」を押すだけで削除もできるようになりました。 2.デバイス切り替えの設定 デバイス切り替えとは、スマートフォンやタブレットなどのモバイル端末に対して表示するテーマを変更し、表示の最適化を図るための機能のことです。PCとモバイル用のサイトのテーマが異なる場合は、設定のチェックを外して上げる必要があります。近年はWebサイトをレスポンシブデザインで構築することが多いため、レスポンシブの場合はテーマ切り替えを停止にチェックを入れて上げる必要があります。 また、キャッシュ機能を有効にした場合でも、デバイスごとに正しくテーマを切り替えて表示させることが可能です。 3.翻訳アクセラレーターの設定 翻訳アクセラレーターとは、多言語に対応しているWordPress本体、プラグイン、テーマ等の翻訳を停止、もしくは翻訳データをキャッシュさせることで翻訳の読み込みを高速化し、表示までにかかる実行時間を短縮させる機能です。 WordPressはデフォルトの言語環境が英語であり、原文の英語を「アクセスごとに、辞書ファイルを元に生成したオブジェクトをリアルタイムに参照する」ことで翻訳処理を行っているのですが、この翻訳に際する速度劣化が大きくなることがあります。 そこで、一度翻訳処理のためのオブジェクトを生成すれば、それを再利用して翻訳処理を高速化しています。 Webサイトで、なぜか英語になっている部分があった場合はこの設定を変更してあげることが必要です。 ※タイプについては、KUSANAGIではデフォルトがAPCですので変更の必要はありません。 4.パフォーマンス表示の設定 パフォーマンス表示は、WordPressの管理画面にログインすると画面上部に出る管理バーにWordPressの実行速度、クエリ数を表示しているものです。表示のオンオフを切り替えることができます。 5.画像最適化の設定 画像最適化は、画像をアップロードする際にjpegファイルの画質調整、画像の最大幅の制限を行うことにより画像サイズを小さくし、表示の高速化を行うことができる設定です。有効化することでアップロードした画像に関しては最適化処理が行われます。 6.置換の設定 WordPressで表示する文字列を、指定したルールで動的に置き換えることが可能です。ルールは複数作成できます。 7.自動更新の設定 WordPress、プラグイン、テーマ、翻訳データの自動更新の有無を切り替えることが可能です。 デフォルトでは、翻訳とWordPressコアのマイナーだけが有効になっています。プラグインについては自動でアップデートしてしまうことによるリスクが大きいため可能であれば無効にしておいて手動で確認しながらアップデートが良いと思います。また、自動更新スケジュールを細かく設定できますので、以下のキャプチャでは毎週日曜日のAM 1:30 に1回自動更新のチェックが行われ、更新があった場合は自動でアップデートするということになります。 ※自動更新を有効にするためには、wp-config.php への設定が必要になります。 define(‘FTP_HOST’, ‘localhost’); define(‘FTP_USER’, ‘kusanagi’); define(‘FTP_PASS’, ‘kusanagiユーザーのパスワード’); 8.終わりに 今回は『KUSANAGI』自体にフォーカスを当てて、普段Web担当者やエンジニアが触るWordPressの管理画面でできるKUSANAGIの機能と設定について紹介しました。便利な機能がいくつもあったのではないでしょうか。KUSANAGIではないLAMP環境にはこういった機能がなく、ページ表示速度もKUSANAGIが大得意なところです。他を選ぶ理由がないなと思っていただけたら嬉しいです。 KUSANAGIそのもの、また、KUSANAGIを使ったトータル保守サポート(マネージドプラン)などでご興味がございましたら、まずはお話を聞かせていただけると幸いです! このコラムを掲載いただいているデジタル・ヒュージ・テクノロジーさんはKUSANAGIの保守やPostgreSQLのパフォーマンス保障マネージドサービスも可能です。興味がある方は以下をご覧ください。 ※PostgreSQLパフォーマンス保証マネージドサービスについては以下をご覧ください。 https://kusanagi.dht-jpn.co.jp/solutions/kusanagi/postgresql_managed/ ※KUSANAGIについては以下をご覧ください。 https://kusanagi.dht-jpn.co.jp/solutions/kusanagi/ ...

コラム