WordPress Greek Community - FOSSCOM 2015 - Website optimisation - Takis Bouyouris

Transcript

1. FOSSCOM 2015
   "Website Optimisation"
   Takis Bouyouris, Nevma
   

   View Slide

2. Thank you FOSSCOM
   WordPress Greek Community
   is proud to be here
   

   View Slide

3. Who am I?
   Takis Bouyouris
   Software Engineer
   Web Developer
   Co-founder @ Nevma
   WordPress Greek Community
   Hello World!
   

   View Slide

4. Basically, I build websites
   and web applications most of
   them based on WordPress
   

   View Slide

5. Not impressed?
   Okay, but building
   a "good" website
   is not always such
   a simple task!
   

   View Slide

6. A "good" website must:
   look good
   function well
   and be
   ...faaast
   

   View Slide

7. Why fast?
   Why not slow?
   I'll tell you why!
   

   View Slide

8. 1. Fast is good,
   saves time, saves resources
   keeps users happy!
   

   View Slide

9. 2. Fast means
   more conversions
   (whatever that means for you
   be it sales, pageviews, emails etc)
   

   View Slide

10. http://www.webperformancetoday.com/2012/02/28/4-awesome-slides-showing-how-page-speed-correlates-to-business-metrics-at-walmart-com/
    

    View Slide

11. 3. Google says so
    Speed is a SEO ranking factor
    because it is good for the users!
    Webmaster Central Blog:
    http://googlewebmastercentral.blogspot.gr/2010/04/using-site-speed-in-web-search-ranking.html
    

    View Slide

12. Website optimisation...
    Performance!
    Wait what is performance?
    

    View Slide

13. Good performance requires:
    The completion of a request
    in a fast -or perceived fast-
    timeframe, with a reliable and
    predictable outcome.
    

    View Slide

14. Websites live on HTTP requests
    Phases in every HTTP request
    1 – Browser
    2 – Network
    3 – Server
    4 – Network
    5 – Browser
    

    View Slide

15. http://chimera.labs.oreilly.com/books/1230000000545/ch11.html
    

    View Slide

16. A modern web page
    means lots of files!
    

    View Slide

17. You forgot the GIFs!
    

    View Slide

18. In order to optimise a website
    you need to optimise all three:
    1 – Server side
    2 – Network layer
    3 – Browser side
    

    View Slide

