Posted this elsewhere… forgot to add it to STM:
2 resources i’ve started using have GREATLY helped me optimize my pages to the max:
Once optimized compare your LP to other mobile sites (competing aff LPs, sites like m.bing.com, etc) w/
Are you using css sprites
Are you using lossless image files
Gtmetrix will point out all that and more shit that I still don’t understand… but I just nod my head and optimize like it tells me to.
I’ve reduced LPs from 20kb to 8kbs, from 30kb to 11kb…etc.
Also I highly suggest you use CDNs. I personally use Maxcdn and love it.
Enable gzip and have it compress stuff even further. Speeds up my stuff a lot when I use my cdn
Tip From Barman:
If anyone has any other resources please post them. Always looking to optimize performance to the max.
Great links, they are all very good. I also like to use
https://www.smushit.com/ysmush.it/ is good for compressing images
and here is some good reading
Also you can use this as I starting template for your landers https://html5boilerplate.com/ I would really suggest grabbing their template then stripping it down to the bare bones. They also have some good info on the site.
I’ve been doing alot of mobile optimization’s both server side and client side. I’ll do what I can to answer any questions you guys got.
Check this out for CSS sprites
Thanks for this, it’s really helpful. Would you mind sharing how you strip it down to the bare bones? I’ve been reading the documentation, but I still can’t tell what’s necessary vs what’s not for mobile landing pages.
Um, I used the delete key? haha, had to do that .
I pretty much just shit can everything because I dont remember the few lines I want to keep.
I normally start with something like this. There are some js calls on the bottom that would get deleted but it really depends on what I’m doing.
Extra tips for optimizing LPs for mobile:
1. Include full CSS in header, or at least the part that’s required for 1st page rendering. Will save you time on 1 extra HTTP request.
2. You CAN load Jquery or other JS for that matter asynchronously! (that’s badass tip that will reduce your effective page load time greatly, especially on 3G or low connections). Use headjs.com or alternatives for that. Requires some code digging or hiring a dev but it’s worth it. Check results with https://developers.google.com/speed/pagespeed/insights
3. Make sure nothing is interrupting your page rendering like external CSS or JS files. That’s main thing. Use as little images as possible, but if you absolutely need to, try converting them to CSS sprites.
4. Make sure your server is gzipping everything
5. Remove all code that is not required from CSS or JS files. Minify them!
6. Using external libraries like Jquery? Only use minified versions hosted on CDNs. Use custom JS? Experiment with using CDN for that, too. (MaxCDN is a safe choice, don’t bother doing your own research, at the time of writing it seems like the best solution. Alternatively – Rackspace CDN).
7. Page should load in under a second. No. Matter. What. (0.3 seconds is close to ideal but 3G network connections may not allow that kind of response physically).
8. Then… profit!
Wanna get uber-geeky and view Google’s super-nerdy technical presentation on building super-fast mobile sites? here you go: (presentation has a link to video, too if you have too much time)
All good tips!
CDNs: I’m currently running a test using the <a href='https://stackthatmoney.com/beyondhosting' rel="nofollow" target='_blank' onmouseout='UnTip()' onclick="Tip('
‘, BGCOLOR, ‘#DDDDDD’, BORDERCOLOR, ‘#000000’, BORDERWIDTH, ‘1’, WIDTH, ‘-500’, TITLE, ‘beyond hosting’, SHADOW, ”,FOLLOWMOUSE, 0, OPACITY, ’95’, FADEIN, ‘300’, FADEOUT, ‘300’, CLICKCLOSE, true,FOLLOWSCROLL, true,CLOSEBTN, true, PADDING, 0)” style=”font-style:Normal;text-decoration:None;text-transform:None;font-size:100%;”>beyond hosting CDN, which everyone will see very soon – hopefully today or tomorrow. It’s pretty impressive so far.
that sounds interesting caurmen, looking forward to that. I’ve been meaning to look into CDNs
digging out this thread as I have a couple questions regarding CDNs…
I recently started running a couple Mobile campaigns in Europe and as my VPS is in the U.S. I decided to try out the <a href='https://stackthatmoney.com/beyondhosting' rel="nofollow" target='_blank' onmouseout='UnTip()' onclick="Tip('
‘, BGCOLOR, ‘#DDDDDD’, BORDERCOLOR, ‘#000000’, BORDERWIDTH, ‘1’, WIDTH, ‘-500’, TITLE, ‘beyond hosting’, SHADOW, ”,FOLLOWMOUSE, 0, OPACITY, ’95’, FADEIN, ‘300’, FADEOUT, ‘300’, CLICKCLOSE, true,FOLLOWSCROLL, true,CLOSEBTN, true, PADDING, 0)” style=”font-style:Normal;text-decoration:None;text-transform:None;font-size:100%;”>beyondhosting CDN.
For now, I just put all my images + css on there which judging from my limited tests already improved loading times quite a bit.
So now to my questions…
– Generally speaking, what do you put on the CDN?
– CSS in header vs external on CDN?
I know some of this stuff probably depends on a case-by-case basis, but I would love to hear your opinions, best practices etc
This one is great for image reduction: https://luci.criosweb.ro/riot/
However, if you’re targeting smartphones and want your images to look good on retina displays, then what I’ve found to work is to double the image size, and reduce the size in the html.
Eg: image is supposed to be 50x50px. In Photoshop you make the size 100x100px. Then in your HTML inline make the size "height=50". Then you get a nice image on retina.
@andyvon – just saw this post!
Hope that helps!