Home > Mobile >

My resources (so far) for Optimizing Mobile LPs (12)

07-03-2012 08:37 PM #1 mrgodlike (Member)
My resources (so far) for Optimizing Mobile LPs

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:

http://gtmetrix.com/

http://www.blaze.io/mobile/

Once optimized compare your LP to other mobile sites (competing aff LPs, sites like m.bing.com, etc) w/
http://whichloadsfaster.com/

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:

Originally Posted by BARMAN

Very cool tools.

I don't like how GTMetrix is grading on specifying image sizes though ... Everything else is great info.

I use this for making CSS Sprites - http://spritegen.website-performance.org/

If anyone has any other resources please post them. Always looking to optimize performance to the max.

07-03-2012 10:10 PM #2 tijn (Moderator)

Awesome!

07-04-2012 03:28 PM #3 leber026 (Member)

Great links, they are all very good. I also like to use

These aren't just for mobile bu you can view a waterfall and see whats loading slow.
http://tools.pingdom.com/fpt/
http://www.webpagetest.org/

http://www.smushit.com/ysmush.it/ is good for compressing images

and here is some good reading
https://developers.google.com/speed/...es/rules_intro
https://developers.google.com/speed/...actices/mobile

Also you can use this as I starting template for your landers http://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.

07-21-2012 07:10 AM #4 turtle_hammer (Member)

Check this out for CSS sprites

http://spriteme.org/

08-08-2012 10:58 PM #5 turtle_hammer (Member)

Originally Posted by leber026

Also you can use this as I starting template for your landers http://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.

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.

08-11-2012 02:33 AM #6 leber026 (Member)

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.

HTML Code:

<!doctype html>
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>

  </header>
  <div role="main">

  </div>
  <footer>

  </footer>


  <!-- JavaScript at the bottom for fast page loading ! NOT ALWAYS POSSIBLE-->
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script>

  <!-- scripts concatenated and minified via build script -->
  <script src="js/plugins.js"></script>
  <script src="js/script.js"></script>
  <!-- end scripts -->

  <!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
       mathiasbynens.be/notes/async-analytics-snippet -->
  <script>
    var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script>
</body>
</html>

05-14-2013 02:32 PM #7 nefig (Member)

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)

05-14-2013 03:10 PM #8 caurmen (Administrator)

All good tips!

CDNs: I'm currently running a test using the Beyond Hosting CDN, which everyone will see very soon - hopefully today or tomorrow. It's pretty impressive so far.

05-15-2013 05:04 AM #9 tmcalvin (Member)

Originally Posted by caurmen

All good tips!

CDNs: I'm currently running a test using the 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

02-05-2014 08:56 AM #10 andyvon (AMC Alumnus)

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 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?
- full javascript inside html file before </body> or external .js files 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

02-12-2014 08:09 AM #11 auditor (Member)

This one is great for image reduction: http://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.

02-12-2014 06:09 PM #12 caurmen (Administrator)

@andyvon - just saw this post!

I'd normally stick images on the CDN. I wouldn't stick CSS on there unless the lander has a lot of it - Bootstrap-based lander or similar - a few hundred bytes of inline CSS are probably faster than spawning a new connection. Javascript I'd put before </body>.

Hope that helps!

Home > Mobile >