X（Twitter）の画像の読み込み・表示が遅い場合の対処法

ここ最近、X（旧Twitter）では画像の読み込みが非常に遅くなることがあります。これは、画像を読み込む際に日本から距離の離れたサーバーに接続されることが原因です。

この記事では、Xで画像の読み込みが遅い場合の対処法について紹介します。

Xの画像読み込みが遅い原因

Xは画像を配信する際に、CDNと呼ばれる仕組みを使っています。

CDNは、世界中に配置されたサーバーのうち、ユーザーからもっとも近いサーバーを使ってデータを配信することで、ファイルの読み込みを高速化する仕組みです。XはFastlyというCDNサービスを利用しています。

Xの設定ミスかFastly側の問題かは不明ですが、ユーザーから遠いサーバーが選択されてしまうという問題が発生しています。

この問題を解決するには、強制的に近いサーバーを選択するように設定すればよいわけです。設定方法をOS別に紹介します。

【注意】DNSの変更は意味がない

ほかの記事では、DNSの設定を変更する方法が紹介されている場合があります。しかし、筆者の環境ではDNSをCloudflareの1.1.1.1やGoogleの8.8.8.8に変更しても、画像の読み込み速度は改善されませんでした。

DNSの設定を変更することで解決するケースもあるかもしれませんが、この方法では必ずしも解決できるわけではないので、注意してください。

以下で紹介する方法は、PCで筆者が実際に試して効果があった方法です。

Windowsの場合

1. Windowsキーを押して［メモ帳］と入力する

2. ［最も一致する検索結果］に表示されているメモ帳を右クリックし、［管理者として実行］を選択する

   

3. ［このアプリがデバイスに変更を加えることを許可しますか？］で［はい］を選択する

4. メモ帳のメニューから［ファイル］>［開く］をクリックする

   

5. C:\Windows\System32\drivers\etcフォルダーを開く

   

6. ファイルの種類を［すべてのファイル］に変更し、hostsファイルを選択して［開く］をクリックする

   

7. 末尾に次の内容を追加する

   try{(()=>{function a(e){if(!e)return;let t=e.getAttribute("tabindex")!==null,n=e.scrollWidth>e.clientWidth;n&&!t?e.setAttribute("tabindex","0"):!n&&t&&e.removeAttribute("tabindex")}var u=window.requestIdleCallback||(e=>setTimeout(e,1)),i=window.cancelIdleCallback||clearTimeout;function l(e){let t=new Set,n,r;return new ResizeObserver(c=>{c.forEach(o=>t.add(o.target)),n&&clearTimeout(n),r&&i(r),n=setTimeout(()=>{r&&i(r),r=u(()=>{t.forEach(o=>e(o)),t.clear()})},250)})}function d(e,t){e.querySelectorAll?.(".expressive-code pre > code").forEach(n=>{let r=n.parentElement;r&&t.observe(r)})}var s=l(a);d(document,s);var b=new MutationObserver(e=>e.forEach(t=>t.addedNodes.forEach(n=>{d(n,s)})));b.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{d(document,s)});})();}catch(e){console.error("[EC] tabindex-js-module failed:",e)}try{(()=>{function i(o){let e=document.createElement("pre");Object.assign(e.style,{opacity:"0",pointerEvents:"none",position:"absolute",overflow:"hidden",left:"0",top:"0",width:"20px",height:"20px",webkitUserSelect:"auto",userSelect:"all"}),e.ariaHidden="true",e.textContent=o,document.body.appendChild(e);let a=document.createRange();a.selectNode(e);let n=getSelection();if(!n)return!1;n.removeAllRanges(),n.addRange(a);let r=!1;try{r=document.execCommand("copy")}finally{n.removeAllRanges(),document.body.removeChild(e)}return r}async function l(o){let e=o.currentTarget,a=e.dataset,n=!1,r=a.code.replace(/\u007f/g,` `);try{await navigator.clipboard.writeText(r),n=!0}catch{n=i(r)}if(!n||e.parentNode?.querySelector(".feedback"))return;let t=document.createElement("div");t.classList.add("feedback"),t.append(a.copied),e.before(t),t.offsetWidth,requestAnimationFrame(()=>t?.classList.add("show"));let c=()=>!t||t.classList.remove("show"),d=()=>{!t||parseFloat(getComputedStyle(t).opacity)>0||(t.remove(),t=void 0)};setTimeout(c,1500),setTimeout(d,2500),e.addEventListener("blur",c),t.addEventListener("transitioncancel",d),t.addEventListener("transitionend",d)}function s(o){o.querySelectorAll?.(".expressive-code .copy button").forEach(e=>e.addEventListener("click",l))}s(document);var u=new MutationObserver(o=>o.forEach(e=>e.addedNodes.forEach(a=>{s(a)})));u.observe(document.body,{childList:!0,subtree:!0});document.addEventListener("astro:page-load",()=>{s(document)});})();}catch(e){console.error("[EC] copy-js-module failed:",e)}

   151.101.108.159 pbs.twimg.com

   
   

   

8. ファイルを保存してメモ帳を閉じる

9. Webブラウザーを再起動する

macOSの場合

macOSでは、次の記事を参考にしてhostsファイルを編集してください。

• [ 共通] hostsファイルの編集（MacOSのPCの場合）

ただし、記事のSTEP5の内容は無視して、代わりに次の内容を追加してください。

151.101.108.159 pbs.twimg.com

設定が終わったら、Webブラウザーを再起動してください。