Streaming live at 10am (PST)

Need help optimizing my site


#1

Hello, when I’m in the designer it is lagging quite a bit. Its becoming difficult to edit my site. Can someone help me trouble shoot?

Thank you in advance!


#2

Hi @wethebirds Thanks for posting this, this definitely sounds like odd behavior.

What sites are you seeing this issue occur in? When did it start occurring? Can you send me the site Read-Only links please?

Please send me screenshots of the behavior you're describing.

Can you please try the following:
(1) Try to reproduce the error while being logged into Webflow using Incognito mode with browser extensions turned off: https://support.google.com/chrome/answer/95464?hl=en
(2) If the problem persists, please take a screenshot of your Console and send it to me: https://developer.chrome.com/devtools/docs/console

Could you please let me know what browser version you're using by sending me your information from this page?

There should be a small share link when you visit the page which you can send to me.
If you can't share it publicly can you please share it with us on our Contact page.

Thanks in advance!


#3

Thank you for getting back to me so quickly!

Here is the read only link to my site:
https://preview.webflow.com/preview/wethebirds?preview=60549f59a7c24afe05e034ec76e8b4d3

Here is the info on my browser:
whatismybrowser.com/w/3DEZPG7

Does it sometimes fix the issue to use "incognito mode"? I am using that now (for the first time) and my webflow designer is working better than usual. It does usually start out fast and slows down the longer I am working in the designer.

Here is a screenshot of my console


#4

Hi @wethebirds, yes, often using incognito mode will help, especially if there are any browser extensions loaded that might be conflicting with the designer code.

Is the issue regarding performance better for you now? One thing to do with all sites is to compress your images and keep them individually around 300kb in size and to keep your individual pages lightweight, not too many images to make the page really heavy. Here is a good article to maximize performance: https://webflow.com/blog/how-to-boost-your-sites-performance

Also, check if there are any styles that can be cleaned up from the style manager. The more styles you have on a site, the more load there is.


#5

This started happening to me as well, last night in particular.


#6

Hi cyberdave -
Thank you for your response!

At first, I thought it was better when using an incognito window but unfortunately the lagging persists :frowning:

I always clean my styles in the style manager, so unfortunately I can't do any more cleaning there.

All of our images on the site are definitely saved for web and size around or under 300kb. Our website is very image heavy (because we are a fashion blog and rely heavily on imagery for our content). I have a suspicion this may be the issue? But what do you suggest we do to make this better? I don't know how to remedy the situation because we do need to display a lot of imagery!

I can hardly use the Designer — making updates to the design is becoming very time consuming. I am concerned because we will be creating more and more content. I want our site to be able to handle all of our content for years to come!!

If you have any ideas, suggestions, or even can refer me to someone who can help me trouble shoot this, I would greatly appreciate it!


#7

Hi @wethebirds - I just ran a couple of your images through tinypng.com and was able to further reduce images sizes. I would suggest making sure all your images are actual size (if they're not already) and running them all through tinypng.com (especially as you have so many and want to add many more). You should do this for all new images too. Page Speed Insights also says there is room for further image optimization:

https://developers.google.com/speed/pagespeed/insights/

You may be aware of all this already! Regards Kai

EDIT! Sorry - I meant to add - your website pages are quite slow to load on my pc - doing the above might help this and also help with the Designer. :smile:


#8

Kai,
Thank you so much for your feedback.

I am going to work on compressing images going forward. I use photoshop “save for web” and I am certain I can get my file sizes even smaller than they are currently.

Question - in order to compress the images that are already on the site, do I need to manually comb through the site, compress each individual image, and then re-upload each individual image? Or am I missing a way to do this more quickly?


#9

If you go here:
https://developers.google.com/speed/pagespeed/insights/
and put your site url in, google will actually give you the compressed images.

You do have to do it for each page.


#10

@mastermindesign looks like everybody needs to clean up :wink:


#11

yeah haha, I know, I don’t take page speed insights grades very seriously, more of just recommendations. anything close to 80 is great.

I was just saying that you can use that to download optimized images without having to use jpgmini or pngpanda etc. there is a link when you run the speed test to download all the images in a .zip from google.


#12

@mastermindesign ahah yes i know and thanks a lot for sharing it btw i didn’t knew the download image exist from there ! :webflow_heart:


#13

Hi @wethebirds - It’s my pleasure :smile: I also use Photoshop Save for Web but then also run them through tinypng.com. If you have an image heavy site, it will make a big difference. You can upload and save 20 images at a time in tinypng but yes, unfortunately, you would have to re-upload all your images. I guess this would also mean having to delete all your current images too (as your post is about designer lag).

Google Insights, I think, only recommends certain images for optimization, not all the images on your site. Can you download all the images on your site as optimized from Google? Not sure… As your post was more about the designer lagging than google page speeds, replacing all your images with lower file sized versions will help with the lag, and I would use tinypng (or equivalent!) to maximize the optimization of all your images.

As you have over 300 images in your blog alone, each at 1200px, you could maybe think about redesigning your blog post template to use smaller images - just an idea! I only say this as you want to add hundreds more images in the future. How laggy will it be in 5 years time?

I recommend doing this from my own experience. I had a site with lots of images that I had not optimized fully (just Save for Web in PS) and the designer was very laggy. I optimized all the images through tinypng.com, re-uploaded them and now the designer doesn’t lag and the site loads quicker.

It will be a big job to replace all your images. A nice summer job! I don’t envy you! :wink: Any other suggestions anyone? All the best - Kai


#14

Lol @keejo this is quite a hefty job! I always save for web on PS so all of our images are under (or slightly above) 300KB, but since you have also experienced this issue and used tinypng.com + PS - I am willing to give it a try! This lag is killing me… I can hardly make updates to the design lately!

Do you know of anyone who could help me optimize my site in other ways? I am curious if there are other things I can do to help my site speed.


#15

I prefer Website Grader over Pagespeed - it rates my site 97/100, the highest any Webflow hosted site can get.

(the email field is optional)

Check yours here https://website.grader.com/results/wethebirds.com


#16

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.