I am pretty sure that I know the answer to this already, but I am interested to see if anyone has other ideas. We are working on a website to include a major redesign with mega menus. One of my top things in a redesign is to reduce the page download time as much as is possible. All my images, css and javascript are cached and that's good. However, the part that I am trying to work through is the html coding for the menu, and if there is a way to locally cache that within reason.
As a side note, I like to do things as pure CSS as possible (for SEO), and so that would include outputting the mega menus directly onto the HTML page. But at the same time, I know that if it takes a number of seconds for the page to download the html content at the top, well, then, we are probably going to be running some customers off there too. Maybe the best then would be to have JavaScript output the menus, but then you run into the couple of customers that don't have Javascript enabled.
Right now the pages are about 30K for the menus, and I anticipate that doubling and maybe more when we do the redesign.
Do you have some thoughts for this issue? What would you see as the best way to tackle this?
Thank you!!
JMax
Honestly, 30K for an element is nothing in this day and age, with high-speed connections common and browsers effectively caching as necessary. People don't leave because of a second or two. It's when you have Flash movies that preload or crazy auto-starting videos that people get annoyed in a hurry.
I've got a similar application with a menu that's likely double that right now...let me add, it's not by choice, it's something I inherited and have to maintain for the time being. The menu is output simply in an unordered list and then I use Superfish and CSS to do the styling as necessary. There's an initial hit, but after that, caching kicks in and we're good to go. Even as crazy as it is, the load isn't prohibitive. Navigating it, however, is a mess. I'd strongly recommend against confusing the heck out of your user with so many choices, especially on a mega menu that can be a UI hurdle for disabled and older users. When you boil it down, the whole basis behind the "Web 2.0 movement" (I hate that term) is to minimize or cloak complexity.
If you're REALLY concerned about performance, start off with what you're loading. Limit your Javascript by combining files, especially those small Jquery files that tend to stack up. HTTP requests can severely impact a site, especially since they monopolize the loads initially. Similarly, combine small CSS files and optimize the rest via an online tool To reduce image loads, create sprites for your graphics so you're loading one file instead of many. Here's a tut on Sprites and a simple google search will give you dozens of sites that will build the sprite and css automatically. Load anything you can from CDN, such as Jquery, Prototype, etc (hopefully only one framework per site, because two or more is unnecessary)
If you're still out of hand, look at your graphics one more time. Could you take advantage of pure CSS or image repeating via CSS to reduce loads further? Have you optimized all the graphics? Could you tweak the design to take advantage of those tricks?
After all that, if you simply can't change the menu to be more friendly, start investigating options. However, I suspect you'll find better gains in the first couple of steps than you would from taking extreme measures on the menu.
You could either set HTTP caching for a javascript code file that generates the menu, or use ajax to insert a pre-generated HTML menu from another file (again with a long expiry date set on cache).
Both those solutions require javascript through. I can't think of another way to remove the menus from the HTTP traffic apart from an IFRAME (yuck).
30k is massive for plain HTML though - do you REALLY need such a huge navigation structure?
Related
I've built my mobile site using the jQuery Mobile UI but I now realize that I need some functionality to be different between it and my desktop site (datepicker dates should be longer on the desktop site, etc).
I've looked into Modernizr and matchMedia to help me load separate js files but I can't figure out a nice way for it to work responsively. Modernizr only works (unless I missed something in the doc) on the initial load and I'm having problems with matchMedia executing multiple times as it crosses the min/max-width threshold. It works sometimes but the trouble is in adding/removing the separate js files. On top of that (but not a huge issue - I don't think), Chrome fires off an error when loading scripts into the DOM from another script.
Would the best thing be to write one js file and then add a listener such as $.mobile.media("screen and (min-width: XXXpx)") to the body's width, changing my needed values?
I may be making this too hard for myself, or missing something obvious because I'm trying to keep HTTP requests and site size as small as possible, but I can't figure out a good solution for this.
Thank you!
Lightning Round Bonus Question: Is it good practice/proper to keep all of the jQuery Mobile styling (data-role data-id data-theme) after switching to the desktop site? It looks awfully .. awful for someone only viewing it on a larger screen.
IMHO, the best approach would be to introduce a couple of flags in your javascript, like "isMobile", "isTablet" or "isDesktop", that would be set within a method attached to the "pageinit" event of your webapp. Later on, you could check that flags to act accordingly with the proper version in the specific parts of your code.
The way you can check that flags depends on your architecture. In the project I am working right now, I extract that information from a class attached by the back-end on the body of the page, but that's because we have that info. You could try to use a library like Harvey to observe the media-queries that would be trigger, and set the flags accordingly. I don't think that your options ends here, but I am afraid I can't help you more!
So I'm nearly finished with the website I had to make for my school's prom. Now, I just checked it in Internet Explorer and, well, it's hopeless. Elements aren't where they're supposed to be, most of the JavaScript/jQuery doesn't work at all. I am clueless where to start to make my site compatible with Internet Explorer. Whats the best way to make your site compatible with IE?
The main cross browser step is DOCTYPE Declaration. It is an instruction to the web browser about what version of HTML the page is written in.
It's going to be murder to fix what's already broken... you really needed to start off on the right foot, as it is you may need to re-write large chunks of your site in order to get things working again.
Going back? Well the easiest thing is going to be to start a fresh layout (using the following pointers) and then move your site into the new framework. Depending on the scale of your site this is no small task. Your alternative is one-by-one code debugging, with maybe firebug light
Going forward, how do you build a site that works more evenly across the board?
1 Use a reset CSS boilerplate
I like the html5 one at http://html5reset.org/. These apply layers of CSS to get each browser looking the same to start with (your CSS then gives it the style you want). Note they DON'T address the variety of ways browsers calculate things - borders being part of the width or not (firefox/ie difference)
2 Use a JS library
Or write your own, but be aware of all the differences between the browsers don't just code for the one you're using. Build some JS tests for the library that you can run in any browser to make sure that the library performs as expected, then deal with any site oddities after that. There's too many JS libraries to make a recommend but Prototype.js and jQuery are a popular two.
well it's known that there are differences between browsers. The way browsers render CSS code is also different. You should check parts and see how or if it works as you want. :) There is no one-to-all solution. The experience will let you know what works and what not. But to start you could isolate what is not working in IE (javascript code) and then see what alternatives you have. As for the appearance, there is the option of having separate CSS files especially for IE. However, often there is a technique(a different way to implement the same appearance) that lets you create the appearance you want without multiple versions of code.
ive seen the plugins etc to create a carousel of images etc, but what i want to achieve is having a content slider.
The content would be approx 500x400px, i was hoping to just give the content a div with unique id, and have it show for, say 6 seconds but if your mouse enters then for animation to hold.
I was thinkin along the lines of using:
$(#id).fadeOut(*time*);
Im on my mobile so its not the best example of code. Id be using set Interval for timeouts, however, do you think i should opt for a plugin? I already use many on my site, so would prefer just this page to use some simple jQuery.
This can be done in jQuery without too much work. You already know about setInterval() and the jQuery animation functions. All you'll need to do is implement mouseenter() and mouseleave() to properly pause and continue the animations. Perhaps a setInterval() every time mouseleave() and a clearInterval() every time mouseenter().
I agree with marcosfromero that plug-ins are great so you don't have to develop the whole thing again, but you stated that you have a lot of plug-ins already, so it could be better to write it yourself so that you gain more experience and have more control over it. I would say the choice to go with a plug-in depends on whether you find one that fits your needs and the size of it (even with minify, size does matter and one must consider blocking while JS files load).
If a plugin works for you, I don't see the point in developing the whole thing again.
Recall that most plugins offer a minified version so size wouldn't be a matter.
You can also use some automatic tool to minify code and join several JavaScript source files to prevent lots of requests.
If you still think the plugin is too big for your needs, consider inspiring yourself with the plugin's source code.
My organisation are an ecommerce company and have a numberv of pages displaying a long list of products, some pages can have 20 products while others may have up to 100! - Don't ask me why!
I have been tasked with improving the load times of these pages, profiling shows that the majority of the load time is from the markup - there is too much of it!! Due to the amount of info the business must show the markup cannot really be reduced.
This leads me to looking at alternatives and one would be lazy loading of the product markup as the user scrolls down the screen (we currently use this technique for product images).
Does anyone have any experience with doing such a thing that they could share? - the worry is that this could impact performance within the page
Any alternate methods would be listened to as well
Look forward to any opinions
You can dynamically load content while scrolling.
You can load all key data in your barebones HTML and then add necessary markup flourish with Javascript.
Alternatively, you could send a compact XML document and apply an XSLT transform on client side if client accepts it (see 'Accept:' header).
One thing to look at is adding in compression to what the browser is sending. This will substantially reduce the page payload.
As others have mentioned, loading page content can cause a number of problems, especially for users with accessibility needs (which is a much larger percentage than most people think)
I used the following aproach to hide the makeup time to render/create the content (android, jq and jq-mobile)
a) The content is generated in the background. Always small pieces are created (duration 20-30ms) and insert into the dom. After around 50ms (setTimeout) the next piece is created and inserted into the dom
b) Android specific: I noticed that the first selection of an DOM element (e.g. $(‘#xyz’) )takes relatively long (approx 10ms) . If the element is accessed the second time, it takes only 1ms (Samsung S3).
Hope this helps
I am attempting to build out a visual jQuery based browser for thumbnailed assets grouped by the upload date of the asset. The backend part is fine, but I'm having a really hard time finding a workable visual solution that can handle (potentially) hundreds to thousands of assets smoothly. The display of the content is not an issue as it is being handled by a lightbox, I just need to figure out a way to actually display the thumbnails.
I've been trying to interface with this plugin but have been running into a lot of problems once it gets over 100 records, everything just becomes horribly unresponsive. Ideally I want to be able to build ajax into this for loading media as needed rather than a bulk get on page load. Does anyone know of a good plugin that can be leveraged to achieve this effect or at least provide a good user interface for browsing large amounts of content?
To clarify: I have properly generated thumbnails being made when an asset is uploaded, these are what are displayed on the page, and the full size image is only loaded in the lightbox when the thumbnail is clicked. I'm just trying to determine a good way to browse a large quantity of thumbnails sorted by upload date.
It sounds like your scaling the full size images down which will ruin performance. Do the images have a small version counterpart you can use for the thumbnails?
Turns out there really wasn't a good way to implement a prebuild plugin for this situation, the best way to do it for me was to implement a jQuery UI slider and on the stop event of that I then do an ajax get to load the appropriate data into a div with vertical scrolling.
Maybe not the most elegant or prettiest solution, but it works for the situation and looks nice enough.