要素を簡単に振るわせる事が出来ます。
色々な振るわせ方があり楽しいです。特に「crazy shake」はもう壊れそうなくらい震えますｗ
実装も簡単ですね。
jQueryやphpなどの知識がなくても導入できるので、サイトのちょっとしたアクセントにいかがでしょうか。
「CSS」タグアーカイブ
やばすぎるアニメ「健全ロボダイミダラー」公式サイトをhtmlソース側から見てみたよ
皆さん「健全ロボダイミダラー」公式サイト、もうみましたか？
高速で目が点滅するまねきねこ画像、うっとうしくくるくる回るボタン類、破損した画像、良く分からない時間表示、ふりしきる雪アニメーション、マウストラッキング、鳴り止まないMIDI、統一感ゼロ、べた塗りの文字背景、蛍光色の文字。もう、もうお腹いっぱいです。
この公式サイトの見た目については、他のまとめサイトとかが詳しく解説してくれるでしょう。ともあれ、ある程度の年齢のネットユーザーにとってはとても懐かしい気持ちにさせてくれるサイトには間違いありません。こういう遊び心、好きです。
さてはて、見ためにも大変楽しいサイトなのですけれど、その中身はどうなってるのかが個人的には気になるので軽く見てみましょう。
ワオ・・・。
じゃ、javascriptオフにして見ちゃうもん。
だが先回りされていた！！ 定番ネタばかりしこみやがって。くそ・・・。
構造化されているのか確認してみよう。
構造化はグーグルにサイトをどのように認識させるのか、とても重要な要素の一つです。ちょっとサイトトップに戻って確認してみましょう。
Google Structured Data Testing Tool
最低元の構造化はちゃんとされています。良い感じです。
haed部分のメタデータを確認
<HEAD> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows"> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm"> <TITLE>TVアニメ「健全ロボ ダイミダラー」公式サイト</TITLE> <meta name="viewport" content="width=1100px, user-scalable=yes"> <meta name="keywords" content="ロボット,SF,ハルタ,エンターブレイン,エンブレ,なかま亜咲,ハイスクールD×D,おっぱい,前シッポ,ペンギン,MF,メディアファクトリー,ジェンコ,2014年,4月,アニメ,新番,新番組"> <meta name="Description" content="ハルタで好評連載中のSFロボット作品『健全ロボ ダイミダラー』が、TVアニメ「ハイスクールD×D」シリーズのスタッフたちの手によって2014年4月奇跡のTVアニメ化決定！誰も見たことのないスーパーロボット活劇が今、幕を開ける！"> <meta property="og:title" content="「健全ロボ ダイミダラー」"> <meta property="og:type" content="website"> <meta property="og:description" content="ハルタで好評連載中のSFロボット作品『健全ロボ ダイミダラー』が、TVアニメ「ハイスクールD×D」シリーズのスタッフたちの手によって2014年4月奇跡のTVアニメ化決定！誰も見たことのないスーパーロボット活劇が今、幕を開ける！"> <meta property="og:url" content="http://penguin-empire.com/"> <meta property="og:image" content="http://penguin-empire.com/images/ogp_midara.png"> <meta property="og:site_name" content="TVアニメ「健全ロボ ダイミダラー」公式サイト"> <meta property="og:locale" content="ja_JP">
まず、「IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows」とあることからホームページビルダー11で制作されている事がわかります。タグが大文字になるのはホームページビルダーの特徴の一つですね。
スマートフォン対応もされていますが、これはどちらかというと「このサイトの全体図を見せるため」と取れますね。例えスマートフォンで見たとしても「1100px」の幅表示で見せられるので文字が小さくて認識し辛いでしょう。
案の定グーグルさんにも怒られまくりです。素敵すぎます。
メタキーワードも大量にしこまれています。メタキーワードとは、そのページがどういったページになるのか文字通りキーワードを示す要素ですね。
「<meta name=”keywords” content=”ロボット,SF,ハルタ,エンターブレイン,エンブレ,なかま亜咲,ハイスクールD×D,おっぱい,前シッポ,ペンギン,MF,メディアファクトリー,ジェンコ,2014年,4月,アニメ,新番,新番組”>」おっぱいって何だよ・・・。基本的にメタキーワードは五個程度が良いとされていますがそのルールをぶち破ってます。
もっとも、現在のgoogleなどはメタキーワードは無視するとされているのでそれを知ってのお遊びだと思います。
必要最低元をはき違える超軽量CSS
<link rel="stylesheet" type="text/css" href="css/index.css">
お、CSSファイルがあるのでちょっと覗いてみます。
html{
cursor: crosshair;
background:url(/images/bg-daimidalar.jpg);
}
body{
width:960px;
margin:0 auto;
position:relative;
}
#container{
width:960px;
margin:0 auto;
position:relative;
}
a:link { color: #00FFFF !important; }
a:visited { color: #00FFFF !important; }
a:hover,
a:focus,
a:active { color: #FF2626 !important; }
p {
line-height:180%;
letter-spacing:1px;
}
.special p{
line-height:280%;
}
table{
line-height: 150%;
}
.special table{
line-height:180%;
letter-spacing:1px;
}
.ddimg{
padding:10px 10px 0 10px;
background-color:rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#AAFFFFFF,EndColorStr=#AAFFFFFF);
}
.ddimg2{
padding:0 5px;
background-color:rgba(255,255,255,0.6);
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#AAFFFFFF,EndColorStr=#AAFFFFFF);
}
えーっと、うん☆ これで全部です。いっそすがすがしい位ですが、み、ミニマルなサイトだとあるあるー☆ フォントスタイルすら指定されていないcssって私初めて見ました。
ちなみに私のサイトのCSSはこんな感じでかなり色々な記述がされています。これでも割と少ない方です。
そりゃ褒められるよね。
900行にも及ぶ直接記述のjavascriptが俺の行く手を阻む
びゃああああ！！ なんですかこの900行近いスクリプトの山はｗ
これが全部このページに直接刻み込まれています。当然のようにこれらを処理し終わるまで、この下に鎮座する本文は読み込まれません。
軽く調べてみたらホームページビルダーにある、画像などを簡単にぐりぐり動かすためのスクリプト記述機能によるものだそうです。
・・・・これか！！(思わずgif動画にしてしまう）（（そしてもう一つの方は華麗にスルーする））
当然のように要素へと直接スタイル記述
<BODY text="#ffffff" bgcolor="#FFFFFF" link="#ffff00" vlink="#999999" alink="#ff0000" onload="HpbVfxinit('Layer9','HpbVfx0301','G221',0,0,1,'Layer49','HpbVfx0401','I121',0,0,1,'Layer38','HpbVfx0401','I121',0,0,1,'Layer46','HpbVfx0401','I121',0,0,1,'Layer50','HpbVfx0401','I121',0,0,1);">
<DIV style="top : 383px;left : 517px;
position : absolute;
z-index : 34;
" id="Layer16"><IMG src="/images/anim2.gif" width="106" height="105" border="0"></DIV>
<DIV style="top : 3px;left : 688px;
position : absolute;
z-index : 62;
" id="Layer36"><IMG src="images/title.gif" width="358" height="210" border="0" alt="TVアニメ
「健全ロボ ダイミダラー」
公式サイトへ！！
"></DIV>
こりゃすげえ・・。スタイル記述とポジション設定の嵐です。個人的にびっくりなのはimgタグの中の「art」要素ですね。改行されてますよ。凄い。というよりart要素にちゃんと説明が入っているのも偉いですね。私は適当ですよここらへん。
出、出～ｗ 無意味机要素出力奴～ｗｗｗ
<TABLE border="0" class="ddimg2" width="735" height="72"> <TBODY> <TR> <TD height="53"> <TABLE border="0"> <TBODY> <TR> <TD align="center" height="23"><A href="/onair/"><IMG src="images/anim29995.gif" width="423" height="59" border="0" alt="4/5（土）より、TVアニメ放送開始！"></A></TD> <TD width="311" align="center" height="23"><A href="/onair/"><IMG src="images/anim22222.gif" width="281" height="60" border="0" alt="AT-X、チバテレビ、テレ玉、tvk"></A></TD> </TR> </TBODY> </TABLE> </TD> </TR> </TBODY> </TABLE>
そして出ました。テーブル要素です。もはや様式美ですね。というかこれ、テーブル要素の中にテーブル要素がありません？ どういう事なの？
漢はブラウザキャッシュなんて女々しい事はしない
画像ファイルやcssファイルは、ブラウザにキャッシュさせると次に読み込む時時間を短縮する事が出来ます。
しかし、ブラウザキャッシュは当然のように設定されていません。漢気溢れますね。
見出しタグなんて要らんのですよ
「h1～h6」タグなんて当然のようにありません。最高です。スッキリとしたサイト。頭が上がりません。
まとめ
ああ、面白かった。表から見た場合と内側から見た場合、一つで二度美味しいとても楽しいサイトでした。皆さんも是非ソースを見てこの素敵な趣向に一時の安らぎを感じてみてはいかがでしょうか。
なお、ここで指摘した事柄に対しては、SEOなどの影響がどれだけあるか未知数であるのと同時に、ここまで完璧に振り切ったサイトは知名度・話題性による流入を期待できるため何一つ参考になりません。ホームページビルダーを使用したからダメという記事ではないので誤解なさらないようにお願い致します。
皆さんも是非素敵なサイトを構築してくださいね！！ 本当、面白かった。
css – text-indent minus parameter – 二行目以降を字下げする
コードスニペット
#hogehoge p{
padding-left:4em;
text-indent:-4em;
}
全体をpaddingで右に寄せて、その後text-indentで一行目をマイナス方向に字下げする事で、二行目以降を字下げしているように見せる事ができる。
イレギュラーな使い方かもしれないが、シナリオや議事録などの特殊な文体では利用できる場合がある。
レスポンシブデザインのhtmlテンプレートの個人的厳選四つ
新しくサイトを立ち上げるときに一番大事だったりするサイトデザイン。その負担を軽減してくれるテンプレートは知っておくに越したことはありません。
ただ、個人的にビビッとくる物に出会える事は少ないため、厳選に厳選を重ねた俺まとめを残して置きます。
いつかこれを使ってサイト作るんだ・・・。
VINTAGE TEMPLATE
Demo Free Html5 and Css3 Templates | Html5xcss3.com
レトロな雰囲気がとてもオシャレ。落ち着きながらもとんがった雰囲気がとても良いですね。
ENGINERY
Demo Free Html5 and Css3 Templates | Html5xcss3.com
黄色が印象的なだけではなく、それぞれの要素がウインドウサイズに合わせてシームレスに変化します。メニューもまとまるわけではなく、そのままなところも良いですね。文字の後ろに文字が来たりして、細かな所にオシャレさを感じます。
SIMPLEX
SIMPLEX | Free Responsive Template by Dzyngiri
シンプルなデザインで横幅一杯に要素が並ぶのがとても壮観ですね。レスポンシブもとてもシンプルで印象があまり変わらないのが良いです。
prologue
右側に固定されたメニューがとても大きく見やすいです。スマフォでの閲覧時にもメニューがにゅっと出るアクションでとてもかわいらしいです。
jetpackの人気記事ウィジェットをカスタマイズする
jetpackはとても便利ですね。人気記事ウィジェットなんてのもあるのですから。
しかしこのウィジェット、cssがあまりイケてません。画像も小さいんですよね。というわけでカスタマイズしちゃいましょう。
画像の解像度を変更する
人気記事ウィジェットを司ってるのは「top-posts.php」です。「jetpack/modules/widgets/」に入っています。ここで画像の解像度が決定づけられています。
$get_image_options['avatar_size'] = 200;
} else {
$get_image_options['avatar_size'] = 40;
「40」で検索して出た部分を好みの数字に変更します。
CSSを除外する
jetpackに含まれるcssファイル「widget-grid-and-list.css」を直接編集しても見た目を変更する事が出来ますが、jetpackをアップデートしてしまうと、上書きされてしまいます。影響はできるだけ少なくありたいものですね。というわけでこのCSSファイルはそもそもwordpressで読み込まないように除外してしまいましょう。
add_action('wp_print_styles', 'deregister_styles', 100);
function deregister_styles() {
wp_deregister_style('widget-grid-and-list');
}
テーマのfunction.phpに上記コードを追加しましょう。これでcssファイルを読み込まなくなります。あとはテーマファイルの方のstyle.cssの方で見た目をカスタマイズしていきましょう！
完全保存版 この組み合わせで完璧！wordpress高速化プラグインまとめ
試行錯誤してきたwordpressの高速化プラグイン。その総括をしようかなと思います。
ああでもない、こうでもないと色々とやってきましたが、ようやく落ち着いたという感じです。
私が関わっているwordpressサイトにはこの組み合わせで運営されておりますよ。
キャッシュ系
その名の通りキャッシュ系プラグイン。これが無いと始まりませんね。
Head Cleaner
WordPress › Head Cleaner « WordPress Plugins
ソース整理といえばこれ。ヘッダー部分のお掃除をしてくれます。jsファイルやcssファイルを圧縮してキャッシュ化しておくことも可能。cssファイルを編集してもその都度新しいcssキャッシュファイルを作成してくれるので他キャッシュ系プラグインの影響でレイアウトが崩れる心配も無し。
本当助かってます。ありがとうございます。ふがふが。
WP Super Cache
WordPress › WP Super Cache « WordPress Plugins
wordpressの出力画面をhtmlに出力してそれを見せちゃうというページキャッシュプラグイン。動的な処理を常時やるようなサイトに向きませんが、このサイトのような普通のブログにはモアベターなプラグインとなります。
キャッシュの有効期限が切れても、切れたキャッシュをユーザーに提供しつつ新しいキャッシュを裏で生成したりと痒いところに手が届きます。設定が豊富で取っつきにくいかも知れませんが、その分細やかな設定が可能です。
wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説 » aoringo works
モバイルモードをオンにすれば、別にスマフォ用のキャッシュを作りそれを見せるようになります→wp super cacheのモバイルモードはスマフォ用のキャッシュファイルも生成してくれる！ » aoringo works
DB Cache Reloaded Fix
WordPress › DB Cache Reloaded Fix « WordPress Plugins
mysqlリクエストをキャッシュするプラグインです。私は検索ページをキャッシュしないようにしているので、そういう時はこいつが働くようになっています。wordpressはmysqlで全ての設定やデータを管理するので、このプラグインはもはや必須と言っていいでしょうね。
WP File Cache
WordPress › WP File Cache « WordPress Plugins
php関数の出力をキャッシュします。これが有ると無いとではかなり動きに差があります。
キャッシュプラグインの組み合わせの最適回答を求めて – aoringo works
DB Cache Reloaded Fix同様、静的キャッシュが動かない所で強力にサポートしてくれます。
001 Prime Strategy Translate Accelerator
WordPress › 001 Prime Strategy Translate Accelerator « WordPress Plugins
wordpressは多言語に対応しており、ページを表示する度にどの言語で表示するべきかをphpにより判定しております。
このプラグインはその部分をキャッシュ化する事で高速化を図りますよ。同様のプラグインはいくつかありますが、このプラグインは閲覧ページ、ログインページ、管理者ページでキャッシュを使うかどうか設定する事が出来ます！！ 管理者ページでキャッシュをオンにすると恐ろしい事になるので、私は閲覧ページのみオンにしております。
「MO cache」はもしかするとすさまじい容量を食うかもしれない。 » aoringo works
処理系
wordpressの各種処理を手助けするプラグインです。縁の下の力持ちといった所。
WP Hyper Response
WordPress › WP Hyper Response « WordPress Plugins
phpというのは、普通処理が全て終わってからクライアント側に送信しますが、このプラグインを利用すればphpの処理をリアルタイムでクライアントへと送信するようになります。
結果的に閲覧者はすぐに画面に反応があるのでストレスが減るというわけですね。
サーバーによっては利用できない場合があるので気をつけてくださいね。
画像系
ブログの画像はいつだって頭を悩ませる所ですね。ここでもプラグインは活躍します。
Imsanity
WordPress › Imsanity « WordPress Plugins
アップロードする画像を自動リサイズ！ 過去の画像もリサイズできるwordpressプラグイン「Imsanity」が素敵 » aoringo works
アップロードする画像を指定の解像度へリサイズしてくれるプラグインです。どんなに巨大な画像をあげようが、これで「1024px」等と設定しておけば、そのサイズになるのです！！ブログの解像度に合わせて設定しておけばなにより強力な速度対策になるでしょう。
過去にアップロードした画像を一括変換する機能もついてます。
EWWW Image Optimizer
アップロードされた画像を圧縮してくれるプラグイン。場合によっては50%以上も容量を抑える事が出来ます。また、アップロードされたpngをjpgに変換したりする機能もあります。至れり尽くせりですね。このプラグインも過去にアップロードした画像を圧縮する事が出来ます。
また、テーマファイルに含まれている画像も圧縮する事が出来るんですよ！！ ワザマエ！
Unveil Lazy Load
WordPress › Unveil Lazy Load « WordPress Plugins
画面に表示されるであろう画像だけを読み込むようにして、下へとスクロールを始めたら画像の読み込みを開始する「遅延ロード」をさせる事ができるプラグインです。
どれだけ写真を大量に載せようが、これでかなり負荷を減らすことが出来ますよ！
Jetpack by WordPress.com
WordPress › Jetpack by WordPress.com « WordPress Plugins
CDN設定って面倒くさいですよね・・・このプラグインを導入することによってボタン一個でCDNを導入する事が出来ます。他にも沢山の便利機能が一個に集約されているので、プラグインの節約にもなります。
まとめ
どうですかね。結構な数のプラグインを導入しています。
高速化といっても色々なプラグインの組み合わせ、設定があるのでとても大変だとは思いますが、是非参考にしてみてくださいね！
wp super cacheとhead cleanerを同時使用する場合の注意
wp super cache、head cleanerは、設定によっては競合してお互いにベストな状態を発揮できなくなります。
mod_rewrite モードだとブラウザキャッシュが上手くいかなくなる
mod_rewrite モードのキャッシュはとても強力ですが、wordpressの.htaccessに変更を加えるという点では注意が必要です。さらに、wp super cacheとhead cleanerは同じディレクトリにキャッシュファイルを保管しています。
head cleanerディレクトリ内のcssやjsファイルのブラウザキャッシュが上手く動かない場合があるのです。ウゴゴゴ。
というわけで、この二つのプラグインを導入している時は、head cleanerのディレクトリを別に移すのが無難な選択ですね。
方法は公式でもアナウンスされています→Head Cleaner を使用する場合の設定 | dogmap.jp
wp-config.phpに下記コードを追加しましょう。
define('HC_CACHE_DIR', 'minify');
これで「wp-content/minify」にキャッシュファイルを生成するようになります。
出来てます。ＯＫですね！
css – background9 – IE8以下でだけ背景色を変える
IE8以下はcssデザインが大きく崩れる。サポート外と割り切っても良いのだけれど、そうもいかないだろう。
background :#ffffff9;
最後の「9」がポイントとなっている。
chrome
IE6
IE7
wordpressのエディター表示をcssによって変更する方法
wordpressのエディタはとても便利ですが、エディタでの編集時と実際に投稿後ではデザインが変わる事が多々あります。
エディタとブログ上で適応されるcssが違うわけですね。というわけで、エディタ画面で利用できるcssを作りましょう。
テーマによっては既に用意されてる場合もある
「editor-style.css」というファイルがテーマフォルダに入ってますか？ 入っているなら既にエディター用のcssが設定済みです。直接このファイルの内容を変更していけばＯＫです。簡単ですね。
用意されてない場合
さて、入っていない場合です。この場合、cssファイルを追加してもwordpressは認識しません。function.phpにコードを一行追加しましょう。
add_editor_style('editor-style.css');
これでエディターでcssファイルを利用する事が出来ますよ！
キャッシュプラグイン組み合わせの最適回答を求めて「Quick Cache」「WP File Cache」「DB Cache Reloaded Fix」「WP Super Cache」
前提条件
wordpressのプラグインといえばキャッシュプラグイン。何よりもまずキャッシュ。それほど重要な要素です。こんかいは「Quick Cache」「WP File Cache」「DB Cache Reloaded Fix」「WP Super Cache」の四つのプラグインを利用してどの組み合わせがこのサイトに最適なのかを考えていきます。
「Head Cleaner」「WP Hyper Response」は導入済みとします。
「Head Cleaner」はヘッダーを整理、js/cssを動的出力・キャッシュ・圧縮・結合する事が出来るプラグインです。超お勧めです。→WordPress › Head Cleaner « WordPress Plugins
「WP Hyper Response」はphpの処理が全て終わってから結果を出力するのではなく、処理をしつつ出力もするようになります。こちらもお勧め→WordPress › WP Hyper Response « WordPress Plugins
各種プラグインおさらい
各種プラグインがどういったものなのか、軽くおさらいしましょう。どのキャッシュプラグインがどういう機能があるのか抑えていないと事故になります。
Quick Cache
ページそのものを静的ファイルに出力し、利用者がページを見る場合そのファイルを閲覧する事になります。デフォルトのwordpressでは毎回mysqlに問い合わせてphpが出力・整形を繰り返すので、この部分をスキップしよう。という物ですね。最近有料化しました。→WordPress › Quick Cache (Speed Without Compromise) « WordPress Plugins
WP Super Cache
quick cache同様の効果、というよりWP Super Cacheから派生したのがQuick Cacheです。設定の内容に違いがあります。→WordPress › WP Super Cache « WordPress Plugins
WP File Cache
オブジェクトキャッシュというもので、php関数の結果をキャッシュします。→WordPress › WP File Cache « WordPress Plugins
DB Cache Reloaded Fix
はmysqlからの出力結果をキャッシュし、mysqlへの問い合わせを減らしてくれます。→WordPress › DB Cache Reloaded Fix « WordPress Plugins
全体の流れ
つまりイメージとしては、ページを表示すると記事データを問い合わせの際に「DB Cache Reloaded Fix」を参照し、記事出力の際に「WP File Cache」を参照し、ページ全体の表示に「WP Super Cache・Quick Cache」が参照されるわけですね。それぞれ受け持つ部分が違うわけです。
検証
早速やっていきましょう。利用するクライアントはpale moonです。
「Quick Cache」「DB Cache Reloaded Fix」「WP File Cache」ON
全キャッシュ生成時
Quick Cacheキャッシュ生成時
生成にかかった時間は「<!– This Quick Cache file was built for ( ao-works.net/you-can-control-cache-wordpress-plugin-wp ) in 0.42555 seconds, on Mar 8th, 2014 at 1:28 am UTC. –>」とのことで、0.4秒ですね。
DB Cache Reloaded Fixキャッシュ生成時
Quick Cacheによるページキャッシュが動作しているので利用者に影響はありませんね。
WP File Cacheキャッシュ生成時
こちらも同じです。
「Quick Cache」「DB Cache Reloaded Fix」ON
mysqlキャッシュは検索などの部分で必要になるので必要だとして、WP File Cacheが無い状態での時間を見てみましょう。
Quick Cacheキャッシュ生成時
おお、かなり違いがありますね。quick cacheがキャッシュファイルを読み込むとき、php関数のキャッシュが無いので出力を待っているのでしょうか。
「<!– This Quick Cache file was built for ( ao-works.net/you-can-control-cache-wordpress-plugin-wp ) in 4.99642 seconds, on Mar 8th, 2014 at 1:22 am UTC. –>」とソースに表示されています。キャッシュ作成に4秒の時間がかかったようですね。
「WP Super Cache」「DB Cache Reloaded Fix」「WP File Cache」ON
WP Super Cacheは設定がかなり多いです。設定の詳細については→wordpressのキャッシュを制御できるプラグイン「WP Super Cache」の設定項目解説 » aoringo works
全キャッシュ生成時
quick cacheとあまり変わりませんね。
WP Super Cacheキャッシュ生成
こちらも時間的には同じくらい。
DB Cache Reloaded Fix キャッシュ生成時
WP File Cacheキャッシュ生成時
変わりませんね。
「WP Super Cache」「DB Cache Reloaded Fix」ON
WP Super Cacheキャッシュ生成時
ちょっと遅いですね・・・。
まとめ
どちらも性能的には同じくらいのパフォーマンスとなっているようです。WP Super Cacheは設定によっては裏でキャッシュを生成できたりもするので、今回の比較では遅めですがカスタマイズ次第でかなりのパフォーマンスを引き出せるかと思います。
有料でも簡単に設定できるquick cacheか、多岐に渡る詳細な設定が可能なWP Super Cacheか。検討の参考にしてみてくださいね。