Visio Webpage Slow - Optimization tips

[gunslingor]

Okay, I finally got Visio to output the perfect VML webpage with navigation, page selects, search, etc... The problem is that it is entirely too slow. I mean, to load the first page (which is just a key diagram showing all the shapes my other pages are using along with a description) it takes about 15-20 seconds. To load the second page (which is far more complex with lots of lines connecting like 200 network devices) it can take 2-5 minutes or it just crashes. It also appears I have to wait 2-5 minutes if I just switch IE tabs, or even just open an explorer window... everytime the IE tab with the visio page loses focus, I have to wait 2-5 minutes for it to show itself or just crash. Ignoring the navigation pain, if I just use the scroll bars to navigate the drawing, there is again a serious lag.... 3 seconds for the first simple page and 10-30 seconds for the second complex page. JPG, PNG, GIF all seem to be a good bit faster than VML, but alas, there is no page or drawing navigation. I've tried reducing the file size under file-->info--> reduce file size, and that dropped it from 9 to 7 MB. There was a noticable improvement, but it still simply is not acceptable. The drawing will likely be 10-16MB by the time I am done. I'm using Visio 2010 Premium under Win7 and IE9. Do other browsers work better I wonder?

So how on earth do I get a Visio Webpage to function adequately with complicated drawings?

Thanks.

[gunslingor]

I upgraded Microsoft Silverlight to the most recent version; for XAML file types, things definitely operate noticably a bit better.... almost acceptable, but still slow to load... also XAML has hyperlink problems so this mere partial solution is not a real solution. What do I do AHhhhhh!

[JohnGoldsmith]

