Your SlideShare is downloading. ×
0
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Symfony Performance
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Symfony Performance

7,750

Published on

Covers Performance improvements with the Symfony web framework for PHP. …

Covers Performance improvements with the Symfony web framework for PHP.

- Google cares about user happiness, Google owns your 
search traffic

...so Google put page speed in PageRank (and crawl speed)
- Your site is more trustworthy and less frustrating
- Increase page views and ad impressions
- Increase conversions and revenue! It pays for itself!
- Bonus: run less app servers

Published in: Technology
4 Comments
11 Likes
Statistics
Notes
  • para cuando pones a produccion y tenes que hacerlo mejor!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • thank you very much.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • @devnull3 I re-uploaded the slides as a PDF. Hope that helps. Enjoy!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • please do not upload keynote files. you lock out linux and windows user. use a open format, add a pdf download possibilits. just a small click on export for you but really helps non apple users
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
7,750
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
80
Comments
4
Likes
11
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

  • Question: Who's already worrying about performance and doing something about it?




























  • 1. Cut out code you’re not using
    2. Make design decisions to cut out more images, use sprites
    3. Don’t go crazy with Photoshop when you’re designing

    4. Be careful about where you place your JS
    5. Minify and gzip your files
    6. Compress your images

    Use correct headers for your assets, we’ll go over that later.

  • Use correct headers for your assets, we’ll go over that later.

  • intro
    role at dogster
    excited to be here...wooo
  • origins of css sprite

    Started off in video gaming: sprites were used to build visual effects in games

    Has evolved to being used on all kinds of websites, like Yahoo, Facebook and Google.


  • Sprites are often confused as being a series of images, but it’s actually one large image
    Small images like buttons, roll-over or hover state, icons, logos, any small graphics
    Examples
    And they can be absurdly huge: Yahoo has one that is 380 pixels by 4314 pixels. It’s only 12KB

  • Examples of button states used in a sprite
  • Simple example of how css looks - mainly using background image style that calls the image and X and Y coordinates for background-position styles
  • -think of all the information that goes into the image file...there’s meta data, there’s a color table associated with each file, and so if you think of all that information in each image file, you can see how that can slow down your site
    - having a sprite reduces those number HTTP requests - and also makes the experience with images more seamless
    - classic example are rollover buttons. with a sprite having a static state and rollover state as one image - with CSS styling the hover class is seamless...
    - we may enjoy lightning fast download times in either our office or at home, but many of your users may not have that kind of speed, so we need to always keep in mind the user experience - if it doesn’t load, they’ll hit the back button

    -“sprite-able” - not all images should be used in sprites. ideal is buttons, icons, little graphics as you saw in the previous slide. no large images and no images that require a repeating background
    - dogster example: as a proof of concept, i took all the little images from the chrome, used a sprite generator that laid out all 32 images onto one large image and you can see the results

  • global elements = chrome = ubernav, nav, footer
  • Option 1 - take the widest image you have - that would be your width, then place all the images below. you can add as many as you want. the pain is figuring out all the coordinates
    Option 2 - Sprite generators make sprites super fast and super easy. the only problem is maintaining it - if you need to add images, you’d have to run it through again.
    - SpriteMe - bookmarklet service
    - Project Fondue - one i used. zip images, customiz how the images are laid out


  • basic example that illustrates what you can do with css3



  • Use correct headers for your assets, we’ll go over that later.















  • ×