Taylor Jasko gave a presentation on building WordPress web applications (webapps) to provide faster site performance. Some key points included: 1) Webapps are like desktop applications that use the latest technologies and feel native on devices. 2) WordPress can be used to create webapps by leveraging plugins, templating, and custom fields. 3) Performance can be improved by rendering content dynamically with JSON/JavaScript instead of traditional HTML pages. This reduces page size and load times. 4) Caching and cache busting techniques like hashing can make the content nearly instantly for users while still allowing search engines to crawl pages.

1. WordCamp 2012
WORDPRESS WEBAPPS
Taylor Jasko | NetDNA/MaxCDN
taylor@taylorjasko.com | @tjasko
http://bit.ly/wordpress-app

2. ABOUT ME
• Moved to L.A. nearly two months ago!
• Age: 19 years young
• Occupation: Online Marketing
Specialist @ NetDNA
• Swiss army knife of the web
- HTML, CSS, JavaScript, SEO/SEM, PHP, Django, Perl,
Ruby On Rails, Nginx, Apache, MySQL, Varnish, Memcached...
• Hobbies: cycling, blogging, developing,
designing, and StackExchange.
@tjasko

3. WHAT IF I TOLD YOU...
• You can make your site content download faster.
• Make your website handle tons of traffic.
• Have only two calls to your server per page load.
• Make your users happy with nearly instant page loads.
@tjasko

4. ENTER THE
WORLD OF
WEBAPPS
@tjasko

5. WHAT ARE WEBAPPS?
• The terminology is iffy.
• Some examples of common webapps: Gmail, Facebook,
Twitter, Dropbox, Google, and GitHub.
• Most would say a webapp is like a desktop application.
• So
what’s the difference between a webapp and a non-
webapp?
@tjasko

6. STACKEXCHANGE SAYS...

7. WHAT MAKES UP A WEBAPP
1 Compact (everything is a click away)
2 Interactive user interface (a ‘native’ feeling)
3 Using specific device features (geolocation, iOS’s viewport)
4 Driven by the user (not the scroll wheel)
5 Browser navigation not needed (back button is dead)
6 Working offline (HTML5’s local storage)
@tjasko

8. WHY WEBAPPS?
• They’re outright awesome.
• Users know how to navigate around them.
• Another excuse to use the latest technologies.
• Some of the fastest sites around.
@tjasko

9. WORDPRESS & WEBAPPS
Is WordPress really meant for this?

10. WHY ON WORDPRESS?
• WordPress offers an extensive interface to edit content.
• Friendly templating is built right in...
• Over 21,194 plugins.
• And lastly... custom fields!
@tjasko

11. YES, IT’S POSSIBLE!

12. WHAT’S FOR ME?
• Endless possibilities for a WordPress webapp.
- Realtor Listings, Yellow Pages, Product Showcase, Blog Posts...
• Better user interactions/conversions.
• Easier to manage and edit.
• Scale on ‘the cloud’... say buh bye to DDoSers.
• Most content can be static and is CDN-ready.
@tjasko

13. FANCY BUZZ WORDS?
- CDN (Content Delivery Network):
• Delivers your site’s static file
• Files transfer through hundreds of servers
• Redundant and scalable
• Files are sent to the user from the closest server
@tjasko

14. TYPICAL WORDPRESS THEME

15. TYPICAL WORDPRESS THEME

16. TYPICAL WORDPRESS THEME

17. TYPICAL WORDPRESS THEME

18. TYPICAL WORDPRESS THEME

19. TYPICAL WORDPRESS THEME

20. TYPICAL WORDPRESS THEME

21. TYPICAL WORDPRESS THEME

22. TYPICAL WORDPRESS THEME

23. TYPICAL WORDPRESS THEME

24. TYPICAL WORDPRESS THEME

25. TYPICAL WORDPRESS THEME

26. TYPICAL WORDPRESS THEME

27. TYPICAL WORDPRESS THEME

28. WEBAPP WORDPRESS THEME

29. WEBAPP WORDPRESS THEME

30. LET’S GET DIRTY...

31. LET’S GET DIRTY...

32. LET’S GET DIRTY...

33. LET’S GET DIRTY...

34. LET’S GET DIRTY...

35. LET’S GET DIRTY...

36. LET’S GET DIRTY...

37. LET’S GET DIRTY...

38. LET’S GET DIRTY...

39. WHAT’S WRONG?
• Markup is duplicated (the styling of the site)
• Repeated content (titles & links)
• Slower to download
• Can be fixed with JSON (Twitter, Facebook, & Google uses it)
@tjasko

40. MAKE IT SIMPLE
WITH JSON
JavaScript Object Notation
• No duplicate content
• Very minimal
• Tiny when compressed
• Nothing to mess up

42. POST ID

43. GRAVATAR IMAGE

44. PERMALINK

45. SLUG

46. POST TILE

47. DATE POSTED

48. TAGS

49. POST CONTENT

50. AUTHOR INFO

51. HOW SMALL IS IT?
@tjasko

52. HOW SMALL IS IT?
@tjasko

53. HOW SMALL IS IT?
@tjasko

54. THAT’S MORE THAN
3 TIMES
SMALLER!
@tjasko

55. BUT WHAT ABOUT STYLING?
John Resig
(creator of
jQuery) created a
mini JavaScript
templating
function.

56. JAVASCRIPT
TEMPLATING
• All
styling is delivered by the
web host, parsed by the
user
• Lessresources needed
on your server
• Faster for your users
and on your server

57. JAVASCRIPT TEMPLATING

58. TEMPLATE NAME

59. POST ID

60. COMPUTATION

61. GET IMAGE LINKS

62. CREATE LINKS

63. BUT IT CAN BE FASTER
A lot faster... nearly instant.
• As this JSON content is static, it can be cached.
• But what happens if I make an edit to the post?
• You can use a simple “hashing” system.
hashing system will use cache busting (based on
• This
query strings).
@tjasko

64. CACHE BUSTING
• A “random” string appended to the URL.
• http://5tatic.com/api/?post=samplepost&key=xyz123
• Thisvalue would be based on the last modified date of the
post.
• Let’s see how this would work...
@tjasko

65. Will output
something like...
d3ab37f3965
55224f4c5bf
59cac46ae4

66. WHAT ABOUT SEO
Search Engine Optimization
• Optimallythere will be two versions of a post.
- One version Google can see.
- One version users will see.
• When a post is loaded, it does it for search engines and users.
• On the homepage, Google can still crawl the site, even though
it is entirely dynamic.
@tjasko

67. SO, WHAT WERE THOSE
TWO CALLS?
• The first call to the server would be the main page.
• The second call would be an AJAX request to the server,
getting the hash various content types.
- First page of posts
- Any featured content
• Everything else can be served by a CDN:
- Images, CSS, JS, JSON, etc...
@tjasko

68. ENTER WORDAPP
http://GetWordApp.com
• Fully open source
• Incredibly fast
• Easy to follow
• Highly extendable
@tjasko

69. ENTER WORDAPP
Available
on now!
Check out GetWordApp.com
for more details.
@tjasko

70. ANY QUESTIONS?
Ask away WordPressers!
Check out GetWordApp.com
for more details.
taylor@taylorjasko.com | @tjasko