19. Server Performance
    Operating System
    File system
    Database layer
    Web server
    Application layer
    (more of a system admin's job)
    

    View Slide

20. Network performance
    DSL, ADSL, VDSL
    2G, 3G, 4G, HSDPA
    WiFi, Ethernet
    (cannot do much about that in HTTP)
    

    View Slide

21. Browser performace,
    where frontend developers
    (should) shine!
    phase-1 : until page has loaded
    phase-2 : after page has loaded
    

    View Slide

22. Browser / phase-1
    until page has loaded
    DOMContentLoaded and load
    Javascript DOM events
    

    View Slide

23. Browser / phase-2
    after page has loaded
    Animations
    One-page apps
    HTML5 games
    

    View Slide

24. But now let's focus on
    website performance
    which means:
    How to make a website
    load faster!
    

    View Slide

25. First, we need a tool to
    measure website performance
    All modern browsers
    have Developer Tools
    with a Network tab!
    

    View Slide

26. But the best way is via
    an online service which
    - is objective
    - has stable conditions
    - provides good metrics
    

    View Slide

27. Webpagetest.org
    the best online, free tool out there
    

    View Slide

28. Why Webpagetest.org
    - Real machines
    - Real browsers
    - Simulated networks
    - Stable, uniform conditions
    - Cities, devices, options
    - Open source
    

    View Slide

29. View Slide

30. Gtmetrix.com
    pretty decent, freeware
    

    View Slide

31. How to optimise
    a website's load time
    (at last!)
    

    View Slide

32. First keep server side healthy
    - Secure your OS
    - Perform regular updates on
    OS, app server, db server
    - Keep as less files as possible
    especially images, even gifs
    - Database garbage cleanups
    - Database tables optimisation
    

    View Slide

33. Also, server side
    - Allow HTTP keep-alive
    - Enable GZIP for texts
    - Avoid 404 requests
    - Use multiple domains
    - Avoid redirects
    

    View Slide

34. WordPress specific tips
    - Delete old post revisions
    - Delete auto drafts
    - Delete spam comments
    - Delete unused terms
    - Set revisions not too often
    - Set number of revisions low
    - Use few custom image sizes
    - Cleanup old sticky posts
    - Delete orphaned post meta
    - Avoid frequent hooks and filters
    like "pre_get_posts"
    - Avoid long taxonomy "not-ins"
    - Remove unused plugins
    - Remove unused themes
    

    View Slide

35. Then keep your codebase clean
    - Write quality code which
    is fast and maintainable
    - Choose quality addons
    themes, plugins, etc
    - Test early, test often
    aaand
    - WRITE QUALITY CODE!
    

    View Slide

36. Next:
    The browser!
    

    View Slide

37. Help browsers render web
    pages as fast as possible...
    Wow, that was deep!
    (not Depp, get it?)
    

    View Slide

38. Assuming
    your web server is
    not too slow and
    the network is
    not holding you back...
    

    View Slide

39. Rule No 1
    Make as few and quick
    HTTP requests as possible
    

    View Slide

40. Rule No 1 again
    Seriously
    Make as FEW
    and QUICK
    HTTP requests
    as POSSIBLE!
    GIF on the right is there
    just to draw your attention
    Did it?
    

    View Slide

41. Combine and minify CSS files
    - Smaller file sizes
    - Less HTTP requests
    

    View Slide

42. Put CSS in the HEAD
    - Is downloaded asynchronously
    - Helps browsers start rendering
    page as often as possible
    * Except for "critical" CSS
    

    View Slide

43. Combine and minify JS files
    - Smaller file sizes
    - Less HTTP requests
    

    View Slide

44. Put JS before BODY end
    - Because Javascript is "blocking"
    - Helps browsers start rendering
    page as early as possible
    

    View Slide

45. Everyone will tell you to minify
    HTML too, but honestly, it won't
    make much of a difference!
    

    View Slide

46. Compress images
    - Think of mobile devices, too
    - JPEG should be preferred
    - JPEG sizes can be reduced a lot
    - PNG sizes can be reduced a lot
    - WebP, the new kid on the block
    (Many tools online for this)
    

    View Slide

47. Use image sprites
    - Combines many images into one
    - Smaller file sizes
    - Less HTTP requests
    

    View Slide

48. Use SVGs
    - Scalable vector graphics
    - One file, one download
    - Scales at any size
    But, be careful, too many of them
    can slow down your browser!
    

    View Slide

49. Rule No 2
    Cache everything
    for as long as possible
    

    View Slide

50. Cache on the server
    - Cache whole requests
    - Use object cache
    - Use query cache
    - HTML fragment caching
    - Opcode caching
    

    View Slide

51. Cache on the browser
    Add expires headers
    Favicons -almost- never change
    Font files -almost- never change
    Styles and scripts rarely change
    Images also very rarely change
    HTML might change (but it depends)
    Be prepared to un-cache (invalidate) content
    

    View Slide

52. What expires headers do
    They turn 200-OK into 304-Not-Modified
    

    View Slide

53. Use a caching server
    like Varnish
    and/or a CDN
    not because it's fast, but
    because it is distributed
    

    View Slide

54. "Edgy" hipster stuff
    - SPDY, HTTP2, HTTPS
    - Page prefetching
    - DNS prefetching
    - Async and defer in SCRIPTs
    (Google them)
    

    View Slide

55. Bored to death yet?
    

    View Slide

56. Just remember this:
    Try to make as few HTTP
    requests as possible and cache
    as much as you can
    ...and you 'll be half way there!
    

    View Slide

57. The end – Questions?
    

    View Slide

58. http://wpgreece.org/
    http://www.wpgc.gr/
    https://www.facebook.com/groups/WordPressGreekCommunity/
    https://twitter.com/wpgreeceorg/
    https://www.youtube.com/channel/UCn2JrgFY9lHO85gGTAlfw0A/
    https://speakerdeck.com/wpgr/
    (or just Google us)
    

    View Slide

59. Thank you!
    takis@nevma.gr
    http://takis.nevma.gr/
    f @ takis.bouyouris
    

    View Slide

60. View Slide