What shapes are you using to generate your diagrams (ie which stencil/s and which masters?

Best regards

John

[aledlund]

As a benchmark, how long does it take to render on the system that you created it on. A design rule of thumb is that if it takes more than about three seconds you should simplify the drawing. After that it can go downhill pretty fast due to server loads, network congestion/transit time, workstation rendering/browser issues.
al

[Docman]

I suspect your performance will improve if you remove the search option when publishing the content - you can do this by clicking the publish button, then on the front screen that appears, where you can select options such as data, zoom, search, etc. Remove the Search and publish it again.

If your stencil's have a lof of shape data, this can also really slow things down because I've come to supect that when the browser loads, it also loads the search index of the visio you'd published, and this is the killer - the EMZ file, which is the actual background image, shouldn't be the problem. Are you linking in any external information for Data Graphics on your stencils too? the default shapes from meny vendors include a lot of shape data such as weight, shape height, all that stuff you probably don't need.

I don't know how anyone puts up with the silverlight implementation when exporting detailed network diagrams to HTML in 2010, the quality of the diagram output is very bad compared to the 2007 view and rack layouts are even worse when zoomed in - I suppose flow diagrams would be different.

Visio 2013 is just as bad with the HTML web export, doesn't look like they've done much to optomise what I think could be Visio's best feature.

Hope this helps.

[gunslingor]

What shapes are you using to generate your diagrams (ie which stencil/s and which masters?

-Mostly, I'm using the VSDfx-Generic-3D stencil available online, however, although I found these shapes to be perfect from a visual standpoint, I also found the construction of the shapes too complicated and error prone. For one, the thumbnail rendered in the stencil, not the drawing, didn't show the gradients in the shape, only solid wireframe like colors (down load and open to see it). Also, the shape tended to fall apart if you tried to do anything special like ungroup/re-group. So what I ended up doing was taking large screen shoots of each shape, pasting into GIMP, repasting as an image into Visio, adding connectors and shape text, then copying this new simplified version to the stencil. I'm also using a number of other custom shapes that were developed in a similar fashion and a few generic shapes from the networking stencils and the flow chart stencils.

As a benchmark, how long does it take to render on the system that you created it on. A design rule of thumb is that if it takes more than about three seconds you should simplify the drawing. After that it can go downhill pretty fast due to server loads, network congestion/transit time, workstation rendering/browser issues.
al

-With all 4 navigation pane options selected, I have the following load times (approximate) on my PERSONAL computer hard drive (no network involved yet). The first number is the load time of the simply key diagram, the second is the load time of the complicated second page showing the actual network which was accessed by using the page navigation control (IE9 and Firefoxs work a little differently):
VML: 5-15 seconds, 30 seconds-2 minutes (hyperlinks work)
XAML: 5-20 seconds, 1 seconds-2 minutes (doesn't appeear to work at all in firefox, hyperlinks appear messed up)
SVG: 5-10 seconds, 30 seconds-1 minute (but text size and a lot of other formating is messed up in this format)
JPG, PNG, GIF: Loads very fast, but I have no way to zoom in because the navigation isn't availible in these formats; I have to be able to zoom in and out. Also, even at the highest resolution during saving, the quality is almost, but not quite, acceptable.

When you say I should simplify the drawing, how exactly? When it comes to the quantity of connectors and shapes, I cannot reduce this. I also cannot make the drawing any smaller (48x34 inches). I can probably delete a large number of connection points with a lot of work, but will this affect load times if no connector is attached to the connection point?

I suspect your performance will improve if you remove the search option when publishing the content - you can do this by clicking the publish button, then on the front screen that appears, where you can select options such as data, zoom, search, etc. Remove the Search and publish it again.

It does help a quite bit. With no options selected and VML format, the complicated page loads in about 3-7 seconds, but this drawing is so large (48x34 inches) I have to be able to zoom in and scroll.

If your stencil's have a lof of shape data, this can also really slow things down because I've come to supect that when the browser loads, it also loads the search index of the visio you'd published, and this is the killer - the EMZ file, which is the actual background image, shouldn't be the problem. Are you linking in any external information for Data Graphics on your stencils too? the default shapes from meny vendors include a lot of shape data such as weight, shape height, all that stuff you probably don't need.

I double checked and there is little to no shape data in my drawing currently, which is expected the considering the way I created my shapes as described above. This may or may not change latter however since we are planning to eventual access device configurations via hyperlinks from this interface; now, it may just be that when you click a shape it takes you to an unrelated webpage run by a MySQL DB and apache server which'll house the configuration data... but I'm not sure yet how it'll work; we may do all this instead by importing the data into visio... but I suspect this would really bog down the system.

Is there a way to remove all shape data quickly?

[Docman]

Is there a way to remove all shape data quickly?

I hired someone to open every object data, edit shape Data and delete delete delete all the fields, I had to wear ear phones because the clicking was driving me nuts - this on quite a few A0 size network topology diagrams. This also happened on a screwed up data import where a bunch of extra columns were imported because the data source had a problem, and we had to maually remove a lot of them. I was looking for some sort of regedit type equivalent on the raw visio file where I could find/replace/delete type of thing, but I didn't come up with anything - feel free to share if you do though.

The only way to remove the shape data quickily is to select all shapes with EXACTLY the same shape labels, and then delete the shape data by right clicking one of the selected objects, data, shape data, click define and delete all the label fields until the window is empty. If one of the objects you selected has a different label to the others, this won't work as a group delete.

You can also remove "Shape Data" under the publish button when saving to a web - but the greatest thing about the web view is the ability to ctrl click an object and get information, so diabling this option makes the web view no better than a pdf.

Other ways to perhaps improve performance is to reduce your canvas size. You're working on more than A0 size there, and the browser is going to have extra issues working with that ammount of space. If you want to test it, take all your objects, cut them out and paste them on an A4 page, save it as web and it will probably load faster, with the same object count.

Final option is to cut the entire topology and paste is back as an enhanced metafile - this is done by "Paste Special", microsoft enhanced metafile option. This pretty much pastes your canvas back as a vector based image. Then save that to web and see how it goes - remember you'll loose all ctrl + click functionaltity on the objects - which again may make it pointless. I use this option when my Visio files are 120MB+ and I need to start cutting size when replicating layers to their own tabs, so I'm not sure how much use you'll get from it.

Hope this helps.

[gunslingor]

Yeah, good advice, thanks. I don't think it makes it pointless to remove the cntrl+click functionality, honestly it'll probably make life a lot easier. Rather than clicking like that and having all that data stored in visio, I'd rather just have a single hyperlink stored in visio that'll connect me to a webpage that uses a database to display relevant information. I don't trust Visio that much.

I went through all my shapes and deleted the SECTION "shape data", I didn't delete each individual row. Honestly, it's had little effect.

The slowness is primarily on page on, but also there is a real lag when I zoom, scroll or using the navigation map controls. This is the bottle neck I really need to fix. A lot of my shapes have spare connection points, some have more unused connection points than used ones. If I manually delete these one by one, will it have any effect? What else is there, what am I going to do =(. There has to be something to get this to work adequately. Is the slowness related to how I constructed my shapes? The vsd is 7MB and will probably be 10-16MB when I'm done. If I buy sharepoint and use that extremely vague "visio services" functionality, will that eleviate my issues?

[gunslingor]

If I changed the font from Calibri to something more standard, do you think it will help? I tried it, and it may have been slightly better but I'm not sure.

I went thru and made sure all my shape data sections were deleted, that definitely helped some aspect.

Also, the XAML format doesn't seem to lag at all on scroll, zoom or similar. It does lag, just like VML, on hyperlink or page render.

I also noticed that when I save as a webpage, XAML format, that in the subfolder about 180 pngs reside. Some, the shapes constructed in Visio, are only like 1-9 Kb while the ones I created in GIMP, inserted as image, and turned into a master appear to range from 50-160 kB. I guess that is a lot of data, is this what is causing the lags you think? What should I do here?

Any other suggestions? I could theoretically put up with the slow load times, but the hyperlinks are a real issue. If I click a hyperlink that is supposed to go somewhere else on the same page, the entire page is re-rendered... is there a way to stop this re-rendering?