Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録

957 views

Published on

CMSプロレス#3 懇親会LT資料
お題をイベント当日になって足掻いて実装してみた記録。
...ぶっちゃけネタ枠です、オチはないで。

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Cmsプロレス#3 lt資料 超土壇場でインフラエンジニアがあがいた記録

  1. 1. すべてのエンジニアとクライアントに安心を 情シス屋の インフラエンジニアが CMSプロレス #3の 超土壇場であがいてみた LittleBits,LLC CEO Akira Tsumura @atsumura1130 / tsumura@littlebits.co.jp 2018.02.17 CMSプロレス #3 LT資料 撮影歓迎! カメラアプリのご用意を! 感想はこちら→ #littlebitsLLC
  2. 2. すべてのエンジニアとクライアントに安心を そもそもなんですが、 今日トライしました。 >> いろいろあって << >> 当日環境用意して << >>当日チューニングして << >> めっちゃ惨敗しました! << 惨敗の記録です! LTだから許して!!!w #この5分のLTの為に5時間掛けた
  3. 3. すべてのエンジニアとクライアントに安心を 今の時間 ぶっちゃけ、今日の早朝です。
  4. 4. すべてのエンジニアとクライアントに安心を プロフィール 津村 彰 – Akira Tsumura アキバのインフラ屋さんの偉い人 ..というのは仮の姿 情シスコンシェルジュ 中小企業の 情報システムとか 無線LANとか めがっさ改善しまっくてる人
  5. 5. すべてのエンジニアとクライアントに安心を やっぱどこの会社さんも ネット回線とか 無線LANとか 必要なのに 肝心な時に調子悪いよね! 僕が直しちゃうから 相談してね!
  6. 6. すべてのエンジニアとクライアントに安心を ぶっちゃけ相談力高めです 懇親会で飲んでるので 名刺持って帰って貰えると イイコトあるかも! 気軽に声かけてね! シャイなので!←
  7. 7. すべてのエンジニアとクライアントに安心を 、
  8. 8. すべてのエンジニアとクライアントに安心を つかったモノ • インフラ ConoHa + KUSANAGI + PHP7 • CMS MODX Evolution • デバイス判定ライブラリ Mobile Detect • 画像関連 phpThumb + ImageMagick
  9. 9. すべてのエンジニアとクライアントに安心を まずは静的サイトのチューニング • Java Scriptの非同期化 → vim • 画像の最適化 - 使用する場面によって解像度・圧縮率の変更 - インターレースJPEG化 →シェルスクリプト + Image Magick ぶっちゃけPhotoshopとか使ってません! 黒い画面サイコー! (C)GMO Internet, Inc. 素材の再利用ダメ! ゼッタイ!!
  10. 10. すべてのエンジニアとクライアントに安心を 実際の画像最適化のコード (C)GMO Internet, Inc. 素材の再利用ダメ! ゼッタイ!!
  11. 11. すべてのエンジニアとクライアントに安心を 結果 – いい感じ
  12. 12. すべてのエンジニアとクライアントに安心を CMSに載せてみよう • MODX Evolution – 文字列置換を得意とする超シンプルなCMSのフレンズ - 怒涛のファイルキャッシュ! • もちろんOSS – GPL v2 • 超軽い! • 一応、自分、コミュニティのひと← • コアハック上等! - 上手くいったらプルリクしてね!
  13. 13. すべてのエンジニアとクライアントに安心を Mobile Detect – 機種判別ライブラリ • PHPで超簡単に端末の機種判別をしてくれるライブラリ • User-Agentを観て判別 • ぶっちゃけ、オブジェクト作ってクラス叩くだけ! 控えめに言って、 激、楽。
  14. 14. すべてのエンジニアとクライアントに安心を phpThumb • PHPベースの画像変換ライブラリ • 動的に画像サイズを修正できる&ファイルキャッシュする • そこそこ簡単にGDやImageMagickでの処理が実装できる • 一時期脆弱性が叩かれて話題になった← 控えめに言って、 少、難。
  15. 15. すべてのエンジニアとクライアントに安心を 実装なう! •MODX → MobileDetect → phpThumb → ちょっとコード書いて実装する! → レッツ、がっちゃんこ! •実際、 書いたコードは10行くらい。 •HTML側も 画像のパスを 出し分けに併せて変更
  16. 16. すべてのエンジニアとクライアントに安心を インフラもチューニング • Let’s EncryptでSSL化 + nginxでHTTP/2化 →TCPセッションを張る時間を短縮してヒャハー! • PHP7 →高速実行ヒャッハー! →本当は7.1使ってみたかった← • ブラウザキャッシュの最適化 →フォントファイル(woff2)の ロード減ってヒャッハー! Copyright PRIME STRATEGY CO.,LTD.
  17. 17. すべてのエンジニアとクライアントに安心を 結果 盛大に悪化した orz...
  18. 18. すべてのエンジニアとクライアントに安心を いいわけ • 確かにPage Speed Insightでのスコアは上がった! 手元のデバイス(iPhone 5S + Safari)でも速くなった! なのにナゼ!!!
  19. 19. すべてのエンジニアとクライアントに安心を まぁ生ログでも観ようじゃないか 29:0.000 - - 72.14.199.182 - - [17/Feb/2018:04:24:03 +0900] "GET / HTTP/1.1" 200 10134 "-" "Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5 Build/MRA58N) AppleWebKit/537.36(KHTML, like Gecko) Chrome/61.0.3116.0 Mobile Safari/537.36 Chrome- Lighthouse" "-“ これ、実は 似非3G回線と エミュレータじゃないか 疑惑...
  20. 20. すべてのエンジニアとクライアントに安心を おあとがよろしいようで オチはないで
  21. 21. すべてのエンジニアとクライアントに安心を Thankyou! すべてのエンジニアとクライアントに安心を littlebits.co.jp / #littlebitsLLC

×