はてなブックマーク

デジタル庁のサイトがやばすぎるようだ こちらの記事が話題になっています。 省庁のサイトといえば枯れ果てた技術とデザインという印象ですが、デジタル庁はさすが新しい技術をキャッチアップしていて、しかも動作も軽快で素晴らしい！と 「いい意味でやばい」 という内容でした。 こちらは、サイトスピードの観点から考察してみたアンサー的な記事となります。 デジタル庁サイトは2022年4月に刷新された模様 GoogleはChromeユーザーから世界中のWebサイトのスピードに関する情報を収集しており(Chrome UX Report)、パブリックに公開されています。 これによると、デジタル庁サイトのスピードは2022年4月に急激に改善されています。 例えばLCPの75パーセンタイルはこのように推移しており、2022年4月に半分以下の時間に改善されています。 この間に何があったのかな？ということで、Inter

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

Movable Type Advent Calendar 2020 12日目です。 つい先日、AWS LambdaがDockerコンテナをサポートしました。 これはアツい！ということでMTを(途中まで)動かしてみた、という話です。 Movable Type Serverless 最終的にはこんなイメージでいます。 MTの静的出力という特徴を活かし、Webサーバーだけ常時起動させますが、MTは普段存在すらしておらず、編集者が使うときだけ起動します。 夜中や休日など編集者が使わない時間はコンピューティングコスト節約！ 利用者が増えたらRDSやEFSの限界まで事実上無限に性能拡張！ もし再構築を並列で実行できたら時間を圧倒的に短縮！ なにこれすごい！ とりあえずログインできるところまでやってみた 今回はRDSと連携してログインできるところまでやってみました。 EFSとの連携以降はやってません。

世の中リモートワークが増えてきましたが、固定IPからの接続が必要な作業もあります。 そんなときに便利なのがVPNです。 インターリンクさんのマイIPは安くて簡単です。ただ、自分が契約したときは通信速度が遅くて解約しちゃました…(中の人にはすみません！) 同じような低料金のソリューションとして、低価格VPSでSoftEtherを稼働させる方法がよく紹介されています。 マイIPの最速3分でスタートに対抗して、最速3分でVPSにSoftEtherをセットアップするレシピを考えてみました。 こちらのステキなDockerイメージにより実現しました。 siomiz/softethervpn https://hub.docker.com/r/siomiz/softethervpn 材料 ConoHaのアカウント 事前共有鍵 例: rRhM*HkHcX9U VPNに接続するユーザー名:パスワードの組み合わ

※ nginx向けの設定をこちらに書きました。 Webサーバー上のJpegやPNGファイルについて、そのWebP版ファイルがある場合はそちらを返す(もちろんブラウザが対応している場合のみ)、という.htaccessの記述例はすでにいろいろ公開されています。 多少の差違はありますが、たいてい以下のような方法をとっています。 WebP-images-with-htaccess ※ 2018/10/31追記 Varyヘッダの送出条件に関するプルリクがマージされました。混乱するので、以前のコミットにリンク先を変更します。 コメントを日本語に置き換えて説明します。 <IfModule mod_rewrite.c> # Rewriteモジュールを有効にする RewriteEngine On # ブラウザから送信されるAcceptリクエストヘッダがimage/webpを含む場合のみ # 後続のRewri

SFTP/FTPS/FTPで接続した先のファイルをバッチ処理するプログラムを開発したときに、テストのために用意したdocker-compose.ymlファイルを共有します。 docker-compose-remote-file-system / GitHub https://github.com/miyanaga/docker-compose-remote-file-system ./remoteディレクトリは、開発マシン単独でローカルファイルシステムとしても、SFTP/FTPS/FTPとしても操作することができます。 例えばFTP越しのファイルに対する処理をテストするとき、このdocker-compose.ymlを使うと、以下の手順でテストを記述できます。 ローカルファイルとしてテストデータを用意 プログラムはFTP経由でそのファイルを処理 ローカルファイルとして結果を検証・クリーンナッ

Apacheで運営しているサイトをお手軽にWebP対応する方法を紹介します。 ※ nginxも対応可能です。記事の末尾に参考情報を記載しました。 Googleが推している新フォーマットなので、PageSpeed Insightsや、Lighthouseのスコアがわずかですがほぼ確実に上がります(笑) さて、方法は次の3ファイルをWebサーバーに設置して、cronによる定期処理を登録するだけです。 WebPへの変換を行うcwebpコマンドファイル ディレクトリ内の画像にcwebpコマンドを実行するシェルスクリプトファイル Apacheに振り分けを指示する.htaccessファイル 非常にシンプルで本番環境では厳しい部分も多々ありますが、小規模なサイトはこれで十分という場合もあると思います。 弊社のWebサイトやブログなど実際、小規模なので十分だったりします。…ということで実際に導入しました。

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

結論 同じ品質を指定しても、画像の種類によってファイルサイズはもちろん、画質にもばらつきが出ます。 ただし、似たような傾向が現れる品質のポイントがあるので、そこを押さえれば画質や性能のムラを最小限に抑えられそうです。 通常は85がよい。Googleの推奨通り。画質優先時は90がよい。 品質85を境にファイルサイズが急に大きくなる。 品質90で画像によらず実際の画質が安定する。それ未満の場合は画質のばらつきが大きい。 品質100は非常に非効率。PNG24にした方がいい。 画像は本当に奥が深く、あくまである実験による結論です。前提や手順は本文をご覧ください。 背景 Jpegファイルを出力するとき、0から100までの品質を指定します。同じ品質で出力されたはずなのに、ノイズが目立つ画像とそうでない画像があると感じたことはないでしょうか。 Jpegの原理については、多くの情報があるので省略します。超

