Optimize Posterous' HTML and Assets :)

15 views
Skip to first unread message

viatropos

unread,
Aug 3, 2010, 1:33:10 AM8/3/10
to Posterous development
A few friendly suggestions...

I'm working on a rich posterous theme and the development experience
could be better.

First, the added javascripts and stylesheets could definitely be
optimized. A quick look in Google Chrome and I see these:

- http://javascripts.posterous.com/javascripts/bundles/main.js (258kb)
- http://javascripts.posterous.com/javascripts/bundles/posts.js
(90.5kb)
- http://javascripts.posterous.com/javascripts/bundles/tagging.js (?)
- http://javascripts.posterous.com/stylesheets/bundles/post.css (30kb)
- http://connect.facebook.net/en_US/all.js (83kb)

They look like they're gzipped but they could also be minimized and
put into one file. Right now it's hovering around 400kb, which is
huge. Add that on top of a theme and the site takes a while to load.
400kb is larger than the Flex Framework.

Second, it would be nice if you could extract the inline javascript
out into the main.js file so everything is unobtrusive. The generated
HTML/javascript doubles the size of the rendered HTML, and add lots of
whitespace and stuff that makes it hard to read. I understand there
are tools like Firebug to inspect the DOM, but it's also nice to open
it in any browser to take a glance, I do that all the time. That
would take max an hour to fix :), and it would be greatly valued by
the developer community.

That's it, just some optimization suggestions to make customization
more rewarding :)

Well, that and javascript support so I can do custom analytics
tracking and animations. Until then!

Best,
Lance

Adam Singer

unread,
Aug 3, 2010, 1:21:05 PM8/3/10
to poster...@googlegroups.com
Lance,

You must have ESP because that's exactly what I've been working on! Expect much better-optimized assets in the near future.

I'm also adding class names all over the place so theme designers can better customize Posterous-generated elements.

> --
> You received this message because you are subscribed to the Google Groups "Posterous development" group.
> To post to this group, send email to poster...@googlegroups.com.
> To unsubscribe from this group, send email to posterous-de...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/posterous-dev?hl=en.
>

viatropos

unread,
Aug 3, 2010, 5:22:28 AM8/3/10
to Posterous development
Tumblr only adds an iframe, that's about it.

viatropos

unread,
Aug 3, 2010, 2:10:33 PM8/3/10
to Posterous development
Awesome! Thanks Adam.

I ported the theme to Tumblr too:

http://tumblr.viatropos.com/
http://posterous.viatropos.com/

If you look at the source for both, the Tumblr one only adds 1
compressed line at the bottom of the body tag consisting on 1 iframe
and 3 script tags, and it's nicely formatted. Posterous on the other
hand, adds a ton to the beginning of the head tag, and beginning and
end of the body tag and there's lots of crazy formatting.

It would be nice to have them be the same!

Lance

On Aug 3, 10:21 am, Adam Singer <a...@posterous-inc.com> wrote:
> Lance,
>
> You must have ESP because that's exactly what I've been working on! Expect much better-optimized assets in the near future.
>
> I'm also adding class names all over the place so theme designers can better customize Posterous-generated elements.
>
>
>
> > A few friendly suggestions...
>
> > I'm working on a rich posterous theme and the development experience
> > could be better.
>
> > First, the added javascripts and stylesheets could definitely be
> > optimized. A quick look in Google Chrome and I see these:
>

viatropos

unread,
Aug 3, 2010, 1:55:41 PM8/3/10
to Posterous development
Awesome! Thanks Adam.

I ported the theme to Tumblr too:

http://tumblr.viatropos.com/
http://posterous.viatropos.com/

If you look at the source for both, the Tumblr one only adds 1
compressed line at the bottom of the body tag consisting on 1 iframe
and 3 script tags, and it's nicely formatted. Posterous on the other
hand, adds a ton to the beginning of the head tag, and beginning and
end of the body tag and there's lots of crazy formatting.

It would be nice to have them be the same!

Lance

On Aug 3, 10:21 am, Adam Singer <a...@posterous-inc.com> wrote:
> Lance,
>
> You must have ESP because that's exactly what I've been working on! Expect much better-optimized assets in the near future.
>
> I'm also adding class names all over the place so theme designers can better customize Posterous-generated elements.
>
>
>
> > A few friendly suggestions...
>
> > I'm working on a rich posterous theme and the development experience
> > could be better.
>
> > First, the added javascripts and stylesheets could definitely be
> > optimized. A quick look in Google Chrome and I see these:
>

viatropos

unread,
Aug 3, 2010, 1:54:30 PM8/3/10
to Posterous development
Awesome, Thanks Adam.

I've ported the theme to Tumblr too:

http://tumblr.viatropos.com/
http://posterous.viatropos.com/

If you right click view-source for both, the Tumblr one only adds 1
compressed line at the bottom of the body tag consisting on 1 iframe
for the menu and 3 script tags for analytics, and it's nicely
formatted. Posterous on the other hand, adds a ton to the beginning of
the head tag, and beginning and end of the body tag and there's lots
of crazy formatting.

It would be nice to have them be the same!

What about javascript support?

Lance

On Aug 3, 10:21 am, Adam Singer <a...@posterous-inc.com> wrote:
> Lance,
>
> You must have ESP because that's exactly what I've been working on! Expect much better-optimized assets in the near future.
>
> I'm also adding class names all over the place so theme designers can better customize Posterous-generated elements.
>
>
>
> > A few friendly suggestions...
>
> > I'm working on a rich posterous theme and the development experience
> > could be better.
>
> > First, the added javascripts and stylesheets could definitely be
> > optimized.  A quick look in Google Chrome and I see these:
>

viatropos

unread,
Aug 3, 2010, 1:43:55 AM8/3/10
to Posterous development
Is there a way we could just opt out of importing the default styles
and Prototype framework? If we can't use Javascript, then we don't
really need prototype. It looks like it's only used for that
Posterous tag at the top of the screen.

On Aug 2, 10:33 pm, viatropos <lancejpoll...@gmail.com> wrote:
> A few friendly suggestions...
>
> I'm working on a rich posterous theme and the development experience
> could be better.
>
> First, the added javascripts and stylesheets could definitely be
> optimized.  A quick look in Google Chrome and I see these:
>

Adam Singer

unread,
Aug 3, 2010, 2:47:15 PM8/3/10
to poster...@googlegroups.com
Lance,

Prototype is actually used for more than you may think. Our comment form is loaded via AJAX, and there are other elements (such as the subscription element, the favorite element, and the edit box) that all require Prototype. Our photo gallery code also requires Prototype. We're also working on removing all inline Javascript from the HTML, so turning all that into OJS is going to require Prototype.

The CSS will also remain, but we're working to make it easier to override.

-Adam

viatropos

unread,
Aug 4, 2010, 2:49:20 PM8/4/10
to Posterous development
Sorry for posting so much, google groups was not showing posts, even
after a few hours.

Thanks for the heads up.

Lance
Reply all
Reply to author
Forward
0 new messages