Page speed optimization
1 like790 views
The document provides guidelines for optimizing web performance, emphasizing the importance of fast loading times, reducing blocking resources, and effective use of CSS and JavaScript. It recommends techniques like using spritemaps for images, running PNGs through optimization tools, and ensuring proper character encoding and W3C validation. The overall message stresses that user experience is paramount and encourages rigorous testing to enhance performance metrics.
![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 23 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 utf8 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 readding 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 Keepalives
setting takes care of this on your server, and its good, but all the offsite 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 uncached 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 loadtime 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](https://image.slidesharecdn.com/pagespeedoptimization-140308111257-phpapp01/85/Page-speed-optimization-1-320.jpg)
Page speed optimization
- 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 23 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 utf8 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 readding 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 Keepalives setting takes care of this on your server, and its good, but all the offsite 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 uncached 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 loadtime 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