I am in the process of speeding the perceived load time of a website specifically aimed at the mobile platforms (iPhone primarily, Android secondarily, who cares about the rest...) I have already tried several general techniques for speeding load times for normal websites but I was wondering if anyone had specific pointers for the mobile web performance.
I am already bundling scripts, spriting images, lazy loading as much as possible, putting fixed sizes on things, linking css in the head etc. I want insights specifically for mobile.
For example I have heard that the iPhone will only cache files less than 25k so sometimes splitting a script/file into 25k chunks may give an overall boost since now they can be cached even though it caused additional connections to be made. Any other insights like this would be much appreciated.
Also, does anyone know of a good tool to test the load times in iphone?)
Ok, here's some measuring tools for you...
Steve Souders' mobile bookmarklet - http://stevesouders.com/mobileperf/mobileperfbkm.php (a bit limited on he timing front but has lots of interesting other features)
Stoyan Stefanov's iOS app for exploring page load - http://calendar.perfplanet.com/2011/i-see-http/ (very new, so not sure about it's limitations)
3P Mobile have their own iOS browser in beta that produces waterfalls - Android version was very good.
As far as optimisation goes...
The mobile cache may be small but you still have access to localstorage i.e. include CSS/js inline and extract and save to local storage - Bing mobile does this.
DataURIs are another way of reducing requests but of course the user loses the option to turn off images
Ensure you make good use of keep-alive and connection pipelining - splitting between multiple hostnames can get in the way of these so be careful if you do this.
Caching varies wildly between different phones an OS versions saw an article on it recently will see if I can find it again.
Yahoo! has a nice page about how to squeeze the most performance out of your site.
They also have a Firefox plugin (YSlow) that automatically checks whether your site follows them and suggest improvements. That plugin covers also performance problems that may affect mobile browsers.
I'd like to answer your call for a mobile web site profiling tool - WebDevTools:
https://play.google.com/store/apps/details?id=com.voltcode.webdevtools
disclaimer - I am connected to the company that released this software
While not being targeted for iphones, you could definitely test on various android models and get the load times.
From my experience, IPhone 4+ will load pages the same or better than HTC Desire and similar - both in general speed, but also in HTTP concurrency, etc.
Check out this testing solution:
Tutorial: Does Your Website Load in 3 Seconds?
http://blog.testobject.com/2013/09/does-your-website-load-in-3-seconds.html
Related
We have started to use Lighthouse to track the improvements we make to our sites. While this seems to work quite well for desktop sites, i.e. we see the values improve over time and as we make changes, for mobile sites the values remain consistently low. We do repeat the tests and use the best of three, but still.
Below, we have the results of the New York Times mobile site that appears to perform badly vis-a-vis the desktop site. The other two are sites of ours, the main site and the third one being our own.
Browsing the site (as well as the NYT, of course) this apparent bad performance cannot be felt at all.
The test procedure:
run same test three times for each site
mobile
no PWA
incognito mode
Now, while initially enthusiastic about Lighthouse's capability to evaluate a site by attributing aggregated figures that are easy to digest by management, we have the impression that they are not actually useful as they don't correspond to the users' reality and don't change even though we make changes.
Also, this being a Single Page Application, the first load of the page may take some more time, but any further navigation is quasi-instantaneous. We could not find a Lighthouse feature to take this into account.
No, you can't really rely on Lighthouse. As you've observed, well known fast websites perform badly in tests. While there are some reasons for this, it won't help you measure the actual loading speed. Caching being an important factor. Lazy-loading sometimes is confused as not yet loaded. So even if your website is loaded, Lighthouse might detect missing pieces and deem it not yet loaded.
Pingdom is great for that, and provides you with the options to test different regions, which I believe to be more realistic than one server fits all.
Also the Legacy version of GTmetrix is great because it points you directly to what improvements you can make but it tests only from Canada (unless you buy the PRO version). It takes caching into account.
I have been using PSI for mobile on our sites and worked well. Atleast mobile score was always better than lab data & my motivation was report was consistent on some external sites like https://covid19.ca.gov/.
Coming to tool works well for initial load but does not take into affect for one page app since cls is continuous evaluation has user scroll through CLS changes that is not simulated in tool. That is where field data differs.
Thanks,
Yet my site pages load very slowly. Usually there's a 2-3 second lag before the page renders, and I cannot figure out why.
My site is powered by Wordpress v3.4.2.
I'm on a dedicated virtual server with plenty of resources and
bandwidth.
There are no huge images loading.
My CSS files load before JS scripts.
I've spent a lot of time trying to optimize the site within the constraints of the platform (Wordpress + plugins, etc). I don't expect my site to be SUPER fast, but I need it to not be SO slow.
I'm using Chrome's developer tools to audit my site but the suggestions do not appear to explain the long load time (unused CSS rules, etc). When I look at the timeline, I see a 2.7x second load time initially but I can't figure out why. Can anyone help me get to the bottom of this?
My site is located here. The homepage has some extra scripts, so it may be more helpful to look at this page.
I found this superb guide which really helped me fight through the mire of optimising Apache for use with WordPress:
http://thethemefoundry.com/blog/optimize-apache-wordpress/
You said you have a virtual server so chances are it's currently set up to load EVERY module - you'll find a great speed boost here if you eliminate unnecessary modules. Keep a backup of your config file in case you screw it up.
Also - use the TOP command through SSH to see how much memory PHP is using. Probably a lot currently. This will all be improved through eliminating modules as per above link. You don't mention how much memory you have on your VPS but there's a good chance your performance issues are coming from memory thrashing which will be mitigated significantly by reducing how much memory each PHP instance consumes using the link above.
Also, it matters to find out where your performance issues are actually coming from – a great little plugin called WP Tuner helps me locate performance bottlenecks. The original plugin is incompatible but someone else has written an upgrade:
http://www.wwvalue.com/tuts/tut-wp/wordpress-profiler-tuner-revised.html
That will help you identify which specific parts of the page are taking the longest to load so you will immediately find your performance bottleneck.
In addition, a cool plugin called Debug Queries is useful for tracking down performance issues although the wordpress profiler above actually does track queries too.
Finally – I can’t recommend highly enough this WordPress.org discussion on performance, and specifically on W3 Total Cache vs Super Cache (both are excellent).
It’s a fantastic read for anyone looking for split-second response times:
http://wordpress.org/support/topic/wp-super-cache-vs-w3-total-cache
I use W3 total cache on one of my sites and WP Super Cache on another. Both are great. I used both so I could learn about both. I would say use WP Super cache plus all the other tools the guy at the link above recommends if you're looking for extreme performance, but if you're looking to get immediate performance W3 total cache is more comprehensive in its initial setup.
Hope that helps.
use caching plugin,
put JS files at the bottom,
try different webhost (DB server may be slow sometimes)
minify css and JS,
make fewer HTTP requests
make sure external services (like FB and others) are not slowing down (remove
them and see if it helps)
run Yslow or similar test
try to use typekit or google font instead of cufon
Have you tried http://wordpress.org/extend/plugins/wp-super-cache/ or a similar caching plugin?
Right now I'm paying 5 dollars a month for hosting to godaddy.com. Although there are no users registered yet (it's closed for maintenance mode as I'm testing and buiding it), it's slower than e.g. facebook. Does anyone have experience on using buddypress? What happens if my site blows up and draws a lot of users very fast. I guess I can get more expensive and better quality hosting, but is there a limit for buddypress based sites, especially when I'm using quite a few plugins.
BuddyPress scales quite high, so the code itself won't be a problem, even with tens of thousands of users. Your problems will probably be imposed by your host--limiting database transactions or sizes of tables--or specific themes taking a long time to render.
Firebug can be a great tool to use if you want to identify what component is causing a site to be slow. Instructions on using Firebug
I have been following the usage of JavaScript for the past few years, and with the release of extremely fast scripting engines (V8, SquirrelFish Extrene, TraceMonkey, etc.) the possibilities of JavaScript have increased dramatically. However, the usage share of Internet Explorer coupled with it's total lack of support for recent standards makes me want to drop a bomb on Microsoft's HQ, as it creates a huge amount of problems for any website.
The game will need to be pretty dynamic client-side, with animations and other eye-candy things, but not a full-blown game like those that run directly in the OS using DirectX or OpenGL. However, this might be a little stretch for JavaScript and will certainly feel extremely slow in Internet Explorer (given that the current IE engine can be hundreds of times slower than SFX; gotta see what IE9 will bring), would it be better to just do the whole thing in Flash? I know this means requiring the plug-in AND I have no experience whatsoever with Flash (other than browsing YouTube :P). It also means I can't just output directly from PHP, I would have to use XML or some other format to pass data to it (JSON is directly integrated in JS and PHP can deal with it easily).
Another idea would be to provide an alternative interface just for IE, though I don't know how (ActiveX maybe? or with Flash, then why not just provide it to all browsers) or totally not supporting it and requiring the use of other browsers, although this is plain stupid from a business perspective.
So here am I, wondering what approach to take and thus asking for your advice. How should I build the client-side? AJAX in all browsers, Flash in all browsers or a mix (AJAX for "modern" browsers and something else for the "grandpa": IE).
I recommend a plug-in platform (Flash, Silverlight, or Java) over AJAX. Having a clean layer of abstraction between your game and the client's browser is a big advantage. In any non-trivial AJAX game look forward to endless corner-cases where browsers differ in performance or implementation.
Personally, I think Flash is easy to learn if you are coming from AJAX experience. Flash is currently the most widely installed and proven plug-in for browser games. However, Silverlight and Java are both building momentum. Also, the Unity engine has become a popular choice for commercial browser games.
I think you shouldn't leave Java out of the equation. It's a powerful, fast language, and with Java applets, you can do almost anything. If you want hardware-accelerated graphics via OpenGL, JOGL can do it, even in an applet.
On the other hand, it might not be right for you. But at this early stage, I think you should evaluate all of your options, and since you have no experience with Flash but sound like you've got a bit of programming experience, you might feel more at-home with Java.
I believe the current answer is Flash game.
Alternatives:
Java Applet: getting less and less common those days and it is not commonly installed as a plugin on many computers.
SilverLight: too new and might vary and change in time. not commonly installed on many computers and it's Microsoft (whom tends to change technology every 2 years ...)
JavaScript / AJAX: Still a new kid on the block, it's on the rise it is true with many nice features, but still lack of good cross browser for IE even IE8, can not play sounds internally, still slower than the others, and you don't know where will it evolves.
Eventually probably the best solution for now is Flash development:
Cross platform. Works fast. Long time already alive and have a lot of support.
I hope this answer will change in the next year. Happy Peasach.
Check out Jmonkey. The "plugin" loads if you have Java on your machine. Once it's cached, the next time the visitor goes to the page, it your game loads very quick. Check out their website for demos and see what I mean: http://www.jmonkeyengine.com/
Oh, I forgot to say, it's a 3D scenegraph Java engine. I just tried it again, and it loaded in linux. Looks they've put in some good work.
Don't do it with javascript in the browser. And Flash really can be a pain just because it's closed source and you don't know if you've made a mistake or found a bug - speaking from experience. I'd never want to make another Flash game again.
How about using RaphaelJs , it is a Javascript library that make dinamyc images using SVG, and for IE, it try to make those images using the IE alternative: VML. Im using it on my own WebGame, but i dont really make complex graphics in it. The most complex thing done on RapahelJs was a heath map (20 * 20 tiles ) with a dinamyc opacity slider. An it work with jquery without any problem or configuration!
Suppose I'm writing a 2d tile based MMORPG.
Furthermore suppose I hate flash.
Lastly, suppose I only need my code to run in the latest safari, latest firefox, and latest chrome.
What are the limits to what I can and can't do? (Are there examples of good game engines that only require a recent web browser)?
Look into HTML5 Canvas http://en.wikipedia.org/wiki/Canvas_element
The latest versions of the browsers you mention already support it.
Check out the Unity3D engine: http://www.unity3d.com
Cross-browser, cross-platform, although your users would have to download the unity browser plugin...
There's also the Raphaël javascript library...it does a very nice job of abstracting a lot of the heavy lifting you'd have to do otherwise! The memory footprint seems decently light as well (from my small-scale playing around with it anyway).
For something that works for the user, OOBE (without add-ins etc); Javascript is probably the only unified functionality that exists between all browsers.
The browser is surprisingly quite capable (at least Chrome is), this is something that Google Chrome is attempting to promote (see http://www.chromeexperiments.com/). Notice some however, that experiments are often laggy or unworkable in other web browsers.
As for a list of things that are and aren't capable; that would take a fair while to compile.
In regards specifically to a 2D tile based game, I wouldn't say it isn't possible, but it may be quite difficult to create. As mentioned before, most browsers (apart from the stand-out; Google Chrome), suffer from limited resources. Therefore resources wise, it may be difficult to implement and would defiantly require a lot of requirement fore planning.
Java applets are also possible...
You could also move to 3D. While it does require a plug-in (although is being integrated into Chrome), the results are undeniable.
"O3D is an open-source web API for creating rich, interactive 3D applications in the browser." http://code.google.com/apis/o3d/. The video is quite amazing actually -- especially the live map editing (e.g. removing sprites).