Page speed optimization
Upcoming SlideShare
Loading in...5
×
 

Page speed optimization

on

  • 510 views

Basic 'how-to' guide for basic and advanced page speed optimization. Page speed optimization resides in the conversion rate optimization family and is one of the most overlooked items in the web ...

Basic 'how-to' guide for basic and advanced page speed optimization. Page speed optimization resides in the conversion rate optimization family and is one of the most overlooked items in the web development spectrum. For over a decade, countless organizations have quantified that faster websites result in more conversions, leads & revenue. %3Cb>rawr</b><

Statistics

Views

Total Views
510
Views on SlideShare
510
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Page speed optimization Page speed optimization Document Transcript

  • Going fast == Accessible && mobile friendly ● ● ● ● ● ● Eliminate blocking. Your goal is to ensure all CSS and HTML loads without anything getting in the way. ○ If your CSS file is gigantic, you may try dividing it in 2­3 css files, which is more http requests, but may load better. ■ Sometimes if you combine too much css or js into 1 file, it blocks, when its a matter of life or death, and it is, I always test this. It takes time. Take it. Your server declares the character encoding via apache thats good, here are <head> rules, generally. ○ Unless apache declares utf­8 charset, define the charset directly after the open <head>. This is in the HTML5 spec ○ Include external[from other domains] stylesheets first, then include your locally hosted css for concurrent loading ○ Defer all js to the </body> ­­ I make a concession for analytics, I want that data. You do too. Eliminate waste ○ Images are a priority. ■ Lots of tiny images should be in a spritemap, Wearekiss makes a great tool for this ■ Full Color/Photos should be progressive JPGs. Play with the blur and quality to get optimal. Quality should end in a 1 or 6, thats where the changes are. ■ Without exception, run all PNG files through tinypng.org. It beats photoshop. ■ Crop images tight ­ 0 white space, I go down to the pixel most of the time. ○ CSS ■ Use "dust me selectors" plugin in firefox to remove unused styles from CSS, this thing is awesome. ■ Use dreamweaver ‘apply source formatting’ or something that puts css rules 1 per line, this makes it easier for dust me ollectors. ■ When re­adding css, use the same order they were originally in to avoid issues. ■ Use simple selectors, not huge chained ones. This is bad for browser reflow ■ Avoid unnecessary dom depth. Each level of dom depth hurts browser reflow. ○ JS ■ Avoid using unnecessary plugins for everything, try to find raw javascript options. I literally always use jquery though, make sure you use 1.x, not 2.x [compatibility]. Defer to the bottom ■ Consider defer and ajax attributes for external sheets, I never use this, you may find a use. Avoid excessive CDNs/externally referenced sheets (your sites the first I’ve seen have this issue, this is a new rule for me) ○ Use page speed test to ensure you’re getting concurrent connections. The Apache Keep­alives setting takes care of this on your server, and its good, but all the off­site content is killing you. W3C ○ Matt cutts at google says this isn't an SEO factor or something like that. That isnt true, it is true the way he says it though. W3C validation is the difference between Quirks mode and Compatibility mode. ■ Quirks = 1 error or more, this document recalculates like crazy expecting to compensate. This is hash on mobile devices. It’s a big deal. ■ Compatibility = The browser knows what to expect. Every browser in the future will also render that page correctly. Use Caching, it’d be a terrible shame to require venture capital because while everyone is going crazy being too busy with the mountain customer base, thousands/millions of un­cached requests eat away at your progress and equity. I will say this site is incredibly snappy though and I do wonder if the CDN’s are to blame for that. Always favor the render start, time to first byte and render complete metrics over the load­time metrics. What matters: ● The user is #1 ● Milliseconds matter. Test test tes test again. ● WebpageTest.org ○ Select a server at your highest priority target. If it’s the US, test from the west or east coast. Most
  • ● ● our servers are in Kansas, Utah, Texas. Google page speed tool ○ If it tells your your images are fine, don’t trust it. Remember images are the biggest wins. W3cValidator ○ Not 1 error. Written by Devon Auerswald for Symbiotic.me Outsourcing https://symbiotic.me/