Going fast == Accessible && mobile friendly
●

●

●

●

●

●

Eliminate blocking. Your goal is to ensure all CSS and HTML ...
●
●

our servers are in Kansas, Utah, Texas.
Google page speed tool
○ If it tells your your images are fine, don’t trust i...
Upcoming SlideShare
Loading in...5
×

Page speed optimization

496

Published on

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><

Published in: Self Improvement
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
496
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Page speed optimization

  1. 1. 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
  2. 2. ● ● 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/

×