#or anything that requires using someone else's servers (i.e. the cloud)
Explore tagged Tumblr posts
Text
i am looking for a word processor that:
i can buy ONCE and then OWN FOREVER
i can download to my personal computer
does not require an internet connection
will not force or even, ideally, require me to update it, ever
i believe microsoft word is now in its death throes vis a vis providing me with these things, despite my paying a not-insignificant amount of money last year to get a one-time, forever use version of it. (yes, i AM so mad it looks like they lied to me about that. i am going to be so mad about it forever).
does anyone have suggestions on this front?
#i refuse to use google docs#or anything that requires using someone else's servers (i.e. the cloud)#word processors#serious question seeking serious answers
8 notes
·
View notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
#túi_giấy_epacking_việt_nam #túi_giấy_epacking #in_túi_giấy_giá_rẻ #in_túi_giấy #epackingvietnam #tuigiayepacking
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
https://ift.tt/3jRmseX
0 notes
Text
Winning the Page Speed Race: How to Turn Your Clunker of a Website Into a Race Car
A brief history of Google’s mission to make the web faster
In 2009, by issuing a call to arms to “make the web faster”, Google set out on a mission to try and persuade website owners to make their sites load more quickly.
In order to entice website owners into actually caring about this, in 2010 Google announced that site speed would become a factor in its desktop (non-mobile) search engine ranking algorithms. This meant that sites that loaded quickly would have an SEO advantage over other websites.
Six years later, in 2015, Google announced that the number of searches performed on mobile exceeded those performed on desktop computers. That percentage continues to increase. The latest published statistic says that, as of 2019, 61% of searches performed on Google were from mobile devices.
Mobile’s now-dominant role in search led Google to develop its “Accelerated Mobile Pages” (AMP) project. This initiative is aimed at encouraging website owners to create what is essentially another mobile theme, on top of their responsive mobile theme, that complies with a very strict set of development and performance guidelines.
Although many site owners and SEOs complain about having to tend to page speed and AMP on top of the other 200+ ranking factors that already give them headaches, page speed is indeed a worthy effort for site owners to focus on. In 2017, Google conducted a study where the results very much justified their focus on making the web faster. They found that “As page load time goes from one second to 10 seconds, the probability of a mobile site visitor bouncing increases 123%.”
In July of 2018, page speed became a ranking factor for mobile searches, and today Google will incorporate even more speed-related factors (called Core Web Vitals) in its ranking algorithms.
With the average human attention span decreasing all the time, and our reliance on our mobile devices growing consistently, there’s no question that page speed is, and will continue to be, an incredibly important thing for website owners to tend to.
How to optimize a website for speed
Think like a race car driver
Winning the page speed race requires the same things as winning a car race. To win a race in a car, you make sure that your vehicle is as lightweight as possible, as powerful as possible, and you navigate the racetrack as efficiently as possible.
I’ll use this analogy to try to make page speed optimization techniques a bit more understandable.
Make it lightweight
These days, websites are more beautiful and functional than ever before — but that also means they are bigger than ever. Most modern websites are the equivalent of a party bus or a limo. They’re super fancy, loaded with all sorts of amenities, and therefore HEAVY and SLOW. In the search engine “racetrack,” you will not win with a party bus or a limo. You’ll look cool, but you’ll lose.
Image source: A GTMetrix test results page
To win the page speed race, you need a proper racing vehicle, which is lightweight. Race cars don’t have radios, cupholders, glove boxes, or really anything at all that isn’t absolutely necessary. Similarly, your website shouldn’t be loaded up with elaborate animations, video backgrounds, enormous images, fancy widgets, excessive plugins, or anything else at all that isn’t absolutely necessary.
In addition to decluttering your site of unnecessary fanciness and excessive plugins, you can also shed website weight by:
Reducing the number of third-party scripts (code snippets that send or receive data from other websites)
Switching to a lighter-weight (less code-heavy) theme and reducing the number of fonts used
Implementing AMP
Optimizing images
Compressing and minifying code
Performing regular database optimizations
On an open-source content management system like WordPress, speed plugins are available that can make a lot of these tasks much easier. WP Rocket and Imagify are two WordPress plugins that can be used together to significantly lighten your website’s weight via image optimization, compression, minification, and a variety of other page speed best practices.
Give it more power
You wouldn’t put a golf cart engine in a race car, so why would you put your website on a dirt-cheap, shared hosting plan? You may find it painful to pay more than a few dollars per month on hosting if you’ve been on one of those plans for a long time, but again, golf cart versus race car engine: do you want to win this race or not?
Traditional shared hosting plans cram tens of thousands of websites onto a single server. This leaves each individual site starved for computing power.
If you want to race in the big leagues, it’s time to get a grown-up hosting plan. For WordPress sites, managed hosting companies such as WP Engine and Flywheel utilize servers that are powerful and specifically tuned to serve up WordPress sites faster.
If managed WordPress hosting isn’t your thing, or if you don’t have a WordPress site, upgrading to a VPS (Virtual Private Server) will result in your website having way more computing resources available to it. You’ll also have more control over your own hosting environment, allowing you to “tune-up your engine” with things like the latest versions of PHP, MySQL, Varnish caching, and other modern web server technologies. You’ll no longer be at the mercy of your shared hosting company’s greed as they stuff more and more websites onto your already-taxed server.
In short, putting your website on a well-tuned hosting environment can be like putting a supercharger on your race car.
Drive it better
Last, but certainly not least, a lightweight and powerful race car can only go so fast without a trained driver who knows how to navigate the course efficiently.
The “navigate the course” part of this analogy refers to the process of a web browser loading a webpage. Each element of a website is another twist or turn for the browser to navigate as it travels through the code and processes the output of the page.
I’ll switch analogies momentarily to try to explain this more clearly. When remodeling a house, you paint the rooms first before redoing the floors. If you redid the floors first and then painted the rooms, the new floors would get paint on them and you’d have to go back and tend to the floors again later.
When a browser loads a webpage, it goes through a process called (coincidentally) “painting.” Each page is “painted” as the browser receives bits of data from the webpage’s source code. This painting process can either be executed efficiently (i.e. painting walls before refinishing floors), or it can be done in a more chaotic out-of-order fashion that requires several trips back to the beginning of the process to redo or fix or add something that could’ve/should’ve been done earlier in the process.
Image source: WebPageTest.org Test Result (Filmstrip View)
Here’s where things can get technical, but it’s important to do whatever you can to help your site drive the “track” more efficiently.
Caching is a concept that every website should have in place to make loading a webpage easier on the browser. It already takes long enough for a browser to process all of a page’s source code and paint it out visually to the user, so you might as well have that source code ready to go on the server. By default, without caching, that’s not the case.
Without caching, the website’s CMS and the server can still be working on generating the webpage’s source code while the browser is waiting to paint the page. This can cause the browser to have to pause and wait for more code to come from the server. With caching, the source code of a page is pre-compiled on the server so that it’s totally ready to be sent to the browser in full in one shot. Think of it like a photocopier having plenty of copies of a document already produced and ready to be handed out, instead of making a copy on demand each time someone asks for one.
Various types and levels of caching can be achieved through plugins, your hosting company, and/or via a CDN (Content Delivery Network). CDNs not only provide caching, but they also host copies of the pre-generated website code on a variety of servers across the world, reducing the impact of physical distance between the server and the user on the load time. (And yes, the internet is actually made up of physical servers that have to talk to each other over physical distances. The web is not actually a “cloud” in that sense.)
Getting back to our race car analogy, utilizing caching and a CDN equals a much faster trip around the racetrack.
Those are two of the basic building blocks of efficient page painting, but there are even more techniques that can be employed as well. On WordPress, the following can be implemented via a plugin or plugins (again, WP Rocket and Imagify are a particularly good combo for achieving a lot of this):
Asynchronous and/or deferred loading of scripts. This is basically a fancy way of referring to loading multiple things at the same time or waiting until later to load things that aren’t needed right away.
Preloading and prefetching. Basically, retrieving data about links in advance instead of waiting for the user to click on them.
Lazy loading. Ironic term being that this concept exists for page speed purposes, but by default, most browsers load ALL images on a page, even those that are out of sight until a user scrolls down to them. Implementing lazy loading means telling the browser to be lazy and wait on loading those out-of-sight images until the user actually scrolls there.
Serving images in next-gen formats. New image formats such as WebP can be loaded much faster by browsers than the old-fashioned JPEG and PNG formats. But it’s important to note that not all browsers can support these new formats just yet — so be sure to use a plugin that can serve up the next-gen versions to browsers that support them, but provide the old versions to browsers that don’t. WP Rocket, when paired with Imagify, can achieve this.
Image source: WP Rocket plugin settings
Optimize for Core Web Vitals
Lastly, optimizing for the new Core Web Vital metrics (Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift) can make for a much more efficient trip around the racetrack as well.
Image source
These are pretty technical concepts, but here’s a quick overview to get you familiar with what they mean:
Largest Contentful Paint (LCP) refers to the painting of the largest element on the page. Google’s PageSpeed Insights tool will tell you which element is considered to be the LCP element of a page. A lot of times this is a hero image or large slider area, but it varies from page to page, so run the tool to identify the LCP in your page and then think about what you can do to make that particular element load faster.
First Input Delay (FID) is the delay between the user’s first action and the browser’s ability to respond to it. An example of an FID issue would be a button that is visible to a user sooner than it becomes clickable. The delay would be caused by the click functionality loading notably later than the button itself.
Cumulative Layout Shift (CLS) is a set of three big words that refer to one simple concept. You know when you’re loading up a webpage on your phone and you go to click on something or read something but then it hops up or down because something else loaded above it or below it? That movement is CLS, it’s majorly annoying, and it’s a byproduct of inefficient page painting.
In conclusion, race car > golf cart
Page speed optimization is certainly complex and confusing, but it’s an essential component to achieve better rankings. As a website owner, you’re in this race whether you like it or not — so you might as well do what you can to make your website a race car instead of a golf cart!
0 notes
Text
Welcome to the Era of Decentralization
This is an exciting time to be a software entrepreneur and investor. We are living in a time when there's about to be massive disruption in tech infrastructure that will affect almost every industry. I haven't felt this same level of excitement since the late 90s.
But, let's first take a step back in time. When most people think back on the late 90s, they think the dot com era was exciting because it put tech entrepreneurship on the map in a big way, and lots of entrepreneurs made a ton of money. But my perspective, as a high school student growing up in the Silicon Valley at the time, was different. The 90s was impactful for so many reasons.
1) There was just so much opportunity.
The 90s was about moving just about every piece of software from isolated desktops to online. This wasn't an incremental change. This was a big change. It was a big change in how software and infrastructure was written. And it was a big change in business models.
2) As a result, it also meant it was easier for newcomers to break into the industry (such as myself).
Existing software engineers and tech entrepreneurs needed to retool both their skills as well as their way thinking about how software should be set up and software business models. As a student, even though I didn't really know anything, in some sense, not having been in the software industry before was actually an advantage. The 90s was about wrapping your head around a shift from isolated box software to writing software for connected boxes with changes in business models. This was not an easy thing to wrap one's head around. But, as a student, my mind hadn't been influenced by the prior desktop software era, so it was fairly straightforward to jump into the industry and learn. During this era, anyone who could write basic Javascript and had half a brain, could be in business -- either for yourself or at someone else’s internet company. Because frankly, no one really knew anything about anything. It was all uncharted territory.
3) There were many winners and many losers.
Anyone who had been in software forever who did not retool their skills and way of thinking about software, got left behind. There were also many entrepreneurs who got caught up in the frenzy of starting new internet business ideas that didn’t actually solve problems. In general, the nature of entrepreneurship means there is a lot of failure even for "good ideas." But this era had many many terrible ideas. Because it was such a gold rush, there were a lot of ideas that people pursued just for kicks. I was not an investor at that time or even in the industry full-time myself but I heard way more bad ideas during this era than I do today as an investor. Because it was a gold rush, lots of people thought they could just come up with some dumb idea and would be able to make lots of money...just because.
Since the late 90s, these three characteristics have largely vanished...until now. When you think about what happened after the 90s, software business changes have been largely incremental.
80s: Desktop era
90s: WWW era
00s: Cloud / mobile era
10s: Decentralization era
Going from the 90s to the 00s was about using cloud platforms. No longer did you, as an entrepreneur, need to spend $1m on your own servers that you stored in your office closet to host your web applications. You could use Amazon Web Servies (AWS) to easily scale up (or scale down) your storage needs, and you could get up in running in a day. Then, SaaS companies built their companies on AWS and offered basic services to other companies for just $x per month. These SaaS companies got you up and running with useful applications and stored all your data for you so that you as a business owner didn’t need to worry.
Going from the 90s to the 00s was just an incremental change. We still used the same web technologies (more optimized but still the same) and the same way of thinking (i.e. everything done online). Even the business models were still the same. (i.e. pay $x per month or per year).
During this era, we also went from using the internet on your laptop to your mobile device when the iPhone came out. Everyone thought that this was the next big transformative era -- afterall, writing native apps required new software skills and way of thinking and business models were different. But, it wasn’t transformative. Because mobile app distribution has proven to be difficult, legacy companies have largely resorted to focusing on improving their native mobile websites as opposed to distributing their native apps. And these mobile sites are based on the same web technologies people have been using forever. And these legacy businesses themselves haven't had to change their business models as a result of the rise of mobile devices.
But going from the 00s to 10s is / will be a big shift. What we see today is that business owners and consumers are increasingly becoming concerned with privacy / security / hacking and large companies consolidating data and power. Should we concerned that Google knows everything about you? They track what you write to people, what you browse on the internet, and even where you go as you walk around with your Android phone. Facebook, too, knows so much about you. In fact, some even suggest that they monitor so much data to know which startups are up and coming and try to copy them. B2B companies are also consolidating. Salesforce and Oracle are both acquiring companies like crazy and will soon know everything about how you run your business on all fronts.
But even if you're not concerned about the powerful companies who are consolidating your data, there's also been a rise in concern about whether they can even keep your data safe. The rise in hacking and data exposure has both consumers and businesses nervous. It's clear that many companies are not able to keep your information safe. Even companies whose job is security are not able to store your information well!
What we'll see in the next few years is the decentralization of information. FileCoin, which "launched" a couple of weeks ago, is a great example of this. You'll see more of your information distributed across multiple sources. The premise for FileCoin is that many people in the world have extra bits of storage. These people will store pieces of your data instead of your storing your data all in one place with one service. And then through a new protocol you can grab all those bits and pieces of data and reassemble it to make sense. No single entity will have all your data. This business model for this storage will also be different. Instead of paying one a subscription fee to one player, you’ll use FileCoin, which is the currency on this platform, to pay a little bit of money to different people storing your data.
But it doesn't stop there. I'm seeing new companies crop up for other business services that involve powering an application but storing data needed for that application either in a decentralized way OR in a semi-local way. For example, today, Marketo stores all of your marketing content -- emails / landing page information / customer contacts / etc themselves. In this new model, tomorrow, they would still power the service but your data may be decentralized or partly stored on your own servers so that Marketo cannot access / mine your information, and hackers would not try to break into their systems to get this information. From a business model perspective, this means you may or may not pay a single subscription to Marketo -- you may potentially also end up paying other players through some currency for storing your data or even powering some of Marketo’s functionality. I predict that almost every piece of business software that has these privacy concerns (or have customers who have these concerns) will move away from the traditional SaaS model that we've come to love to this new decentralized model.
Some say there will be latency concerns in this new model. It will be a lot slower to try to pull information stored across many sources and re-pieced together. And real-time applications, such as website analytics, may not move to this new framework. The first applications to move to this model will be software that serves customers who are really really really concerned with privacy and have less concern for real-time information. But over time, I believe that since most software isn't truly real-time, with more clever forms of caching, more software will move in this direction.
This is a total mindshift. The way software is written will be completely changed. Business models, too, will change. In fact, how this will all play out is extremely fuzzy in my mind. But that’s what makes this exciting. There are so many new possibilities -- something will change, but we just don’t know what. There is so much opportunity, and we'll see so many more entrepreneurs enter the tech industry as a result.
There will be many winners. But also many losers. The losers will be the legacy companies who cannot make this jump and will get disrupted by startups who will take all their customers who are concerned about privacy. There are a lot of legacy companies who are obsessed with storing as much data as possible and are stuck in the rut of thinking that data consolidation is the only way to make lots of money. And this is why it may be difficult for some of these legacy companies to change to this new paradigm if a startup comes in.
There will also be many losers in other ways. I didn't use the word "blockchain" or "tokens" in this entire blog post, which is largely what will power this new paradigm. I wanted to focus this post on the reasons for why blockchain and tokens are so widely talked about. But so many tech investors and entrepreneurs today are not thinking about the fundamental problems that blockchain and tokens are solving. And much like the 90s, I'm now seeing so many ideas involving both blockchain and new tokens just for the sake of using them but not to solve actual problems.
These, of course, are my predictions (and I could be completely wrong!), but I think the Era of Decrentalization is here to stay for a while and will have big impact on so many industries. Comments / thoughts very welcome!
For more of my ramblings on early stage company formation, subscribe to my newsletter.
1 note
·
View note
Text
What are the Differences Between IaaS, PaaS, and SaaS?
As a solutions architect, I talk regularly to developers and architects about IaaS, PaaS, and SaaS. These terms, which are relatively new, can sometimes be confusing so I’d like to give a brief description of what they are and how they differ from each other.
As shown here, IaaS, PaaS, and SaaS stand for infrastructure, platform and software as a Service, respectively. The core idea behind ‘aaS’ is that you can focus on building products and services critical to your business and let other companies build and manage non-core services you need, whether as part of your own offering or just to run your business.
These days, you can take pretty much add ‘aaS’ to anything, like “data” (DaaS) and “integration platform” which introduces the potentially confusing “iPaaS” which differs from both IaaS and PaaS! In the last few years, new businesses have popped up providing X, whether it be a product, application, feature or anything really, as a service to other businesses or consumers.
Overview: How did we get here?
Before we dive into what these 3 terms mean, let’s take a step back and look at how we got here. Life was simple when all developers had to worry about were monolithic applications running on-premises. As a company, you would either have your own datacenter or rent some space at a datacenter managed by another company. Your networking and sysadmin teams would make sure all the servers were properly connected and working for your developers to use. Your developers would build robust and scalable applications (hopefully) that got deployed to your servers. Simple, right?
Infrastructure as a Service (IaaS)
Most mid-sized business and large enterprises, still manage their own servers and datacenters, but are adopting the cloud. For almost a decade most companies have realized they don’t want to be in the business of managing their own infrastructure (servers/datacenters) and would rather have someone else, such as Amazon or Google, do it for them. Startups these days are going straight to the cloud, which allows them to be extremely flexible and scalable amongst other things. This has led cloud providers such as AWS and GCP to provide you with servers and manage them for you – that’s infrastructure as a service!
For example, you can easily spin up Solace PubSub+ Event Broker software on a linux server using an Amazon AMI in less than a minute. Compare this to having to buy a server, set it up, install it in a datacenter, and deploy software on it. Depending on the size of the company, this can take weeks, if not months.
Platform as a Service (PaaS)
As companies started adopting IaaS and migrating to the cloud, it became apparent that it wasn’t so easy. A key benefit of the cloud is elasticity. It’s easy to spin up servers when demand is high and shut them down when demand is low, but, developing applications for your limited servers in your own datacenter is one thing. Developing applications to run in the cloud where your application might be deployed to hundreds of servers on peak days like Black Friday, accessible by way of the Internet or WAN links, might not be as stable as it is in your own private datacenter.
All of this came with a lot of overhead for developers, and for DevOps team which now had to build and manage cloud-native applications. This led to platform as a service which lets developers develop cloud-native applications and manage the overhead associated with orchestrating them. Popular PaaS offerings include AWS Elastic Beanstalk, Pivotal Cloud Foundry, Kubernetes and OpenShift. I recently blogged about how to deploy Solace’s broker in OpenShift.
Software as a Service (SaaS)
As cloud migration has picked up, it has further fueled the build vs buy debate. Every company is faced with the option to either build something themselves and hence, have complete control over it or buy it from another company so they can focus on its core business at the cost of control. Additionally, while you might have the resources to build the product initially, you still have to dedicate significant resources to maintain and upgrade the product going forward. As a consequence, more and more companies are realizing that they would rather buy non-core products/software from other companies and focus on their core business. For example, you can use Solace Cloud to spin up a PubSub+ Event Broker without needing any hardware and have it managed by Solace.
So what are the differences between IaaS, PaaS, and SaaS?
The main difference between IaaS, PaaS, and SaaS is how much they abstract away from end-users. The end product is an application that you want to use. For that to happen, you need to manage: datacenters, servers, networks, virtualization, operating systems, runtime, storage, middleware, data, applications, and monitoring.
Here is a useful table which shows which parts are being abstracted away from the end-user in each model:
SaaS applications are completely managed by someone else. They can be easily accessed through a web browser, so you don’t need to worry about installing them on an on-prem server. They are provided as managed service which takes away the overhead of regularly upgrading the underlying software.
PaaS provides you with everything you need to have your application running except for the actual application itself. You are responsible for writing the application and managing it but everything else, such as servers, runtime, and orchestration of your microservices, is provided.
IaaS is the most basic (or flexible) of them all and only provides the underlying infrastructure, upon which you must set up your own runtime environments.
Picking the right model for your company
With so many options, it can be a little daunting to decide which one is the best for your company. Thankfully, you don’t have to pick just one. You can go with a hybrid model where your core applications will run on-prem in your own datacenter and the rest of your in-house applications will run on a PaaS such as OpenShift. You might also decide to have some database services run on cloud such as AWS Redshift. Finally, you might want to limit all your vendor software, such as HR/payroll management software (i.e. Workday), monitoring tools (i.e. New Relic), and event brokers (i.e. Solace), to SaaS.
Picking the right model comes down to how much flexibility you want and how little you want to manage. If a product is core to your business and you need to heavily customize it, then going with a SaaS model is not the right option. However, there is no need to have your own convoluted HR/payroll management system when a generic SaaS solution would suffice. Finally, you have to consider the sensitivity of these applications and the data they manage. Some applications manage “crown jewel” processes and information that you won’t want to trust to a SaaS.
Conclusion
As you can see, there are a lot of similarities and differences between IaaS, PaaS, and SaaS. If you are a developer, you must be familiar with all three and how they differ. As an architect, you may be responsible for deciding which model, or hybrid approach, is right for your company based on your requirements, and resources. Fortunately, you can pick which model works best for you for each of your applications. I hope I’ve helped you understand a little bit better which one might be right for you.
The post What are the Differences Between IaaS, PaaS, and SaaS? appeared first on Solace.
What are the Differences Between IaaS, PaaS, and SaaS? published first on https://jiohow.tumblr.com/
0 notes
Text
Original Post from Microsoft Secure Author: Todd VanderArk
You already know that email is the number one attack vector for cybercriminals. But what you might not know is that without a standard email security protocol called Domain Message Authentication, Reporting, and Conformance (DMARC), your organization is open to the phishing attacks that target your customers, crater your email deliverability rates, and crush your email-based revenue streams.
For all the utility of email, which remains the ultimate app for business collaboration and communication, it does have a serious flaw: the ability for a bad actor to pretend to be someone else in an email message. This can be done through one of two attack techniques, spoofing and impersonation. Spoofing is when the sender is attempting to send mail from, or on behalf of, the exact target domain. Impersonation is when the sender if attempting to send mail that is a lookalike, or visually similar, to a targeted domain, targeted user, or targeted brand. When cybercriminals hijack your brand identity, especially your legitimate domains, the phishing attacks they launch against your customers, marketing prospects, and other businesses and consumers can be catastrophic for them—and your business.
Email-based brand spoofing and impersonations surged 250 percent in 2018, with consumers now losing $172 billion to these and other internet scams on an annual basis. More than 90 percent of businesses have been hit by such impersonations, with average losses from successful attacks now standing at $2 million—with an additional $7.9 million in costs when they result in a data breach.
DMARC can help you take control of who can send email messages on your behalf, eliminating the ability for cybercriminals to use your domain to send their illegitimate messages. In addition to blocking fake messages from reaching customers, it helps prevent your business-to-business customers from partner invoice scams like the kind that recently defrauded one large, publicly traded business that lost $45 million. Not a good look for your brand, and a sure way to lose your customers, partners, and brand reputation.
But to protect your corporate domains and prevent executive spoofing of your employees, DMARC must be implemented properly across all your domains and subdomains. And you’ll want your supply chain to do the same to protect your company and partners from such scams. Today, 50 percent of attacks involve “island hopping,” spoofing or impersonating one trusted organization to attack another within the same business ecosystem.
Great, but what exactly is DMARC?
For those not yet familiar with the term, DMARC acts as the policy layer for email authentication technologies already widely in use—including Sender Policy Framework (SPF) and DomainKeys Identified Mail (DKIM).
At its most essential, DMARC gives organizations control over who is allowed to send emails on their behalf. It allows email receiver systems to recognize when an email is not coming from a specific brand’s approved domains—and gives guidance to the receiver about what to do with those unauthenticated email messages. DMARC with a p=quarantine or p=reject policy is required to block those illegitimate email messages from ever reaching their targets.
Today, 57 percent of consumer email in industries such as healthcare and retail are now fraudulent. Consumer-focused brand impersonations are up 11 times in the last five years, 80 percent involving email. In 2018, the IC3 received 20,373 BEC/E-mail Account Compromise (EAC) complaints with adjusted losses of over $1.2 billion. Those attacks target your accounting, payroll, and HR departments, so your outbound marketing programs can become toxic to recipients, obliterating your outbound email programs and the revenue they generate.
Microsoft support for email authentication and DMARC
As the vast majority of businesses continue to migrate to capable and robust cloud platforms such as Office 365, a new generation of cybercriminal organizations is rapidly innovating its methods to find nefarious new ways to circumvent the considerable security controls built into these platforms. Unfortunately, some organizations may not realize that they should fully implement DMARC to augment the security benefit of Office 365 email authentication.
Microsoft has implemented support for DMARC across all of its email platforms. This means that when someone sends an email to a Microsoft mailbox on a domain that has published a DMARC record with the reject policy, it will only deliver authenticated email to the mailbox, eliminating spoofing of email domains.
If you use Office 365 but aren’t utilizing custom domains, i.e. you use onmicrosoft.com, you don’t need to do anything else to configure or implement DMARC for your organization. But if you have custom domains, or you’re using on-premises Exchange servers, in addition to Office 365, you’ll need to implement DMARC for outbound mail. All of which is straightforward but implementing it across your entire email ecosystem requires some strategy. To ensure your corporate domains are protected, you’ll need to first publish a DMARC record in DNS with a policy of reject. Microsoft uses Agari’s DMARC reporting tool to enhance protection of Microsoft domains from being used in phishing attacks.
Read more about how Microsoft uses Agari to protect its domain and how that is used to validate email in Office 365 in this Microsoft documentation.
The rise of automated, hosted email authentication
The truth is, properly implementing DMARC means you need to identify every single one of your domains and subdomains, across all business units and outside partners—not just the ones you know to send email. That’s because any domain can be spoofed or impersonated, which means every domain should be DMARC-protected to make sure email receiver infrastructures can assess whether incoming messages purporting to come from any of your domains are legit. Brand protection that only covers some domains isn’t really brand protection at all.
The task of identifying and onboarding thousands of domains controlled by multiple business units, outside agencies, and other external partners, both on Office 365 and off, can be daunting. As a result, many organizations may discover that working with a DMARC provider that can fully automate the implementation process across all these parties plus supply channel partners is their best chance for success. This is especially true for those that offer fully hosted email authentication (DMARC, SPF, and DKIM) to simplify the otherwise tedious and time-consuming process involved with preventing brand impersonations—including ones that leverage domain spoofing.
3 steps to get started with DMARC
The good news is that DMARC is supported by 2.5 billion email inboxes worldwide, and more are joining these ranks every day. But unfortunately, even among organizations with DMARC records assigned to their domains, few have them set to p=reject enforcement. As it stands now, nearly 90 percent of Fortune 500 businesses remain unprotected against email-based spoofing attacks, putting their customers, partners, and other businesses at risk for phishing.
When DMARC is implemented using email ecosystem management solutions, organizations have seen phishing emails sent by fraudsters seeking to spoof them drop to near zero. According to Forrester Research, organizations have also seen email conversion rates climb on average 10 percent, leading to an average $4 million boost in revenues thanks to increased email engagement.
While it’s no small task, there are three steps that will help you move forward with DMARC and get started:
Create a new DMARC record with specific policies to protect your organization from spoofing attacks targeting your employees, customers, prospects, and more. Note that the policy must be a p=reject to prevent unauthorized mail from being received.
Download Getting Started with DMARC, a special guide designed to provide an overview of DMARC and best practice resources.
Request a free trial to Office 365 and see how Agari can help implement DMARC at your organization. As a member of the Microsoft Intelligent Security Association (MISA), and provider of DMARC implementation for more domains than any other provider, Agari offers a free trial to Office 365 users looking to protect their customers, employees, and partners from phishing-based brand spoofing attacks. Given the threat from impersonation scams, and the benefits that come from employing the right approaches to reducing it, don’t be surprised if DMARC-based email authentication jumps to the top of the to-do list for a growing number of businesses. With luck, brand imposters will never know what hit them.
Bookmark the Security blog to keep up with our expert coverage on security matters. Also, follow us at @MSFTSecurity for the latest news and updates on cybersecurity.
The post How to prevent phishing attacks that target your customers with DMARC and Office 365 appeared first on Microsoft Security.
#gallery-0-6 { margin: auto; } #gallery-0-6 .gallery-item { float: left; margin-top: 10px; text-align: center; width: 33%; } #gallery-0-6 img { border: 2px solid #cfcfcf; } #gallery-0-6 .gallery-caption { margin-left: 0; } /* see gallery_shortcode() in wp-includes/media.php */
Go to Source Author: Todd VanderArk How to prevent phishing attacks that target your customers with DMARC and Office 365 Original Post from Microsoft Secure Author: Todd VanderArk You already know that email is the number one attack vector for cybercriminals.
0 notes