トップ   >   カテゴリ表示:Development 開発/ 制作

PageSpeed Insights の結果について、他の有名サイトと当ブログをザッと比較だけしてみた件。

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/81882362.html

PageSpeed Insights の結果について、他の有名サイトと当ブログをザッと比較だけしてみた件。

PageSpeed Insightsとは、
ページの読み込みスピードを診断してページの最適化を提案してくれる
Googleのサービスです。

PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights/

sai1
まず、ウチの結果です。
モバイルが良い結果になっていますが、
これはこのブログを運用している、さくらのブログのモバイルテンプレートが
軽量なためだと思われます。
PCサイトはオレンジ色です。少し改善の余地がある意味を表しています。
元々赤色でやばかったのですが、先日最適化処理をしたので、
これでも少しだけよくなってます。
私のブログをずっと見てくれている人がどれだけいらっしゃるのかは不明ですが、
以前と比べると表示が速くなったと思います。
※最適化処理については、気が向けばまた別に書ければと思います。

sai2
気になる情報がいっぱい。イケダさんのブログです。
パソコンはオレンジになっているものの、高いスコアで良い結果だと思います。
モバイルが赤判定になってました。
みたところ、どうも読み込まれているjsファイルが沢山あって
それが赤判定につながっているみたいです。

sai5
いつも人気のlanderblueさんのブログです。
PCサイト、モバイルサイトともに、あまり良くない結果でした。
ただ、個人的に見に行ったときに
ページが重いような印象は受けないような気はします。

sai3
趣向を変えて、パズ速です。
パズドラ情報でいつもお世話になっているサイトです(笑)
PCサイト、モバイルともにオレンジ色になっているものの、
両方70程度のスコアが出ているので、良い結果だと思います。

sai4
ブログから離れて、Yahooはどうでしょうか。
モバイルは低めの評価ですね。。
PCサイトはオレンジになっているものの、良いスコアだと思います。

他ページの解析結果はこのあたりで…。

元々、自分のブログが重いことが以前からずっと気になっていて、
理由もだいたいは分かっていたのですが、
修正が面倒でほったらかしでずーっと最近まできていたんですが、
先日思い立ってページの最適化(軽量化)を試したことが
この記事を書くキッカケとなりました。

色々参考になるので、
ブログやってる方でも、そうでない方でも
気になるURLをこのツールで調べてみると面白いですよ。

あなたのページはどういう結果になったでしょうか?

さいごに、個人的に思うことですが、
あくまで機械的判定結果で、何が何でも
高スコアにしないとヤバイということは無いと思います。
一番重要なのは良質なコンテンツだったり、
サイトを運用している人が何を一番大切に考えているかだと
思うので。。。

