Playing: 038: 20 Easy Win Performance Tips
Potluck - Terminal Configs × CSS Reset × Flexbox × Freelancing × NPM Dependencies × Project Hand-off × More!
Potluck - Why Webpack? × Serverless × Agencies × Recruiters × CSS Grid × MQ in Styled Components
Potluck - Deploying Applications × Typescript × Live Coding with Twitch × Fullstack Architecture × More!
Potluck - What is "State"? × Web Sockets × Remote Working × Firefox × Machines Taking Our Jobs × More!
Potluck - CSS × Angular × Dev job preparation × Svelte × File organization × Gear × More!
Potluck - Media Queries × NPM Vulnerabilities × Fullstack JS vs JAMstack × Web VR/AR × Switching Jobs × More!
Potluck - Interview Qs × Headless CMS × React Hooks × Resume Design × Redux vs Context × More!
How We Manage Our Lives — Notion, Todos, Notes, Focusing, Calendars, Goal tracking, and more!
Potluck - Changing careers × Repo organization × CSS Grid × Certifications × Freelancing × Spammers × More
Potluck - Where to start with JS × Freelancing × Cron jobs × Split testing × Frameworks in 2019 × More
Potluck - $100/hr × Redux Replacements × Full Stack Designers × JWT × VS Code Tips × More
Potluck - Editor Fonts × Portfolios × Meetup Tips × Switching to Windows × Freelancing Sources
Potluck EP × Remote Work × Headless WordPress × Good Client Questions × Alternate Careers × React API Credentials
Potluck EP × Is Redux Dead × Learning Quickly × Developing Solo × Specialist vs Generalist × Funnest Projects × Wes’ BBQ Course
Potluck EP × Vue.js × Headless WP × Typescript & Flow × Productivity × Server Side Rendering × Yeoman
Wes and Scott's Lives - Breakdancing, BBQ, Wives, Work/Life Balance, Problem Solving, YouTube Subscriptions
Snack Pack — CSS Frameworks, React HOC, Render Props, Coding Designers, Early Career Advice and a sound board!
Hosting & Servers — Heroku, Now, Galaxy, Digital Ocean, Linode, Docker, Netlify and more!
Mar 21st, 2018
20 Easy Win Performance Tips👇 Download Show✏️ Edit Show Notes
In this episode, Scott and Wes chat about 20 different ways you can improve the perf, speed and overall user experience of your websites.
Cloudinary - Sponsor
Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!
Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out.
Fluent Conf - Sponsor
Developers, software engineers, designers, and web performance professionals flock to Fluent in pursuit of a common goal: building a better web. That means delivering fast, secure, accessible experiences to users and customers.
Fluent covers a broad range of technologies and topics to provide web programming professionals with the skills, connections, and inspiration needed to build better online and mobile experiences.
Fluent is this June 11-14 in San Jose, CA. Save 20% today with code: SYNTAX
So many perf tips came in over twitter, so in addition to this podcast I'd recommend you read all the replies to this tweet
- We just cracked 1,000,000 downloads! Thank you!
- Network Tips
- Reducing the amount of HTTP requests
- A little bit about HTTP2
- An interview about http2
- Use Caching and LocalStorage
- Turn on aggressive caching on your server - long expire times
- What is gzip? / Enabling gzip
- Using a CDN
- Listen to our episode on CDNs and #BigZips
- When to load your JS
- Blocking Requests
- Use Lazy Loading
- Preloading content with Link rel="preload"
- Picture, picturefill and srcset=""
- Article on srcset and Picture
- srcset vs picture/source elements
- Image Compression
- One less jpg
- Serve less data
- Inline SVG
- Talk about Font Awesome
- CSS and JS Code
- Critical CSS
- Remove unused code
- Purify CSS
- no-unused-imports with ESlint
- Code Splitting
- Transpile less
- Tree shaking
- Hoyyyy its a tree shaker
- Async and defer attributes on your script tags
- Amazing site that visualizes async and defer
- Icon Fonts
- Web Fonts
- Native Font Stack:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
- Scott is working on a Vue course!
- Wes is working on his Advanced React course!