SitePoint
  • Premium
  • Library
  • Community
  • Jobs
  • Blog
LoginStart Free Trial
Jump Start Web Performance
Jump Start Web Performance
Notice of Rights
Notice of Liability
Trademark Notice
About Craig Buckler
About SitePoint
About SiteGround
Preface
Who Should Read This Book?
Conventions Used
Supplementary Materials

1

Web Performance Matters

The Cost of Poor Performance
The Reason for the Woeful Web
Where do I Start?
Create a Test Plan
Identify Performance Bottlenecks
Performance Tool Concepts
Google Lighthouse/Chrome Audits
DevTools’ Network Panel
Chrome’s Performance Monitor
Developer Tools’ Performance Panel
DevTools’ Console Logs
WebPageTest.org
More Performance Assessment Tools
Consider Your Hosting Plan
Use a Content Delivery Network
Use Image and Video CDNs
Activate Server Compression
Activate HTTP/2
Leverage Browser Caching
Enable CMS Page Caching
Check Your Primary Images
Concatenate and Minify CSS
Concatenate and Minify JavaScript
Minify HTML
Load JavaScript at the End of the Page
Preload Assets
Remove Unused Assets
Assess Analytics Performance
Something More Substantial?
Optimize Your Database
Remove or Optimize Social Media Buttons
Be Wary of Third-party Scripts
Use Responsive Images
Define Responsive Image Aspect Ratios
Implement Art Direction
Lazy Load Images and Iframes
Play Audio and Video on Demand
Replace Images with CSS3 Effects
Use SVGs Effectively
Consider Image Sprites
Consider OS Fonts
Embed Web Fonts with
Limit Font Styles and Text
Use a Good Font-loading Strategy
Consider Variable Fonts
Use Modern CSS3 Layouts
Remove Unused CSS
Be Wary of Expensive CSS Properties
Embrace CSS3 Animations
Avoid Animating Expensive Properties
Indicate Which Elements Will Animate
Use CSS Containment
Check the Save-Data Header
Adopt Progressive Web App Technologies
Power Down Inactive Tabs
Consider Inlining Critical CSS
Provide Accelerated Mobile Pages (AMP)
Feeling Full Yet?
Evaluate CMS Templates and Plugins
Reduce Client-side Code
Optimize JavaScript Code
Modify the DOM Effectively
Consider Progressive Rendering
Use Server-side Rendering
Do You Need a JavaScript or CSS Framework?
Use a Static Site Generator
Use a Build System
Use Progressive Enhancement
Adopt a Performance Budget
Create a Style Guide
Simplify and Streamline
Learn to Love the Web

Testing Tools

Unlock This Title

You do not have access to this section. Get the full version of this title with a SitePoint Premium Account.

Start Free TrialRead Free Preview

Already a Premium member? Sign In

Community Questions