(うちは気ままな運用が第一優先です(´-`).。oO)

とはいえ、google様に余りにも低いスコアを出されると
なにか危機感すら感じてしまいますが…。

またGoogleさん以外の同種のサービスでも
よさげなとこがいくつかありましたのでご紹介だけしておきます。

GTmetrix | Website Speed and Performance Optimization
http://gtmetrix.com/
英語ですが、よさげでした。
こちらで詳しく紹介されてます。
http://www.akagami.jp/seo/webpage-read_speed-checker.html

Website speed test
http://tools.pingdom.com/fpt/#!/
見やすいです。

まとまりませんが、以上です。

テスト環境:Windows7 Home Premium



「この結果をツイートする」や「この

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/59386169.html

「この結果をツイートする」や「この商品についてツイートする」のようなかんじのツイート機能を実装する方法

ウェブページのネタ系の診断をしたあとに、
「この結果をツイートする」なんて機能があったり、
オンラインショップの商品画面で「この商品についてツイートする」
とかいう機能がありますが、ああいうのをどうやるのかというお話です。(たぶん)

「Web Intents」でTwitterの機能をサイトに埋め込む[to-R]
http://blog.webcreativepark.net/2011/04/20-051058.html
<script type="text/javascript" src="http://twitter.com/intent/tweet?http://platform.twitter.com/widgets.js"></script>
http://twitter.com/intent/tweet?original_referer=a要素を設置するURL&url=シェアするURL&text=シェアしたいテキスト
こちらのページを参考に試してみて、できました!

ポイントは、シェアしたいテキストにあたる部分に来る日本語処理ですかね。

日本語をそのままURLに乗せることは基本的にできないので、
事前にURLエンコードをしなければならないのですが、
ウェブアプリのように動的に組み込むのであれば
エンコード処理を挟む必要があります。

あと一応textのみ指定すれば、つぶやき自体はできるっぽかったです。

適当ですが、以上です。

iPhoneで、ウェブページのソースを見る方法

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/58028722.html

iPhoneで、ウェブページのソースを見る方法

iPhone/iPadのSafariでページのソースを表示 - メモ用紙
http://d.hatena.ne.jp/scientre/20120903/view_source_on_mobile_safari

試してみましたが、便利でした♪(´ε` )

IE8を、IE7にする方法

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/57338532.html

IE8を、IE7にする方法

F12 -> ブラウザモード -> IE7 を選択。

取り急ぎの、備忘メモです。

テスト環境:Windows7 Home Premium, Windows XP

メディアクエリでとりあえずスマホ対応したときに諦めたことを2つほどサラっと。

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/56979990.html

メディアクエリでとりあえずスマホ対応したときに諦めたことを2つほどサラっと。

・adsense※。。 phpが必要そうだから。さくらのブログでは基本的に導入不可か。
 参考:http://www.yoheim.net/blog.php?q=20120630
 
・画像の扱い。流体型のブログでの画像の扱いは、うわさどうり難しい。
 レイアウトにあわせて自動的に可変させる場合、
 やってみると分かるがIEが障害になる。
 まぁこのブログではIEをかなり捨ててはいますが…。アクセスは多い(・_・、

以上2つ。
あと、特筆するなら、流体(リキッド)レイアウトという性質上、
pixcel単位の精細な指定は、もはや無理です。(たぶん)
これからはそういう時代になるんでしょうね。。
まぁ適当な自分にはこのあたりは嬉しいですが:(;゙゚'ω゚'):ブルルルルr・・・

※メディアクエリとは…
[CSS]CSS3のMedia Queries(メディアクエリ)の使い方と実装例 | コリス
http://coliss.com/articles/build-websites/operation/css/css3-media-queries.html

※adsenseとは
http://e-words.jp/w/Google20AdSense.html

css編集の点において、

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/55523889.html

CSS編集の点において、IEの開発者ツールをfirebugみたく使う方法

firebugってweb制作者、開発者にとってすごく便利なツールというのは
言わずもがなだと思うのですが、いかんせん“firebug”っていうくらいですから、
基本的にはfirefoxしか使えません。
(最近はChromeでLite版なんかも出ていますが。)

firebugの便利な機能のひとつには、
任意のタグを選択して、それにどういったCSSがかかっているのかを
調べることができることだと思います。
調べるだけではなく、リアルタイムに編集を加えて
プレビューに反映しながら、調整もできます。
このあたりについては、だいぶ前に記事にしていました。

【図解】今更ながらfirebugによるCSS調整のし易さについて。 | kimihiko Tech
http://tech.kimihiko.jp/article/18755744.html

ですが、一般的に利用者の非常に多いIE(Internet Explorer)で
検証できればいいな、という場合は結構多いと思います。

でも、IEではfirebugは使えません。

ただ、最近のIEには、開発者ツール、と呼ばれるfirebugに似た
検証ツールが組み込まれています。
ご存知の方は多いと思うのですが、
あまり使われていない方も多いような気がします。

そこで、CSS編集の点において、
IEの開発者ツールをfirebugみたく使う方法について
少しだけ説明をしたいと思います。

まず、タグを選択して適用されているCSSを調査します。
さらに、CSSのリアルタイム編集&プレビューをします。

そうなんです。実はfirebugと同じようなことができちゃいます!(笑)

ff1
F12を押すと、下にfirebugのようなウインドウが出現します。
これがIEの開発者ツールです。なんとなくfirebugと似てますね。

ff3e
1.矢印を選択し、
2.プレビュー上で、任意の要素を選択し、
3.トレーススタイルを選択します。
すると、選択中のタグに適用されているCSSを知ることが可能です。

ff4
CSSを少し、いじってみます。
クリックすると、編集できますので、変更してみましょう。

ff5
確定すると、プレビューにも反映されました!

ちなみに、これは一時的なプレビューですので、
リロードすれば表示は元に戻りますし、
実際のコードへの影響は何もありません。

トレーススタイルの編集ですが、今回試した、既存プロパティの編集は可能でしたが、
firebugのように、新たにプロパティを追加したりすることは
できないように思いました。

ff7
ただ、htmlタブのほうで、属性の追加、というのができるので、

ff8e
そちらでたとえば、styleプロパティを追加して
CSSを直接書き込めば、その場で色々調整できるように思いました。

私も開発者ツールについては、それほど使い込んでませんが
ぜひ、活用してみてくださいませ。

以上です。

テスト環境:Windows7 Home Premium, IE8


jQuery Mobileを使った国内スマホサイトまとめ

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/54252914.html

jQuery Mobileを使った国内スマホサイトまとめ
http://bit.ly/AcrD9h
勉強用メモ。
こちらもあわせて↓

「ノンプログラマーのためのjQuery入門」のスライドが凄く分かりやすいですね
http://bit.ly/dM0SjJ

スマートフォンのフォームボタン

共有ボタン付きページはこちら: http://tech.kimihiko.jp/article/53376245.html

スマートフォンのフォームボタン(inputタグ)を使いやすいサイズにする方法

参考にしたサイト
http://symple.jp/120.html

●iPhone
width、height属性でボタンのサイズ調整ができる。
marginプロパティを使うとボタンに余白をつくることが出来る。

●アンドロイド系
width、height属性でボタンのサイズ調整はできない。
marginプロパティを使うとボタンに余白をつくることが出来る。

とっても参考なります( ´ ▽ ` )ノ
関連する記事(広告含む)
2 3 4 5 6 7 8 9 10