Hi Webflow community!
After going through my onsite optimization i’m left with server side optimization that i believe only Webflow team can fix . Any thoughts on that ?
Desktop score is 77
Mobile score is 38
I get 99’s and 100’s all the time. You have made decisions that have dramatically slowed down your site. So that is on you. Look at your user experience score, and first paint.
Instagram images, google maps, etc…
Copy your home page, then make modifications, and test that page. You can work out where your issues are.
Hi
Thanks for you reply!
Can i see one of your sites ?
I know some of my design decisions are slowing down my results but i’m more talking about
Speed: Leverage browser caching
Speed: Enable compression
Speed: Eliminate render-blocking JavaScript and CSS in above-the-fold content
Your page has 1 blocking script resources and 2 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Remove render-blocking JavaScript:
https://ajax.googleapis.com/ajax/libs/webfont/1.4.7/webfont.js
Optimize CSS Delivery of the following:
https://assets.website-files.com/5c4f57fc43b439047b4e872f/css/quai-no4.16c24ca56.min.css
https://fonts.googleapis.com/css?family=Oswald:200,300,400,500,600,700|Great+Vibes:400|Karla:regular,700
None of those things are going to make a difference when it takes 10+ seconds for your page to visually render. Your bounce rate will be huge. Focusing where you can make the most gains and on what you can control.
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fgrid-demo-2.webflow.io%2F
Even with an empty site the score is bad.
I get good results (90s) with webflow sites like @webdev. His points were all valid @TommyVirtuo . Could be worth checking out… Especially since that’s the first thing under ‘opportunities’ here, properly size images…
Really? I bet google could do better right?
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fads.google.com%2Fum%2FWelcome%2FHome%3Fa%3D1%26sf%3Dma%26__u%3D1194484248%26authuser%3D0%23cc
1 Like
For sure! i still have work to do but my concern is about the things i cant modify like the 3 other points.
Shouldn’t Webflow resolve them ?
do as i say, not what i do… lol
All their sites don’t respect what they want us to do
Exactly. Even MOZ pulls a yanky score.
I spent three minutes doing what I normally do on sites before going to production.
Desktop 100 mobile 99
Webflow hosting is one of the most powerful hosting technology in the world today (amazon cloudfront) + cache + cdns + very small css (vs css frameworks like bootstrap) + responsive images + minify css/html and a lot more.
“Poor server side”? Please read a little about cloudfront and test sites build on webflow (like @webdev said - first learn the ideas behind fast site).
Maybe learn this issue her:
Google core web vitals - Full Service Internet Marketing Company & Internet Marketing Tools
Hi Siton,
I do believe that Webflow is SUPER amazing although it has very big flaws like missing Multilingual built in CMS, Dynamic Slider/lightbox.
Maybe i missing something here but Isn’t Webflow supposed to make a responsive version of the images we upload to serve the best size to each devices? i believe i read that somewhere.
Please test this demo i just did https://test-seo.webflow.io/ with no images and tell me if you get the same result i get.
- Slow server response
- Compression not enabled
- Browser caching issues
- Render blocking CSS / JS found
Actually its here : Responsive images in Webflow | Webflow University
Uploaded image size
You can upload any image size you’d like, provided it is smaller than our 4MB limit. Your browser will serve whichever variant is best, based on device size and resolution. For example, if you upload a 4000px wide original image but it is only rendered at 300px width on mobile, your browser will serve the 500px variant that Webflow created in that context.
Huh, that’s weird really. It does say “slow server response time” on this demo site. But when I test my own site which is obviously heavier than this one it gets a “quick server response time”. Could there be problems with ecommerce side of things?
I would give you a strong suggestion to use the Chrome devtools built-in audit that uses lighthouse 4.0 for summarizing site performance. It is much more accurate in my testing. It is doing so from your internet connection not some cloud service that may or may not be using algorithms that are accurate.
With lighthouse you can view the code, you can see how measurements are made.
When you use your connection to test you can also use things like a cellular phone as a hotspot and see and measure real world performance. You can test desktop or mobile, controlling the simulation of bandwidth throttling and more. Since you can run it as a node.js module (headless), you can run it remotely from VPS’s from anywhere in the world and have a larger sample size.
1 Like
The answer is Yes. But and big “but”:
- The desktop image unchanged (So you should compress and resize your images).
- This idea not working yet for background images
In other words. If i want to upload 12 images - above fold - each one 3.9mb - and 9000px X 9000px - for set of social icons - no builder/code could disable this. And of course you get very slow site (This is not server side issue).
This site score is 98 (desktop) and 79 (mobile).
Out of topic - your site gets a lot of console errors (60+) (Maybe move this “before body” and test again):
<script type="text/javascript">
function scrollOn() {
$('#map').removeClass('scrolloff'); // set the pointer events true on click
}
function scrollOff() {
$('#map').addClass('scrolloff');
}
</script>
Beacuse you call Jquery ($) before Jquery load.