.wpcf7-submit:disabled{cursor:not-allowed}よく試し、よく作るブログ実験室naelabはてなブログの記事編集画面が重い原因はヨメレバ・カエレバだった件はてなブログ2016.09.15こんにちは、NAEです。はてなブログでブログを書いているみなさん、はてなブログの記事編集画面って重たくないですか。書きはじめはそうでもないものの、時間がたつとだんだんもっさりしてくる。末期になると文字をタイプするたびにラグが発生してイライラMax・・・なぜそんなことが起きるのか。問題の原因と対策を考えてみました。目次はてなブログの記事編集画面はずっと使っていると重い記事編集画面が重い理由を探ってみた検証実験:画像リンクだらけの記事を作ってみたらケース1:処理落ちなしケース2:ほぼ処理落ちなしケース3:ほぼ処理落ちなしケース4:処理落ち発生ヨメレバ・カエレバリンクのどこが悪いのかもしもアフィリエイトのトラッキング用ビーコン画像div要素の直書きと多重ネスト記事編集画面が思い問題の対応方法まとめ:はてなブログの記事編集画面に固執することはないはてなブログの記事編集画面はずっと使っていると重いはてなブログ管理画面の「記事を書く」をクリックすると現れるこちらの画面。みなさんおなじみですね。文字の装飾がボタン一発でできたり、リンクやツイート、過去記事の貼り付けが簡単にできるなど、かなり便利な作りになっています。その反面、とても処理が重い。長い記事を編集する場合や編集する時間が長くなってくるにつれどんどん重くなっていきます。多少の重さなら見過ごせるものの、文字を打ち込むたびにラグが発生するようになるともうガマンなりません。この重さ、どうにかならないでしょうか。記事編集画面が重い理由を探ってみたそもそもなぜ重くなるのか。具体的にどの処理が重いのか。重くなったときの記事編集画面の挙動をつぶさに観察してみたところ、1つの事実が浮かびあがりました。文字をうちこむたびに、記事のアイキャッチ画像を設定するパーツに更新処理がかかっていました。こちらのパーツ、挙動を見る限り編集中の記事本文から画像っぽいものを検索するヒットした画像を読み込んでサムネイル表示する記事本文が更新されるたび1、2を繰り返すということをしているように見えます。この中でいちばん処理が重いのは2です。理由は、はてなフォトライフや外部サイトから画像を読み込む必要があるためです。すると、記事編集画面がどんどん重くなるまでの流れとして記事の書きはじめは画像リンクが記事に含まれていないため2はスキップされており処理は軽い記事の仕上げとして画像リンクなどを貼りはじめると処理が重くなっていく特に画像の読み込みに時間がかかる場合において処理落ちは激しくなるという仮説が成り立ちます。記事本文中の画像や画像に関連するパーツが悪さをしている可能性があるということです。検証実験:画像リンクだらけの記事を作ってみたらさて、仮説がたったので実際に検証してみたいと思います。ケース1:画像リンクのない記事の場合ケース2:はてなフォトライフの画像リンクを貼りまくった場合ケース3:Amazonの画像リンクを貼りまくった場合ケース4:通常通り記事を作成した場合(はてなフォトライフのアイキャッチ画像+ヨメレバ・カエレバリンク)これらのケースにおいて、処理落ちが発生するかしないかを見ていきたいと思います。実験環境は以下のとおりです。(32bit)LTE回線でのテザリングケース1:処理落ちなしまずは画像が全くない場合。処理落ちは発生しませんでした。アイキャッチ画像設定パーツのチラつきもほぼ見られません。画像リンクを読み込みにいかない限りは処理は軽いまま保たれることがわかりました。ケース2:ほぼ処理落ちなし次に、はてなフォトライフにアップロード済の画像を貼りまくった場合。100KBレベルのアイキャッチ用画像を5枚ずつ増やしていきましたが、50枚貼っても目立った処理落ちは見られませんでした。Network)に格納されているため、画像データの取得がそもそも爆速だったりキャッシュが効いていることが原因と思われます。ちなみに、Googleの提供するAMPも裏側ではCDNを使っています。AMP対応ページにアクセスするとURLの先頭がcdn.ampproject.orgになっていますよね。Googleが提供する爆速CDN上にWebページのデータを載せているから表示が早くなるんです。ケース3:ほぼ処理落ちなし同じ画像貼りまくりパターンですが、今度はAmazonの画像リンクでの実験です。小サイズの画像ではありますが、30枚ほど貼っても特に処理落ちは見られませんでした。Amazon様、サーバはかなりお強いようです。Service)というクラウドサービス群を独自開発&外販しています。今や世界中の企業がAWSを利用しており、Amazonのサービス自身もそのインフラの上に乗っかっているんです。細かい説明は省きますが、要はAWSは早いんだから画像データを取ってくるなんて爆速でできて当たり前、ということです。ケース4:処理落ち発生ここまでの実験結果から、画像データがすぐさま取得できる限りは記事編集画面の処理落ちしないことがわかりました。記事編集画面が重くなるのか?最後の実験はいつものケース、はてなフォトライフでのアイキャッチ画像+カエレバ・ヨメレバリンクの組み合わせを試してみました。すると、なんということでしょう。ヨメレバ・カエレバリンクを1つ貼っただけでゴリゴリ処理落ちし始めました。文字を打たびにアイキャッチ画像を設定するパーツに再読み込みが走り、記事本文への文字入力がもっさり遅くなったのです。ヨメレバ・カエレバリンクのどこが悪いのかというわけで、ヨメレバ・カエレバリンクが犯人でした。・・・ではつまらないので、もう少し深掘りして考えてみることにします。ヨメレバ・カエレバリンクが原因だとして、具体的にどこがまずいのか?はてなフォトライフやAmazonの画像リンクとカエレバ・ヨメレバリンクの異なる部分は以下の2点。これらに注目すれば何かが見えてくるはずです。アフィリエイトのトラッキング用ビーコン画像が含まれているdiv要素が直書きされ、多重ネストされているもしもアフィリエイトのトラッキング用ビーコン画像ぼくはヨメレバ・カエレバともしもアフィリエイトを組み合わせて使っています。そのためヨメレバ・カエレバリンクの中に以下のようなトラッキング用ビーコン画像が含まれています。src="//i.moshimo.com/af/i/impression?a_id=XXXX>こいつ、サイズは1×1ピクセルと極小であるものの、imgタグに入っているとおり画像です。そのため、記事本文に更新がかかるたびi.af.moshimo.comに画像取得のためのHTTPリクエストが飛ぶはずです。して、このHTTPリクエスト自体の通信オーバーヘッドが悪さをしているかも?そう思って上記タグだらけの記事を1つ作ってみたんですが、全く処理落ちしませんでした。そもそも上記タグ単体ではアイキャッチ画像設定パーツにビーコン用画像が候補として出てきません。したがって、このビーコン用画像は処理を重くする要因にはなっていないようでふ。(でも、ヨメレバ・カエレバリンクをそのまま貼り付けるとなぜかアイキャッチ候補に出てくるんですよね。)div要素の直書きと多重ネスト次に考えられるのは、div要素の直書きと多重ネストです。細かいテストは行っていないのであくまで仮説なんですが、HTMLが記事本文内に直書きされている場合、HTMLの解析処理が走る多重ネストされているがゆえ、解析処理自体が遅くなっているなぜかdiv要素内の場合、上記もしも用ビーコン画像も拾われるということが起きているのではと予測します。処理落ちははてなブログのブログ記事編集画面の作り自体が原因で起きている可能性があります。ヨメレバ・カエレバに代表されるやうな画像(imgタグ)を含むHTMLパーツを記事に直書きした場合に編集画面が一気に重くなるのでは。真因はどうであれ、ヨメレバ・カエレバリンクのような画像つきHTMLパーツを記事本文中に貼り付けることが処理落ちを起こすことが判明しました。対処方法としては下記いずれかになるかと思います。Flip以外の環境で試してみたところ、以下条件のいずれかに該当すれば処理落ちが起きないことがわかりました。IMEを使うブラウザやIMEの作りとはてなブログの記事編集画面の相性の問題でしょうか。残念ですが詳しいことはわかりません。ぼくはMarkdown記法で記事を書いているため、文字の装飾を含めた記事執筆作業はテキストエディタがあれば事足ります。特段理由がない限りははてなブログの記事編集画面は使わないようにしています。Markdown(マークダウン)記法に首ったけ。NaeNoteあと考えられる身も蓋もない方法として、Chromeの「要素を検証」機能で編集サイドバーをそもそも削除するというのもあります。Element」で完了です。「見たままモード」で記事を書いていて、どうしても記事編集画面を使わなければならない場合、試してみてもいいかもしれません。まとめ:はてなブログの記事編集画面に固執することはない以上、はてなブログ記事編集画面の処理落ちの原因と防ぐ方法でした。Flipなどの廉価版PCではまだまだ32bitな環境は残っています。物書きをする必要性は全くありません。記事の執筆自体はテキストエディタで行う編集が終わったら記事編集画面にコピペし、文字装飾などのみそこで行うというスタイルをぜひ試してみてください。はてなブログスポンサーリンクシェアTwitterFacebookはてブPocketLINEコピーフォローNAEブログ実験室naelab関連記事はてなブログMarkdown(マークダウン)記法はブログ執筆スピードアップに最適はてなブログはてなブログでjQueryの読み込み時間をゼロにする方法(はてなブログの高速化)はてなブログ魔改造によるはてなブログの高速化。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。管理人NAEただのブログ好き。お問合わせはこちらもしくはTwitterのDMまでどうぞ。ブログ実験室naelab.タイトルとURLをコピーしました。