How to improve your website performance
•Download as PPTX, PDF•
0 likes•183 views
The document provides tips on how to improve website performance for mobile users. It recommends taking a mobile-first approach and measuring key performance metrics like speed index, load time and file size. Some tips include optimizing images, caching and compressing files, automating performance testing, and using plugins to help optimize HTML, CSS and JavaScript. It also discusses using Accelerated Mobile Pages (AMP) to make mobile sites load faster. The overall message is that mobile web speed is important for search engine optimization, user experience and business goals.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to How to improve your website performance
Similar to How to improve your website performance (20)
Recently uploaded
Recently uploaded (16)
How to improve your website performance
- 1. How to improve your website performance
- 2. Hello WordCampers! I help companies to grow their business through fast and engaging websites. I’m Mike Rynart Find me at @mikerynart and mikerynart.com
- 3. How to Speed up your Website and Outrank your Competition 1.Mobile-only Mindset 2.Measure performance 3.Optimize for speed 4.Automate performance 5.AMPlify your site
- 5. Source: thinkwithgoogle.com 53% of mobile site visitors leave after 3 seconds of load time
- 6. Source: Google Research, Webpagetest.org 15 seconds is the average load time for mobile sites on 4G networks
- 7. “Speed is the most important feature” - Fred Wilson
- 8. Fast websites Make More Money UX SEO Bounce rate Page views Conversions
- 10. https://wpostats.com/ Amazon Sales dropped by 1% for every 100ms page load slowdown
- 13. How to make your mobile site suck less?
- 15. “If You Can’t Measure It, You Can’t Improve It” Peter Drucker
- 16. Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/ Page Speed Score 80+ is good
- 17. http://www.gtmetrix.com GTmetrix Total Page Size: Lower is Better Target < 500 KB
- 18. DEV Tools https://developer.chrome.com/devtools Request count: Less is Better Target < 50
- 19. https://developer.chrome.com/devtools TTFB Time to first byte: Lower is Better Target below 1.3 seconds
- 21. WebPageTest https://webpagetest.org/easy - Moto G4 - Chrome - 4G Clear metrics and reporting
- 25. Key Performance Metrics https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics Some key metrics that are important to you for mobile. ● SpeedIndex (calculated metric - target < 3000 for mobile) ● Total Page Size (Target < 500 KB) ● Server Request Count (Target < 50) ● Time to first byte (Target below 1.3 seconds) ● Load Time (5 seconds or less on 3G)
- 26. “What you Optimize today can improve all your tomorrows.” Unknown
- 27. Clean Your House
- 28. Merge + Minify
- 29. Autoptimize https://wordpress.org/plugins/autoptimize/ Helps optimize your HTML, CSS styles and JS scripts
- 31. Imagify https://wordpress.org/plugins/imagify/ Imagify Image Optimizer: Image compression tool makes lighter images without losing quality.
- 32. Cache and Compress https://wordpress.org/plugins/wp-super-cache/ WP Super Cache: Turns Dynamic into Static to Speed Up Your Site
- 33. Hosting
- 34. “The most powerful tool we have as developers is Automation” Scott Hanselman
- 38. https://www.thinkwithgoogle.com/feature/mobile/ Google Scorecard Speed: 5 seconds or less on mobile devices with 3G connections
- 39. “There is more to life than increasing its Speed” Mahatma Gandhi
- 44. Takeaways 2. Measure Performance Speed index, Load Time, File size, First Byte, Start rendering 1. Mobile Web Speed is King Better SEO Rankings, Happier Customers, More sales 3. Plan to Optimize for Mobile Web Speed Optimize, Cache, Compress 4. Automate web performance Audit, benchmark and set performance budgets 5. AMPlify WordPress Google Accelerated Mobile Pages
- 45. Thank you Any questions about web performance? Find me at @mikerynart and mikerynart.com
Editor's Notes
- WordCamp Rotterdam how are you doing! And big thanks to the WordCamp Rotterdam team they have done an amazing job. Welcome! Thank you for coming today. Hi I'm Mike Rynart, I help companies to grow their online business through fast loading websites. Today I'm going to talk to you about How to improve your Web Performance.
- Here is the plan: I'm gonna show you 5 steps to speed up your site and outrank your competition.
- You probably already know that mobile web traffic surpassed desktop worldwide.
- But did you know according research 53% of mobile site visitors will leave your site if it takes more than 3 seconds to load. So if you leave them with a loading screen or a blank page they are outta there!
- The average load time for mobile web sites is 15 seconds. Who here loves waiting more than 10 seconds for a web page to load? That’s far too slow when you consider that 53% of mobile web visits will leave if it takes longer than 3 seconds to load.
- If your website is slow, people won’t use it There are more than 4 billion people online, and over half of them now comes from mobile. Most of the next billion users have never used a PC and may never use one. They have a a mobile-only mindset. Stop thinking mobile as another channel, It’s the only channel.
- Mobile speed is good for everyone, everywhere. The faster your site loads, the better the user experience will be. Web speed affects your search rankings, your bounce rate, page views and conversions. And eventually makes you more money.
- Many companies gained from improving performance. Exact recently improved their mobile page speed down to 4 seconds. This Improved mobile conversions by 186%.
- Amazon found out that for every second their site loads slower, they lose 1% of their income. That's billions of dollars for them. Maybe you're not as big as Amazon's, but still, why would you wanna lose money?
- More of these stats you can find on WPO stats. If you ever want to convince your team to do web performance work.
- Are you ready for the Google Speed update? Google recently announced a new ranking algorithm designed for mobile search. The “Speed Update goes live in July 2018, so you still have some time to prepare your website. I will show you some tools you can use to measure page speed and make improvements.
- How do you measure speed to identify performance Bottlenecks.
- I started Wordpress in 2005 with blogging. I also like to travel Travelblog A couple years ago I started a online Miami travel guide as a side project. and grown quite popular on social media. I will be using the Miami guide for the next slides as an example and show you how I optimized my site and outrank the competition. Anyone here working in the travel industry? This branch is very competitive and mobile page speed is extremely important for them.
- Measurement in my mind is Performance. It’s an important step to measure a starting point. You want to know where your site stands, and find the right metric to track.
- Google Pagespeed insight gives you easy insights of the mobile version and desktop version of your site. Pay attention to the mobile version. A page scores of 80 or above is good. Don’t become obsessed with getting 100%.
- GTmetrix to see how fast your site loads over a mobile connection and get insights on how to improve your page speed. A metric you want to check is total page size. 500 kb or less is recommended for Mobile
- With Google Dev tools you can check your website’s performance right in the browser. Simulate network and CPU speeds. You can also sort your assets by Size to see the largest files to optimize. Pay attention to total server requests. 50 requests or less is recommended for Mobile.
- The first metric when someones complains of slow site is Time to first byte. Time to first byte shows how fast and responsive a webserver is. 1.3 seconds or below is best for Mobile. Chrome > developers tools > network tab > first document > Timing
- Lighthouse is also available in Chrome DevTools in the Audits panel. It’s a nice way of like keeping up to date with newer web standards It simulates a mobile device with a 3G connection, runs a series of test on the page, and then gives you a report on load performance, as well as suggestions on how to improve.
- The industry standard for measuring site performance With WebPageTest you can run a free website speed test from multiple location around the world using real browsers at consumer connection speeds with detailed optimization recommendations.
- The Speed Index shows how quickly the web page displays content to users. The lower the score, the better. Best practice for cable is 1000 and for mobile is below 3 seconds for mobile
- Waterfall optimization The waterfall is really great visual tool to understand where the bottlenecks are And where things could be improved Look for long lines of colors in the rows. the shorter the horizontal lines are the better!
- The Filmstrip view is another cool feature of Webpagetest. you can actually see the user experience and what the user sees when they load your site. It also really motivates other team members to optimize your site. Just show them the number of white loading screens until the site loads.
- Key performance metrics
- When you know what’s slowing down your site, you know what parts need to be fixed. 80% of web performance is spent on the frontend. So start there.
- First you need to get your house in order and do a little spring cleaning. Clean up and remove stuff you don’t need. When was the last time you updated Wordpress? Hope it's not 12 months about because it’s important for security reasons. Update your themes and plugins: Using Too many plugins slow you down, delete unused plugins or themes. Remove some External scripts – External scripts can have a huge impact on your website performance.
- Optimize your site by combining and minifying all your html, css and javascripts.
- I use this plugin to optimize these things on my site. Autoptimize By Frank Goossens:
- The average web page is 3MB. Images make up the bulk this. Reduce your image’s file sizes to help improve your website’s performance. Optimal image formats jpg, gif, png, svg
- I use this plugin to make images lighter without losing quality.
- Cache everything you can cache and compress your web pages. You can use a plugin called WP Super Cache. This plugin generates static html files from your dynamic WordPress blog. Compress your website with gzip: Compression reduces response times by reducing the size of the HTTP response.
- When first started my site I choose the cheapest possible option for hosting. Now I’m moved Cloud hosting. Is anyone here using Cloud hosting? Raise your hand! It’s kinda the new trend in WordPress for hosting. Is anyone here already running PHP 7 or still 5.6? Everybody should be using the most modern version of PHP they can for max performance. You also want to consider is using a CDN and enable HTTP2 so everyone can access your site fast.
- manually checking to measure your page speed is fine. But Automating Web Performance Measurement can save you a lot of time.
- Metrics can be monitored, Monitoring can be automated. A performance budget is a plan to ensure you deliver an enjoyable, fast user experience. You can set alerts and it will yell at you if you exceed your budget, for example if you exceed your page size. if you're dedicated to web performance, Performance budgets are a must-have! A good performance budget balances user experience with browser experience.
- After making optimization changes I run A/B tests to check the improvement of my site to see if my work has had any impact.
- Is your competitor faster or slower than you? Start benchmarking yourself against your competitors to see where you stand. I use SpeedCurve to find out why someone is faster than me. SpeedCurve is led by Steve Souders, pioneer of the web performance movement.
- Google recently released a benchmark tool called Speed Scorecard to see how your site stacks up to the competition. Here I check some of the biggest names using Wordpress to run their website. Google recommends a load time of 5 seconds or less on mobile devices with 3G connections.
- Everyone should relax...take your time, enjoy the world. If you’re still struggling with the speed of your WordPress site, you might also want to look into implementing Google AMP.
- AMP is an open source framework which makes it easy to create fast mobile web pages and have it load instantly everywhere. AMP pages typically load in under 1 second. Last month I was lucky to be invited by Google to AMP conference, where they presented exciting new features for AMP. What I like most about AMP is that you don’t need to worry about web performance anymore. Valid AMP pages are automatically fast.
- There are plugins that can make your website AMP-compatible pretty easy. AMP for Wordpress soon will release v0.7 which is a big step forward.
- Who's using Google search console? It’s a must-have tool for web developers to Track your site's search performance. Check for any errors and fix them for maximum results.
- If you do those things, your site is going to load much faster and you're going to grow your online business, because when people come to your site they won't get frustrated anymore, and they're going to be like, "Ah, site loads fast, I like it, might as well buy."
- Make Mobile speed Your Top Priority Start by measuring your current site, and constantly monitor and optimize your website. You can bring your site up to maximum mobile speed and reach a bigger audience.
- Thank so much for joining me today! You can find me on the internet, everywhere. And lets be friends. Any questions about web performance?