script要素の位置とasync/defer script要素はbodyの末尾に記述するのが定説ですが、あるサイトについてscript要素の記述位置やasync/deferが及ぼすパフォーマンスへの影響を実験しました。 外部JavaScript 11ファイル・250kb 因子1 head要素内・body要素の末尾を比較 因子2 defer・async・それらの属性なしを比較 いずれのケースもスクリプトエラーがなく期待通りに動作 PageSpeed Insightsのモバイルスコアで評価 ※ この記事ではscript要素はsrc属性で外部参照することを前提にします。インラインスクリプトではありません。 ※ また、1サイトでの結果に過ぎないのでその点も考慮ください。 最速はasync付きでhead要素に記述 PageSpeed Insightsのスコアはばらつきが出るので、10回の計測を行い

2020/6/3 追記 本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。併せてご参考ください。 https://simulate.site/cheatspeed-insights/ インタラクティブになるまでの時間 英語ではTime To Interactiveまたはその頭文字をとってTTIと表記されます。Webページ表示の体感速度を決める重要な指標です。 PageSpeed Insightsでも最も重視されていて、点数の1/3がこの指標で決まります。 Googleによると以下の説明ですが、 「操作可能になるタイミング」とは、レイアウトが安定して、主要なウェブフォントが表示され、メインスレッドでユーザー入力を処理できる状態になるタイミングとして定義されます。 https://developers.google.com/web/tools

PageSpeed Insightsの採点ロジックについて詳しく調べてみたところ、意外なことがわかりました。 2020/6/3 追記 本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。合わせてご参考ください。 https://simulate.site/cheatspeed-insights/ 2020/3/19 追記 Lighthouse 6へのバージョンアップでこのページにかかれている内容が一部変更される可能性があります。 こちらも併せてご参考ください。 PageSpeed Insightsのスコア大変動か？ Lighthouse 6 で変わる採点ルールを先取りチェック！ - アイデアマンズブログ 点数に反映される監査項目は5つだけ PageSpeed Insightsを実行するといろいろな指摘事項が出てきます。なので指摘が多いと点数

2020/6/3 追記 本家レポートよりPageSpeed Insightsのスコア改善が捗る裏レポートツールを公開しました。合わせてご参考ください。 https://simulate.site/cheatspeed-insights/ PageSpeed Insightsのスコアを最も左右する要因は何か 先日、PageSpeed Insightsの点数はどのように計算されているか。100点を取るための条件という記事を書きました。 要約すると、PageSpeed Insightsの点数(以下PSIスコア)は指摘を減らして技術点を競うものではありません。シンプルにスタートダッシュの速さだけを見ています。 そこで気になった仮説を検証してみました。 仮説: TTFBとJavaScriptの量で点数が決まる 理論的にページ表示の初期段階では、TTFB(≒サーバーの応答時間)の長さ、HTML、CSS

新しいフロントエンド技術の普及率を調べる定番ツールが Can I use ... https://caniuse.com/ です。 このツールはGoogle Analyticsと連携して、もっと自分のための Can I use ... にカスタマイズすることができます。 この方法を見つけたときスゲー！と思ったのですが、5年も前に紹介されてました。 HTML5やCSS3のブラウザサポート状況を簡単に調べられる「Can I use…」のGoogleアナリティクス連携が便利 | Rriver 画面も変わっているので2019年版として紹介します！ ⚙️ Settingsから行う テキストボックス横のSettingsを開き、From Google Analytics:のImportボタンを押します。 ポップアップでお決まりのGoogleログインフォームが出てくるので、Google Analytics

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 最近、Googleデータスタジオにむちゃくちゃハマってます(いい意味で)。 「使ってみたいけどどういうデータ・どういうレポートから始めたらいいかわからない」 という方も多いのではないでしょうか。自分がそうでした。 はじめの一歩として、見た目に楽しいインフォグラフィックを作ってデータスタジオに慣れてみよう！ というテーマで、データスタジオの操作手順を詳しくご紹介します。 素材も一式用意したので1時間…くらいでできる…と思います。 完成図 弊社アイデアマンズ株式会社では画像軽量化のためのLightFileというサービスを提供しています。 作

Movable Typeユーザーのみなさん、こんにちは。アイデアマンズの宮永です。 ちょっと遅くなりましたが、2016年のAdvent Calendar、2日目です。 ちゃんとやるのは大変なJSONテンプレート Movable TypeのテンプレートでJSONやXMLなどの構造体フォーマットを出力することってけっこうあるかと思います。 柔軟にテキストのテンプレートを記述できて、MT便利！と感じる部分ですが、JSONファイルを書き出したりするのはけっこう大変です。 JSONフォーマットとMTタグが混在して見づらく、フォーマットが正しいか判断しにくい encode系やescapeモディファイアを忘れてしまうと解析できないJSONになることがある (あまりないけど)「やっぱりYAMLになったわ」→「ギャー！」 確実に解析し利用できるJSONデータを出力するには、Movable Typeのことをよ