Film strip recording
Key Performance 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)
“What you Optimize
today can improve all
Google Search Console
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
Any questions about
Find me at @mikerynart and mikerynart.com
Notes de l'éditeur
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.
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.
Apparemment, vous utilisez un bloqueur de publicités qui est en cours d'exécution. En ajoutant SlideShare à la liste blanche de votre bloqueur de publicités, vous soutenez notre communauté de créateurs de contenu.
Vous détestez les publicités?
Nous avons mis à jour notre politique de confidentialité.
Nous avons mis à jour notre politique de confidentialité pour nous conformer à l'évolution des réglementations mondiales en matière de confidentialité et pour vous informer de la manière dont nous utilisons vos données de façon limitée.
Vous pouvez consulter les détails ci-dessous. En cliquant sur Accepter, vous acceptez la politique de confidentialité mise à jour.