ページ表示速度を超高速 WordPress AMI 網元

どうもです。どうしてページの表示速度上げなきゃいけないんでしょうか?

参考サイト

ページの表示速度は日本でもランキング要因になっていた 〜 Google社員に尋ねた11個の質問 at #SMX Advanced Seattle 2012

SEOとして有利に働く、閲覧している人にサクサク表示されるページを見てもらう事。でも最大のSEOはコンテンツの内容であります。

ページ表示速度が速すぎて悪いことはない。むしろ速くしたい、、

ページの作り方でも速度は多少上がるでしょうし、データベースやjqueryを使うとどんどん速度が落ちていきますのでサーバー自体を変えちゃいましょう。

巷ではVPSやAWSが流行っていますがなんてブログにもよく書かれていますので、始めたばかりのブログですがどうせ今後変えるなら、今からしておけってことでAWS(Amazon Web Services)で提供しているEC2(Elastic Compute Cloud)の1年無料枠で作りました。

VPS自体、なかなか敷居が高いのかなぁと思いますが、DigitalCubeさんが提供してくれているAMIを使うことで設置自体はかなり楽なんじゃないかと思います。ちょっとびっくりしました。

参考サイト

DigitalCubeさん

設置方法参考サイトは以下のサイトでかなり詳しくご説明頂いています。

高速にWordPressを動作させる網元を使うべくAWSにブログを移転しました。その手順を備忘録として残します。YATのBLOGさん

AWS EC2 + 網元でWordPressサイトを構築、Gatespace’s Blogさん

ページ速度を計測する

GoogleのPageSpeed Insights

CSS Sublime Text2とsass,scss,compassという選択肢

いやぁどうもです。CSS覚えるのは大変ですねぇ。codaのCSSエディタにかなり助けられながらCSSのプロパティを覚えていきました。やはりコピペとかでCSSを記述する方も多いのかなぁとも思います。

coda1,cssエディタ
写真はcodaのCSSエディタです。
coda2からはないですけども、、覚えてくると補完機能で案外いけますよね。
CSSのプロパティが不安な方はこのようなエディタをご使用されるとよいのではないでしょうか。(CSSプロパティを覚えてしまうまでのツールとして。)

問題はCSS3

  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #446c92), color-stop(100%, #34526f));
  background-image: -webkit-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -moz-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: -o-linear-gradient(#446c92 0%, #34526f 100%);
  background-image: linear-gradient(#446c92 0%, #34526f 100%);
  -webkit-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  -moz-box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8);
  box-shadow: 0px -2px 2px rgba(181, 181, 181, 0.8); }

例えば上のCSS(はしょってますが)colorの部分等を変更します?いやぁこれは、、これが1カ所であればまだなんとか、これがたくさんある場合は、、、
以前Sassをつかって見た時、ネストの印象が強く、Lessを使ってみた時、サイト毎の環境構築が大変そうな印象を持っていました。でも目的は上のベンダーフィックスの嵐をどう簡略化するのかでした。
compass公式サイト http://compass-style.org
google先生に訪ねてみる事、沢山のナイスで素敵な記事がいっぱいある。

上のCSSですが実際のscssファイルのセレクタには下の2行が入ってます。

@include gradient-top-lighten($color);
@include box-shadow(0px -2px 2px rgba(181,181,181,0.8));

$colorはなんだろう?
別のscssファイルに$color:#34526f; の記述でカラーをいつでも好きな色に変更することができます。
疑問なのは今使っているCSSの記述をscssの記述にすべてを変更しないといけないのか?等だと思いますがコンパイルする前のstyle.scssに編集中のstyle.cssの記述をそっくりコピーしてコンパイルしても中身は同じ記述のstyle.cssが吐き出されるのでscss,compassの機能を徐々に追加していっても何も問題ないです。
やれることが多い分、中々一気にってわけもいかないと思いますので。

続きを読む “CSS Sublime Text2とsass,scss,compassという選択肢”

WordPressを使用している理由

どうも、最近、吉高ヘアーから剛力ヘアーに変わった( @tw )です。(ヒゲあるんですけどねw)

さて、タイトルの件についてですが、簡単にページの更新をしたかったからなんです、、許してください。

ブログするなら、無料のブログツールとかあるんですけど、どっちがいいのよぉーとか検索するとたくさんありますが、、自分のブログに、利用させて頂くサービスの広告が嫌だった、、どうしても嫌だった。知らない広告があるのが嫌だった。記事を作成するのも貴重な時間がかかりますし、ページIDも貴重な財産です。

それを、無料サービスの管理下に置かれたくなかった

今後もよいと言われるツールを分析し、切り替えが出来る自分でいたいと思います。

Hello world!

はじめまして、Hello world! 文章を作成するのが苦手な( @tw )です。
世の中情報に溢れかえって探せばたいていのことが見つかるので楽になったものです。記事読むのも大変だし、さらっと書いてる記事がいいですよね。だから今後は、単刀直入に記事を書いていきます。
タイトルにある「Hello world」にちなんで奇跡の地球物語を紹介してくれているサイトはここだぁーーーー。感動した!

【動画】地球誕生の歴史が壮大過ぎて日々のストレスとは何だったのかと思える

暇な時にご視聴なさるのもよろしいかと、そして見終わった後、人はそれぞれ何を思うのだろう。

つづきもwebで。