Page speed optimization

50 %
50 %
Information about Page speed optimization
How-to & DIY

Published on March 8, 2014

Author: devonauerswald

Source: slideshare.net

Description

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

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/

Add a comment

Related presentations

Related pages

PageSpeed Tools | Google Developers

PageSpeed SDK Integrate the PageSpeed server-independent optimization library into your web service or application.
Read more

Pagespeed - The tool and optimization guide

Find out what is slowing down your site with our page speed tool. The webmaster guide to faster sites and blogs.
Read more

Page Speed - Google Developers

PageSpeed Tools; list All Products. Sign in The PageSpeed tools analyze and optimize your site ... Integrate the PageSpeed Optimization Library
Read more

WebPagetest - Website Performance and Optimization Test

Run a free website speed test from around the globe using real browsers at consumer connection speeds with detailed optimization recommendations.
Read more

Page Speed Service for Website Speed Optimization - SubmitEdge

SubmitedgeSEO offers Web page Speed Optimization Service with 100% assurance of page speed with minimum 90 up to 96, without any changes on the website.
Read more

Page Speed Optimization - DreamHost

Overview. Page Speed Optimization is a feature that reduces website loading times by automatically optimizing web pages and the resources within ...
Read more

Optimize Images - PageSpeed Optimization - Tools and ...

Optimize Images: Optimize images by trimming excess fat and optionally transcoding. Inlines small images into the HTML
Read more

GTmetrix | Website Speed and Performance Optimization

GTmetrix is a free tool that analyzes your page's speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers ...
Read more

Page Speed

Website Speed is Critical to User-Experience. Speedy and optimized web pages lead to higher visitor engagement, retention, and conversions. IISpeed offers ...
Read more

Page Speed - SEO Best Practices - Moz

Page speed measures how fast a webpage loads. Learn how to optimize your site to increase your page and site speed.
Read more