SNSのタイムラインを埋め込みつつ、Lighthouseのスコアを上げる - Qiita
Lighthouseとは GoogleがOSSとして開発している、ウェブサイト (ウェブアプリ) の品質チェックツールです。 Chromeの拡張機能としてインストールすることができ、ウェブサイトの表示速度やHTMLの構造チェック、JSのライブラリのバージョンによる脆弱性の有無などを教えてくれます。 SNSを埋め込んだ時の問題点 ウェブサイトを作ると、TwitterやInstagramのタイムラインを埋め込みたくなる時があります。 こういうやつです。(左がTwitter、右がInstagram) Twitterの場合はこういうコードを記述するように、という指示です。 <a class="twitter-timeline" href="https://twitter.com/hinatan_net?ref_src=twsrc%5Etfw">Tweets by hinatan_net</a> <
WordPressでTwitterとInstagramの埋め込みを遅延読み込みさせる方法
TwitterとInstagramの読み込みは、サイト表示速度を低下させます。 これらの埋め込みがあるとPageSpeed Insightsで減点されてしまいます。 TwitterとInstagramの読み込みを遅らせることで、PageSpeed Insightsの点数を上げる方法を紹介します。 コードのコピペ場所 以下で紹介するコードは、子テーマの中にあるfunctions.phpに記述してください。 javascriptは新たにlazy-load-twitter.jsというファイルを作成する方法で行います。 functions.php まずは、以下のコードをfunctions.phpに追加してください。 // Twitter・instagramの遅延読み込み function my_theme_enqueue_scripts() { wp_enqueue_script( 'lazy-l
【JavaScript】webサイトのレスポンスが悪くなってしまう前に知っておきたかった記事まとめ。 - k n note
webサイトにダイナミックな仕掛けを施したい！と思った時って、JavaScriptやjQueryを使って「scroll」や「resize」のイベントで発火する処理を書いたりしますよね。 それで、いくつかのエフェクトを実装した後に、「あれ、サイトがもっさりしてる」と感じた経験ありませんか。 そんな経験がある方にはきっと活きる。JavaScriptやjQueryの処理を改善するために知っておきたいTipsを紹介します。 （僕がためになった記事のまとめですので、網羅的ではありません＞＜） ブラウザに思い通りのスタイリングが描写される仕組み JavaScriptをバリバリにチューニングする記事や、描写遅延が起こっている理由に触れる前に、 どうやってブラウザにCSSなどの描写が反映されるのかを教えてくれる記事を紹介します。 これを知ってるかどうかで、局地的だけじゃなくてもう少し広い視野で速度改善に取
WordPress でも大丈夫！実例で見るウェブパフォーマンス改善
ウェブパフォーマンス、あるいはウェブページの表示速度は、ウェブサイト品質の重要な指標の1つです。今注目されているウェブパフォーマンス改善ですが、そもそも何をすればいいのか、具体例を交えながらその施策を紹介いたします。具体例としては、WordPress を利用したブログの PageSpeed Insights (Lighthouse) のパフォーマンススコアを、30点以下から95点以上に改善した際、実際に行った施策を用います。
How to 速度改善 ーWebパフォーマンスについて知っておきたいこと7選ー - Qiita
今回のテーマ Webパフォーマンスを改善する上で知っておきたい知識をまとめてみました。 前回の記事では使わなかった（使えなかった）技術や方法なども含めて記載します。 また、ブラウザのレンダリングなどについても書きたいと思います。 (2019年5月23日追記) 過去の記事はこちら How to 速度改善 ー計測・知識編ー How to 速度改善 ー原因調査編ー How to 速度改善 ー実装&技術調査編1ー 1. ブラウザレンダリングの仕組み 推測するな、計測せよ という言葉にあるように、闇雲にチューニングを初めても良い結果は出ません。まずはブラウザレンダリングの仕組みからみていきましょう。 ブラウザレンダリングの流れ レンダリングの大まかな流れは Loading→Scripting→Rendering→Painting（これでページが表示される） となっています。 この処理の内容をフレーム
ほんとうは怖いWP Super Cacheの話 | 高橋文樹.com | プログラミング
この投稿は 11年 前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。 WordPressで一般ユーザーのログインを伴うサイト（ECサイト、SNSなど）を作っている方も多いと思いますし、そういった依頼を受けることも多いのですが、最近「バグです！」という報告を受けてよくよく調べたらWP Super Cacheというキャッシュプラグインのせいだったということがなんどかありました。毎回説明するのが大変なので、書いておきます。 そもそもWP Super Cacheはどういう仕組みか 通常のWebサイトというのは、ユーザーから求められたリクエストからPHPなりRubyなりPythonなりが求められるデータを推測し、データベースに対して適切な操作を行い、最終的にHTMLを書き出します。 動的なサイトがリクエストを受け取って処理する仕組み で、Webサイトが重
一休.comホテルリストの表示速度を従来比2倍にしました - 一休.com Developers Blog
宿泊事業本部フロントエンドエンジニアの宇都宮です。 2018年度下期は、一休.comホテルリストページ スマホ版の速度改善に取り組んできました。その結果、ページのデザインはそのまま、機能面はリッチにしつつ、プロジェクト開始前の約2倍のスピードでページが表示されるようになりました。 本記事では、高速化のためにどのような施策を行ったのか紹介します。 なお、Webサイトの高速化手法については、ホテル詳細ページ高速化プロジェクトを実施した際にも記事を書いています。これらの記事で紹介している手法（たとえば、Imgixによる画像最適化等）については、記述を省略しています。あわせてご覧ください。 一休.comスマホサイトのパフォーマンス改善（概要編） - 一休.com Developers Blog 一休.comスマホサイトのパフォーマンス改善（JavaScript編） - 一休.com Develop
わかりやすいページ表示速度改善TIPS！ Googleアナリティクスでほら簡単に！【SEO記事12本まとめ】 | 海外&国内SEO情報ウォッチ
「SEOにもUXにも、ページ表示速度の改善が効くのはわかる。でも、どこからどう手をつけていいやら……」そんなあなたに朗報だ。 グーグルのソフトウェア エンジニアが教えてくれた、ページ表示速度の改善にGoogleアナリティクスを使う方法を解説する。 ほかにも、グーグルSEOやサイト運営に役立つ次のような情報を、今週もまとめてお届けする。 求人検索がいよいよ日本で開始。その名も「Google しごと検索」有料リンク売買サイトにグーグルが手動対策の鉄槌！医療・健康専用のナレッジパネルが日本でも開始か？サイト内検索結果0件のページが大量にソフト404、どうすればいい？コンテンツの品質・関連性――グーグルはいったい何で判断してるのか？新Search Consoleのサイトマップには欠けている機能がある2019年最初のオフィスアワーで、MFI・構造化データ・AMPなどをグーグル社員が解説JSをヘビーに
WordPressを劇的に高速化、1秒以内に表示されるフロントエンドの構築方法 -Zero-latency WordPress Front-end
サーバーサイドのレンダリング（SSR）を使用して、数分の1秒以内にページが高速に表示されるWordPressのフロントエンドを構築するテクニックを紹介します。 バックエンドのキャッシュと組み合わせることで、非常に高速になり、しかも安価にWordPressサイトを構築できます。 Zero-latency WordPress Front-end -GitHub 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様のライセンスを元に翻訳しています。 デモページ サーバーサイドのレンダリング（SSR） バックエンドのサービス 非キャッシュページのアクセス キャッシュページのアクセス キャッシュのパージ 始めてみよう Nginxの設定 バックエンドのJavaScript フロントエンドのJavaScript Cordova 終わりに デモページ サンプルのコードで何ができるのか
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
フロントエンドコーディングにおけるPageSpeed Insights対策 / frontend pagespeed insights-
Webパフォーマンス虎の巻
Webパフォーマンス向上施策のために、今更ながら超速本1を読んだので、今までの自分の知見と合わせてまとめてみます。 なるべく柔らかく、改善施策ってまず何をどうすればいいの？という疑問を持った人に向けて書いています。 ▪️格言 そもそもWebは速い。遅くしているのは我々です。大抵は技術の問題ではなくて、人の問題。 引用元： テクニックではなく、今、本気で取り組むべきWebパフォーマンス （html5jパフォーマンス部 部長 竹洞さん） 心得 パフォーマンス向上に対する施策は大別すると以下の２通り 軽量化 （単純にやりとりするデータ容量を小さくすること） 圧縮 削除 最適化 （その時に最も適している実装・実行をとること） 経路・順番の変更 非同期 もっとも遅くしている原因を探して、それを対策するのが原則。「対効果」が絶対的正義である。手段から入るのは愚策。まず先に原因を知ることが重要。 ▪️1
開発環境のレンダリング完了時間を1/10にした話(Rails) - メドピア開発者ブログ
ビール大好きですが、3回に1回は年齢確認をされる26歳エンジニアの村上(pipopotamasu (pipopotamasu) · GitHub)です。 今回はリクエストからレンダリング完了までの時間を減らした取り組みについて書こうと思います。 きっかけ メドピアではメインプロダクトをRuby on Railsで開発しています。 Railsで開発を始めてから2年半、すくすくとアプリケーションが成長してきています。 しかし成長していくにつれ問題が出てくるのが世の常、以下のような問題が生じてきました。 「ページ読み込みが遅い...」 Webアプリケーション開発者は開発環境で1日に何十回とページ読み込みをさせると思いますが、Railsの成長と共にそれがめちゃくちゃ遅くなってきたのです。 環境 メドピアのフロントエンド環境はassets pipeline(browserify-railsを用いてビ
画像圧縮サイト／TinyPNG
Smart WebP, PNG and JPEG Compression for Faster WebsitesOptimize now
オンラインで画像を圧縮。最高の画質および圧縮方式
画像の圧縮 JPG、PNG、>SGV、GIF画像を最高の画質と圧縮方式で圧縮します。 画像のファイルサイズを瞬時に縮小できます。
ページの読み込み速度をモバイル検索のランキング要素に使用します
+1 ボタン 2 AMP 11 API 3 App Indexing 8 CAPTCHA 1 Chrome 2 First Click Free 1 Google アシスタント 1 Google ニュース 1 Google プレイス 2 Javascript 1 Lighthouse 4 Merchant Center 8 NoHacked 4 PageSpeed Insights 1 reCAPTCHA v3 1 Search Console 101 speed 1 イベント 25 ウェブマスターガイドライン 57 ウェブマスタークイズ 2 ウェブマスターツール 83 ウェブマスターフォーラム 10 オートコンプリート 1 お知らせ 69 クロールとインデックス 75 サイトクリニック 4 サイトマップ 15 しごと検索 1 スマートフォン 11 セーフブラウジング 5 セキュリティ 1
「Above the foldのコンテンツは1秒以下で表示させること」、モバイルサイトの高速化をGoogleが推奨
[対象: 中〜上級] モバイル向けサイト（スマートフォン向けサイト）の高速化に取り組むように、Googleは、ウェブマスター向け公式ブログであらためて推奨しました。 Official Google Webmaster Central Blog: Making smartphone sites load fast 速さが求められているのに現実は遅い いくつかのリサーチから次のような結果が出ています。 素早く使えて手軽なので、ユーザーはスマートフォンを使っている モバイル向けページは、平均して表示時間にたいてい7秒以上かかっている 表示に1秒以上かかると「時間がかかっている」とユーザーは感じ、遅いサイトには再訪問しないかもしれない “速い”モバイルサイトをユーザーは求めていますが、実際のモバイルサイトは“遅い”のが現状です。 そこで、モバイルサイト高速化のために知っておくべき基本的な知識と対応
Refresh-SF - Online JavaScript and CSS Compressor
Online JavaScript/CSS/HTML CompressorThis is a web interface to minify your JavaScript, CSS and HTML. This tool uses UglifyJS 2, Clean-CSS and HTML Minifier. You can easly change the defaults below the textarea. Further ReadingIn my investigation, I discovered coding patterns that prevented YUI Compressor from performing variable name replacement. By modifying or avoiding these coding patterns, yo
JPGイメージをオンラインで圧縮する
最大20個までJPGまたはJPEGファイルを選択して、ドロップエリアにドラッグして下さい。アップロード後、自動的に圧縮が始まりますので、完了までお待ち下さい。 JPEG圧縮クオリティをさらに調節したい場合には、サムネイルをクリックして、マニュアルモードに切り替えて下さい。 圧縮が完了したら、各サムネイルから個別にダウンロードするか、ZIP形式で一括ダウンロードして下さい。
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
PageSpeed Insights