Optimize Gorgias Live Chat on Shopify: Facade Pattern for 90+ Mobile Speed
Gorgias chat slowing down your Shopify store? Implement a lightweight CSS/SVG facade button that loads the 400KB bundle only when a customer clicks.
1. The Technical Problem
Live chat widgets are among the heaviest third-party scripts on eCommerce stores. Gorgias loads full socket listeners, emoji pickers, and localization assets on every initial visit.
Less than 2% of visitors use live chat on their first visit, yet 100% of visitors pay the speed penalty of downloading and compiling a 400KB+ chat framework before viewing products.
2. Engineering Resolution Strategy
1. Replace the Gorgias automated script embed with an ultra-lightweight CSS/SVG chat icon facade (under 1KB). 2. When the user taps the icon, dynamically inject the Gorgias script and launch the window instantly.
<!-- Lightweight Gorgias Chat Facade (0 KB Initial Load) -->
<div id="chat-facade-btn" style="position:fixed;bottom:20px;right:20px;width:56px;height:56px;border-radius:50%;background:#10b981;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,0.25);z-index:9999;">
<svg width="24" height="24" fill="#fff" viewBox="0 0 24 24"><path d="M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/></svg>
</div>
<script>
document.getElementById('chat-facade-btn').addEventListener('click', function() {
var btn = this;
btn.innerHTML = '<span style="color:#fff;font-size:11px;">...</span>';
var s = document.createElement('script');
s.src = 'https://config.gorgias.chat/gorgias-chat-bundle-loader.js?applicationId=YOUR_APP_ID';
s.onload = function() { btn.style.display = 'none'; };
document.body.appendChild(s);
}, { once: true });
</script>💡 Pro-Tip: Always create a duplicate theme backup before editing theme.liquid or snippet files.