Connect with us

WordPress

3 Image Optimization Tips for Faster Speeds & Higher Rankings

Published

on

3 Image Optimization Tips for Faster Speeds & Higher Rankings


Some people are visual learners, some kinesthetic, and others auditory. But I’d argue the majority of us are impatient learners.

We demand websites to load in an instant and our questions to be answered directly. This is why search engines prioritize websites with faster page speeds, especially over mobile devices.

In many cases, images are the number one issue affecting website load times.

We all understand that high-quality images contribute to positive user experience, but I wonder have we drank too much of our own Kool-Aid?

A 2016 Google and SOASTA study confirmed that complex webpages with more images had lower conversion rates than webpages with fewer images.

While some websites may benefit being “image-heavy”, we should really look at page speed as a scarce resource. The more we dedicate this resource to loading large, bulky resources, the less effective it will be.

With Google’s redesigned PageSpeed Insights, a lot of people are confused about what it means to serve images in “next-gen formats” and what browser support exists to satisfy Google’s concerns.

3 Image Optimization Tips for Faster Speeds & Higher Rankings

Additionally, many people are still relying on old technologies to compress and serve images on their website.

Read on for some pragmatic tips to help you optimize images for faster page speeds while preserving your UX.

1. Use Images Responsibly

Minimalistic design often lends itself to good user experience because it provides greater performance. But you need to ask yourself whether an image is absolutely critical to your design.

For more dynamic webpages, it can be tempting to make images interactive and even a focal point of your design.

Unless you’re a photographer, you can leverage alternative resources instead of images to improve your UX, such as:

  • CSS3 for interactive elements.
  • Scalable vector graphics for simple logos and designs.
  • Embedded videos instead of bulky GIFs.

In fact, vector images tend to maintain greater resolution when being loaded on higher resolution devices.

Furthermore, instead of encoding text within images, which search engines can’t read, you could instead turn to web fonts which improve UX.

Within the PageSpeed Insights tool, you’ll often find that Google recommends deferring images offscreen to improve load outs. This essentially means moving images below the fold so at least the initial loadout for users is faster.

To accomplish this, you’ll need to optimize your critical path rendering.

There are a few methods to take to optimize your critical path rendering, such as minifying, caching, and compressing all on page resources (CSS, JavaScript, HTML).

Inline CSS delivery for header and main document module can also provide users with an instant loadout while all unused CSS and resources are loaded in the backend.

Additionally, you could prevent JavaScript blocking to prevent resources you wanted to be loaded from being loaded in the first load out.

While this is fairly complicated, there are tools to assist in WordPress.

W3 Total Cache caches and minifies virtually every resource in your CDN from HTML all the way to WordPress elements.

In addition, W3 Total cache can be used to optimize critical path rendering, such as using JavaScript unblocking with “async” and “defer” and other features that can help improve page loadouts without having to entirely get rid of images.

This tool also offers HTTP/2 capabilities to further improve loadouts.

2. Automate Image Compression

Probably the two best ways to optimize images for speed are by reducing their size and compressing their files. Image compression is incredibly easy with the right tools at your disposal.

If you’re working with WordPress, you can install Imagify and compress all of your images in bulk in one click. All further images that are added to your library will be compressed using this tool.

This plugin even offers an aggressive setting to compress JPGs and PNGs for massive speed boosts.

Imagify bulk compression tool

If you’re worried about plugins slowing down your site or are working with a more open-source CMS, you can use Image Optim to compress all of your images in a particular folder. It’s drag-and-drop features make it incredibly easy to compress images and then add them to your site.

Additionally, if you’re worried compressing images in your CMS and leaving large file sizes, you can also experiment with compression in the Adobe Suite or Affinity Photo.

In terms of resizing images for different devices, WordPress’s responsive design can do that for you using the ‘srcset’ attribute.

One important thing to keep in mind is that lossy compression may come with the potential to sacrifice the quality of your image.

At larger scale compression, lossy compression will eliminate greater bit depth and provide noticeably reduced file resolution.

3. Serve Images in Next-Gen Formats

Depending on your file format, you will have to use lossy or lossless compression.

Traditionally, we’ve relied on two image formats JPEG (lossy) and PNG (lossless compression).

But tools have begun recommending new image formats, especially for creating fast load speeds and maintaining smooth aspect ratios over mobile devices.

You can choose between a number of new formats, including JPEG 2000, JPEG XR, and WebP.

JPEG 2000 is much like traditional JPEG, but with lossless compression. This means that compressed JPEG 2000 files retain their metadata without much of a loss of quality.

JPEG XR supports both lossless and lossy compression at higher compression ratios.

Unfortunately, both of these formats are unsupported by most major browsers, including Google Chrome and Firefox. This means that you’ll need to have the JPEG or PNG format as a fallback regardless.

The only image format that’s supported by Google Chrome, as well as Firefox is WebP. WebP offers lossless and lossy compression, as well as support for animation.

There are a variety of WebP plugins to experiment with and you can convert a JPEG or PNG file to WebP using an online converter or Photoshop.

Of course, it’s ideal to provide a backup to a WebP file. To accomplish this, you’ll need to leverage the <picture> element in your HTML to provide backups.

Plugins like WebP Express for WordPress automatically do this in the HTML and can be used for bulk conversion in your library.

Ultimately, the option to serve images in next-gen formats is not too appealing considering limited browser support.

But leveraging formats like WebP to give your site images greater compression ratios and smaller file sizes over mobile devices will make a noticeable difference in page speed.

Additional Thoughts

Page speed over mobile is hard to maintain, especially on image heavy sites.

Responsive web design and other speed plugins can’t really account for large bulky file sizes and resources are trying to fetch on your site.

Fortunately, by automating compression, resizing files, and images more strategically you can drastically improve your page load speeds.

More Resources:


Image Credits

Featured Image: Pexels
All screenshots taken by author, April 2019





Source link

Continue Reading
Click to comment

You must be logged in to post a comment Login

Leave a Reply

WordPress

How Your Company Can Prevent ADA Website Accessibility Lawsuits

Published

on

How Your Company Can Prevent ADA Website Accessibility Lawsuits


Every day, websites and mobile apps prevent people from using them. Ignoring accessibility is no longer a viable option.

How do you prevent your company from being a target for a website accessibility ADA lawsuit?

Guidelines for websites wanting to be accessible to people with disabilities have existed for nearly two decades thanks to the W3C Web Accessibility Initiative.

A close cousin to usability and user experience design, accessibility improves the overall ease of use for webpages and mobile applications by removing barriers and enabling more people to successfully complete tasks.

We know now that disabilities are only one area that accessibility addresses.

Most companies do not understand how people use their website or mobile app, or how they use their mobile or assistive tech devices to complete tasks.

Even riskier is not knowing about updates in accessibility guidelines and new accessibility laws around the world.

Investing in Website Accessibility Is a Wise Marketing Decision

Internet marketers found themselves taking accessibility seriously when their data indicated poor conversions. They discovered that basic accessibility practices implemented directly into content enhanced organic SEO.

Many marketing agencies include website usability and accessibility reviews as part of their online marketing strategy for clients because a working website performs better and generates more revenue.

Adding an accessibility review to marketing service offerings is a step towards avoiding an ADA lawsuit, which of course, is a financial setback that can destroy web traffic and brand loyalty.

Convincing website owners and companies of the business case for accessibility is difficult. One reason is the cost.  Will they see a return on their investment?

I would rather choose to design an accessible website over paying for defense lawyers and losing revenue during remediation work.

Another concern is the lack of skilled developers trained in accessibility. Do they hire someone or train their staff?

Regardless of whether an accessibility specialist is hired or in-house developers are trained in accessibility, the education never ends.

Specialists are always looking for solutions and researching options that meet guidelines. In other words, training never ends.

Many companies lack an understanding of what accessibility is and why it is important. They may not know how or where to find help.

Accessibility advocates are everywhere writing articles, presenting webinars, participating in podcasts, and writing newsletters packed with tips and advice.

ADA lawsuits make the news nearly every day in the U.S. because there are no enforceable regulations for website accessibility. This is not the case for government websites.

Federal websites must adhere to Section 508 by law. State and local websites in the U.S. are required to check with their own state to see what standards are required.

Most will simply follow Section 508 or WCAG2.1 AAA guidelines.

If your website targets customers from around the world, you may need to know the accessibility laws in other countries. The UK and Canada, for example, are starting to enforce accessibility.

In the U.S., there has been no change in the status of ADA website accessibility laws this year.

Some judges have ruled that the lack of regulation or legal standards for website accessibility does not mean that accessibility should be ignored.

Is Your Website At Risk of an ADA Lawsuit?

Some businesses feel as though they are sitting ducks, and rightly so, since in some states, there are individuals and law firms searching for websites that fail accessibility.

Since the Federal government has put a hold on addressing accessibility standards for websites, several states are taking matters into their own hands.

In California’s Riverside County, the DA’s office is pushing back against a law firm and individuals accused of filing more than 100 ADA lawsuits against website owners and small businesses. According to a report by the Orange County Breeze:

“Abusive ADA lawsuit practices are not new, but the defendants in this case are responsible for a significant volume of the ADA lawsuits that have been filed in Southern California over the last several years. Rutherford has been a party-plaintiff in more than 200 separate ADA lawsuits the defendants have filed against businesses in San Diego, Orange, Los Angeles and San Bernardino counties.”

In New York, which saw 1,564 ADA cases in 2018, two plaintiffs filed over 100 ADA lawsuits against art galleries this year. Artnet News reports:

“Technology has changed, that’s why we’re dealing with this, says Frank Imburgio, founder and president of the website development firm Desktop Solutions. “The state of speech recognition and speech synthesis that’s in everyone’s Alexa? That same piece of software embedded in your browser means blind people can avail themselves of your website, but the websites were not designed with that in mind” five or ten years ago.”

New York State Senator Diane Savino, D-Staten Island, chairs the Senate internet and technology committee that considers legislation affecting issues related to technological advancements, like artificial intelligence and digital currency.

It was recently announced they are planning legislative action to curb the surge in the number of lawsuits.

Florida is a hotbed of ADA lawsuits. Flagler County paid over $15,000 to settle an ADA lawsuit brought by a blind person who was unable to use their PDFs.

They removed 7,500 informational PDF documents from their website because they were not optimized for screen readers. In doing so, sighted users no longer had access to this information either.

In the case of Robles v. Domino’s Website and Mobile App accessibility lawsuit, Dominos is taking it to the Supreme Court to fight back.

Every type of website has been the target of an ADA lawsuit. It doesn’t matter if it is owned by one person, a small business or a major corporation.

A Title III public-facing website or mobile app includes travel, hotels, finance, ecommerce, services, healthcare, real estate, and education.

Educational websites and software applications are a growing ADA lawsuit target not only for accessibility to the public, but also for employees and students who use school software.

One recent study found that 95% of U.S. K-12 school websites had errors that made the page difficult for a person with a disability to use. At the state level, schools and universities are facing an avalanche of ADA lawsuits.

What Can Companies Do to Prevent an ADA Lawsuit?

The only way to prevent an ADA lawsuit is to plan for, design and build for web accessibility.

Inclusive design should be a priority and considered the foundation of any website business plan.

Every business with a website, mobile app or internet software application should hire an accessibility specialist who is trained in the application of WCAG guidelines and has knowledge of accessibility laws and guidelines from all countries.

There are only a few companies that specialize in accessibility services, tools or training. They are competitive and busy. You can find alternatives with accessibility consultants focused on just testing or remediation.

If you live outside the USA, you will find accessibility experts and companies who have been doing this work for years and sharing information through podcasts, building new automated testing tools, and stepping forward as accessibility advocates through writings and webinars.

Companies are facing a shortage of accessibility-trained designers and developers. This is a real burden because putting designers on projects who do not know how to build for accessibility is almost as risky as not having anyone at all.

For example, applying ARIA with HTML5 is commonly done incorrectly or image alt attributes are not written properly, especially for infographics or images over background images.

The source of most ADA lawsuits is the inability to access webpages or mobile apps with assistive devices used by sight-impaired users and people who can not use a mouse pointer.

The fun of web design for designers is the visual presentation.

Elementor, a wildly popular WordPress theme building and page design plug-in, makes it easy to incorporate parallax, dynamic content, and animation, can be enhanced to increase the accessibility of the website, and it allows the creation of new themes, headings and footers with more developer control.

What If I Can’t Afford to Hire An Accessibility Specialist?

This question applies to all businesses, but for small and medium-sized businesses, adding an accessibility specialist is out of the question because of budget constraints.

Most small businesses are a team of one person, or the owner has a website person wearing all the hats from SEO to site maintenance, but not accessibility. That is a separate skill.

Find a website company that offers accessibility services. They may provide accessibility testing, accessibility site audits or affordable package deals for their clients such as monthly remediation for PDFs, documents, images, forms, and content spread out over time.

Accessibility reports performed after a company has received a letter of complaint are extremely expensive and unless performed by skilled accessibility specialists, will not hold up in court.

Should I Just Put Up an Accessibility Statement?

The original purpose of an accessibility statement was to show that a site was tested, what standards it meets, what was not tested, and how to contact the company if there are any accessibility issues.

Some accessibility professionals don’t advise using them at all because the pace of technology creates ongoing adjustments to accessibility guidelines.

Unless your company has gone through formal accessibility testing and remediation, I don’t recommend providing an accessibility statement.

Some companies want to put up one that says they are in the process of testing, but users have no proof and there is no accountability here. It won’t hold up in court either.

As a courtesy, every website or application should make it obvious and easy to contact by email or phone, not a form (because they are most often not accessible) and invited to describe the issue they found.

What Can I Do Now to Improve Accessibility?

Optimally, every website or app should not prevent anyone from using it regardless of any physical, mental or emotional impairment, permanent or temporary.

Understanding how to plan, build, and test for accessibility requires advanced knowledge of accessibility to meet Section 508, WCAG2.1 A+ AA guidelines and regulations required by states and countries.

Finding that miracle person who can do all that is unlikely, expensive, and too overwhelming to think about.

Yet, so is an ADA lawsuit, floundering conversion rates, search engine rank roller coaster rides, and a negative brand reputation.

Starting somewhere, here are steps to jump in:

  • Do accessibility testing using a free automated accessibility testing tool like WAVE, Axe, or Tenon. You may not understand how to make the repairs, but you will see errors, warnings, and alerts you didn’t know existed.
  • Hire an accessibility specialist to perform formal accessibility testing that goes beyond the limitations of automated tools. Some tools are better than others. Some are not kept up to date on standards. No accessibility expert relies on automated tools. They incorporate manual testing, too.
  • Ask for a quote for a limited accessibility review or site audit. This is where a sampling of pages are tested rather than every single one.
  • Look for agencies that include accessibility design or testing services. They are worth gold for your bottom line.
  • Train your web designers and developers. Invest in them. Your online business may depend on their skills. They not only need to know how to code for accessibility but also how to develop the entire methodology for planning, development, testing, and long term maintenance.
  • Large corporations should hire accessibility companies that specialize in user testing with disabled users. This is the same as user testing, but with the addition of new personas and real users with various impairments.
  • Use your keyboard to navigate your webpage or mobile app. No mouse. If you can’t figure out where you are, where to go or got lost, this is a major issue for accessibility.
  • Turn on any screen reader app, download a trial of JAWS, or use your mobile phone accessibility settings, and go to your website or app. You will quickly learn what the experience is like for blind and sight impaired people or multi-taskers who are adapting to the use of audible alternatives for reading.
  • If you use any third-party software applications or WordPress plugins, require that it meet accessibility compliance by contract.
  • WordPress site owners and designers need to know the basics that can be adjusted from the front-end to improve the accessibility of the site. This includes:
    • Font sizes (use em), font faces (use sans-serif)
    • Proper heading tags in the right schematic order (H1, H2, H3, not H2, H1, H4, H2)
    • Test that colors contrast properly (use any free tool).
    • Avoid using color as the only visual indicator that the state of something changed or is an alert.
    • Make all PDF’s accessible (Adobe has a tool.)
    • Underline text links. If you don’t want every link underlined, create rules in CSS to choose.
    • Absolutely no centered text unless it is a heading or sub-heading.
    • Describe each image using the alt attribute option. At a minimum, describe what the image is. There are lots of rules for alt text. Start with that one.
    • Add the WordPress Accessibility plug-in (see resources below) and use it to add focus states, skip to content and other courtesies. And send Joe a donation for using it. He keeps it updated.

And finally, if you don’t need a CMS website, there is more control over the code if you return to an HTML website.

You will need someone with HTML5, ARIA, CSS, and JavaScript knowledge to build it for you, but the appeal is having complete control over performance, speed, SEO, and accessibility.

JavaScript can be accessible. Pretty much any image, table, script, and dynamic content can be, but it requires education.

Fortunately, most of the information is available at free or affordable fees. There are accessibility communities, podcasts, webinars, and the WCAG guidelines themselves.

Microsoft, IBM, Google, and Adobe provide detailed how-to advice.

As you apply inclusive design practices, you will see the benefits for SEO, usability and conversions, brand, reputation, referrals, and customer satisfaction.

Accessibility at its most basic level is a human right. Investing in people is worth it.

Accessibility Resources

In addition to the resources listed in Top 36 Web Accessibility Resources for Digital Marketing Companies, check out:

More Resources:





Source link

Continue Reading

WordPress

Google on Content Theft and Effect on Rankings

Published

on

Google on Content Theft and Effect on Rankings


In a Webmaster Hangout, Google’s John Mueller answered whether plagiarized content could hurt a site’s rankings. Mueller’s response gave a peek into how Google handles sites that steal content and the effect it has on your site.

Scraper Sites and Effect on Ranking

There are many bad actors who steal content and use it on their own sites. It is done with automated software. The process is called content scraping and the sites that publish stolen content are known as content scrapers.

Stolen content is associated with the loss of rankings in Google. It’s not unusual to search a snippet of your own content and see another site ranking with it.

The concern about the effect on rankings is a legitimate one.

Here is the question:

“A few websites have started scraping my content and have been publishing them. We tried to contact their hosts for a DMCA takedown without luck. Does having my content scraped and republished hurt my site? Should I disavow these URLs?”

What is DMCA?

The question made a reference to a DMCA takedown. DMCA is an American law called The Digital Millennium Copyright Act (DMCA).

The law protects hosts, domain name registrars and other businesses from liability for copyright violations as long as they provide a way for content creators to request that stolen content be removed. It also provides due process provisions that allow the takedown to be contested which can then result in costly litigation for the content creator.

It’s somewhat surprising that the publisher tried using the DMCA and failed. This can happen when the web host and/or domain name registrar are in a country outside of the USA. Each country has their own remedy.

Does Copied Content Affect Rankings?

Google’s John Mueller gave an overview of how stolen content affects rankings:

“So from our point of view, other sites copying your content wouldn’t be something that would negatively affect your website. So that’s a very common situation, that sites copy content.

…if you’re not seeing those copies showing up in search for the queries that you care about then it might not be the highest priority to focus on.”

What John Mueller makes sense in the context that scraper sites do not generally rank for actual search queries. Is it possible for scrapers to rank in long tail or non-competitive queries? Almost anything is possible with those kinds of queries.

Why Scrapers Rank for Snippets of Content

It’s not unusual for a scraper site to rank for a snippet of content stolen from another site, but there’s a good reason for that.

Snippets of content are generally regarded as gibberish. If another site ranks for a snippet, it’s not because their thievery has made your site less relevant. It’s because the search algo ranks pages differently for nonsense phrases.

Google’s algorithm is trying to make sense of all search queries. That’s virtually impossible to do when there is no “sense” in the search query.

And when the snippet does make sense, Google may very well rank other sites for that query ahead of your sites, but that’s the algo kicking in, ranking pages for “topics.”

Google does not rank pages by matching keywords, so even if the search is your snippet, that does not guarantee that your site will rank number one.

What’s important is that content thieves generally do not rank for the search queries that matter. So don’t let it trouble you if you see scraper sites outranking you for snippets. That’s not a sign that your site lost ranking strength due to stolen content.

How to Protect Against Scrapers?

WordPress Anti-bot Plugins

There are many WordPress plugins that provide a defense against malicious scrapers.

WordFence

WordFence is a popular plugin that can be customized to block scrapers for however hours you want to block them. It emails you to let you know when you’re under attack, which can help you increase how swiftly WordFence shuts them out.

WordFence appears to work by monitoring visitor behavior, particularly the amount of pages or the kinds of pages that it is trying to download. It’s the behavior that triggers a wall that blocks the bots.

I use WordFence to stop scrapers and hacker bots and am happy with how it works.

Blackhole Anti-bot WordPress Plugin

Another popular WordPress plugin is one called Blackhole.  (It also comes with a feature rich and reasonably priced Pro version)

Blackhole works on the principle of the honeypot. Good bots will avoid crawling a prohibited link. Bad bots will rush right in. Blackhole sets a trap for bad bots by including a link to the honeypot. Once the bad bot follows the prohibited link the trap is triggered and the bot is excluded from crawling.

All search engines are whitelisted. This means that no legitimate search engine will ever be blocked, even if Google follows the link.

Blackhole PHP

There is a PHP bot blocker called Blackhole. Blackhole can be installed with any server that uses PHP. So it will be compatible with a forum site using software such as Xenforo or phpBB. Read more about the PHP version of Blackhole here.

reCAPTCHA Enterprise Beta

Google recently announced a free beta trial of a service called, reCAPTCHA Enterprise. It is a cloud service that is designed to block automated scrapers, hackers and other malicious bots.

That Google itself is offering a solution to bad bots may be a sign of how important it is to block automated bot software, including scrapers.

Should You Protect Against Scrapers?

I believe it’s a good idea to protect your site from automated bots. Bots tend to crawl at night at the same time that Google and other legitimate bots are crawling. This can become problematic when too many malicious bots are probing your site, slowing down your server. This can cause your server to begin serving error response codes to Google, which will then be unable to crawl your and index your site.

So although John Mueller is correct to say that stolen content does not affect your rankings, you should still try to protect against scrapers in order that Google can properly crawl and index your site.

The Takeaway

What’s important is that Google confirmed that scraped content does not affect your rankings.

Watch the Webmaster Hangout here.





Source link

Continue Reading

WordPress

How to Take Your Website Beyond Fast

Published

on

How to Take Your Website Beyond Fast


Slow sites frustrate consumers. Frustration costs money.

To delight consumers, beat competitors, and to please Google, your site will need to load in under a second. And you’ll need to get there fast, otherwise, your competitors might beat you to the finish line.

Sound impossible? Web performance is no longer an art, but a science.

On April 24,  I moderated an SEJ ThinkTank webinar presented by Jono Alderson, Special Ops at Yoast.

Alderson shared the top tips, tricks, tools, and tactics you need to speed up your website.

Here’s a recap of the presentation.

Page Speed Optimization

Users expect fasta fast website, a fast app, a fast digital experience. The relationship between web performance and user behavior is backed by plenty of research.

  • A research by Google found that delays of over 3 seconds can lead to over 50% abandonment.
  • In 2014, a study revealed that 47% of people expect a site to load in less than 2 seconds.
  • Radware discovered that 20% of users abandon their cart if the transaction process is too slow.

Time is money and every single millisecond could be costing you users or conversions. People are impatient, and delays reduce the likelihood of them spending, converting, or taking action.

The statistics mentioned were from as far back as 2014. It was around that time that it became apparent that site speed is quite a big deal.

By that logic, we should’ve been on top of this and nailing it. But it turns out, that’s not really the case.

This table, which shows data from Google’s Industry Benchmarks for Mobile Page Speed, tells us the number of seconds it takes for a website for an average website in various sectors and different countries to be completed loading on a mobile phone on a 3G connection.

Seconds to load on a 3g connection

These sites are taking over eight seconds to load which is extremely slow.

We know users dislike this kind of experience and how much it impacts conversions, so Google took matter into its own hands.

Google’s Take on Site Speed

Now the world is changing primarily because Google, as a powerhouse of influence and authority, has become very interested in speed – and for a whole bunch of different reasons.

In early 2018, Google announced how important they consider speed to be and that it’s officially going to be a ranking factor for mobile searches starting July of that year.

The search engine’s advice?

“We encourage developers to think broadly about how performance affects a user’s experience of their page and to consider a variety of user experience metrics.”

What Google is essentially saying here is that speed underpins user experience.

When you are browsing , trying to get your page or channel to load, or add a product to a shopping cart, how quickly that happens is a huge component of the overall UX.

For Google, speed = efficiency. And as sites get faster, slow is going to feel slower.

Consumers expectations’ will increase and the fastest, best experiences they have will become their expectation for the norm.

So, what do we need to do?

Approaching Speed Optimization

The secret isn’t to do a big web (re)development project.

In speed optimization, you’ll win by a thousand tweaks – now, and every day, forever. You’ll need to find the important bits and make them faster.

At the heart of speed optimization, you need to understand two fundamental truths:

  • There’s no such thing as speed.
  • The only thing which matters is perception of speed.

There’s No Such Thing as Speed

When you start exploring this, it becomes very difficult to answer the question, “How do you measure speed?”

How do you put a metric against how fast your website is?

You could probably start off by saying “The time how long it takes for a page to finish loading.”

But, what does that mean?

What if the server responds quickly, but then it takes ages to show the content?

What if the page has components which only load when you interact, or scroll? Are they “finished”?

We need better definitions to understand how well we are doing.

Most stock metrics from speed check and optimization tools are flawed and designed to give you a false sense of comfort.

Until recently, Google’s PageSpeed Insights tool was equally nonsense. The score didn’t actually measure speed and the charts were bad because measuring against slow competitors makes you complacent.

When Google updated the tool, it added the metric First Contentful Paint which:

“…reports the time when the browser first rendered any text, image (including background images), non-white canvas or SVG. This includes text with pending webfonts. This is the first time users could start consuming page content.”

In other words, how quickly can we show something interesting? 

How many milliseconds until we can put something on screen that looks like it’s doing something rather than having a blank white page with just a spinner or loading icon?

How quickly can we make it look like it’s happening? For many people that will be a hero image at the top of the page, a logo or the navigation bar.

If you can optimize your site in such a way that you load the important bits first with a minimum amount of delay (and then worry about loading all the other stuff after), then it feels much faster.

This works because waiting without visual feedback is the worst kind of slow.

Optimizing for First Contentful Paint will make your site look and feel faster.

Your scores might not change that much, but the goal is not to optimize for scores. Just make it faster.

The Only Thing Which Matters Is the Perception of Speed

Google’s own documentation says this much.

Load is not a single moment in time — it’s an experience that no one metric can fully capture. There are multiple moments during the load experience that can affect whether a user perceives it as “fast” or “slow”.

However, regardless of what your website is, what sector you’re in or how it works, there is one golden moment that you might want to measure. It’s Time to Interactive.

The Time to Interactive (TTI) metric measures how long it takes a page to become interactive.

Simply put, how quickly can we make it feel ready?

If there’s a fundamentally important thing to understand here is that it’s not likely that Google is specifically measuring the actual page speed.

What they’re much more interested in is the perception of speed. If you make a lightning-fast website that feels slow to load, you’ve wasted a lot of time and money.

The emphasis needs to be on:

  • How do we show something quickly?
  • How do we make it feel ready?

The challenge is that perceived speed is hard to quantify. There are lots of moving parts in that ecosystem.

But the good news is that performance optimization is now a science. There are hard rules, processes, guides and techniques you can follow to achieve this.

Every site in the world can load in less than one second. You just need to follow the rules.

Thankfully, Google offers a wide array of documentation into the topic.

Where Do You Start?

You need to start by finding the slow stuff. While tools aren’t good for giving you metrics over time, they are really good at spotting problems.

The most impactful thing you can learn about speed optimization is to look at the way in which pages load and find out what’s waiting for other stuff.

If you can remove those bottlenecks, change the order of how things load in, and get them to load at once rather than one at a time, then everything else happens sooner.

One other thing to remember is that Google is monitoring, measuring and analyzing sites in a mobile-first way. Many of our users are using mobile devices and that’s where the particularly slow pain points are.

There is no magic bullet. We’re on a journey of 1,000 tweaks.

Here’s what you can start doing today, instead.

Top Tips to Shortcut Speed

Load Less Stuff

You might want to consider lessening your website’s elements.

Some things to look at:

Basics

  • Plugins, extensions, and integrations
  • Bytes transferred
  • DOM complexity
  • Fonts
  • Colors, details, icons, lines, borders, shadows
  • JavaScript

Advanced

  • Lazy-loading, deferring or async’ing resources
  • Cross-domain resource reduction
  • DNS and asset prefetch/preload

Tidy up Your CMS

Use plugins, extensions, and integrations to measure.

What to use: Query Monitor, New Relic

Bolt on a CDN (Cloudflare)

Advanced

What to use: Cloudflare

Get Good Hosting

You need to do your own research to find a good hosting company but here are a few recommendations:

How to Take Your Website Beyond Fast

Use a Static Page Cache

Rather than every user triggering your website to load up to request all its themes and plugins to go through that process to manipulate the outcome, why don’t you just save that the page and the outcome or save that database query and whatever it said.

This is not for everybody. If you want an easy win and you’re on a simple site, this might be a good fix for you.

What to use: WP Rocket or Total Cache for WordPress, Redis, Varnish Cache

Optimize Your Resources

Consider optimizing your images using tools like TinyPNG or Squoosh.

You can also do some advanced things, such as:

  • Offload media to, e.g., Amazon S3.
  • Use an image CDN like Cloudinary or Imgix.
  • Modularise CSS and JavaScript.

Use AMP(?)

The AMP project, at its heart, is an attempt to fix how broken and slow the Internet is, particularly the mobile web.

Rather than building your sample with normal HTML, JavaScript, and CSS, you might want to use the AMP framework. Your website will be fast, however, you will be constrained by their guidelines and restrictions.

It’s more technically complicated to customize especially through custom JavaScript so all of your ads, analytics, etc. will be limited.

That said, it’s worth looking into.

What to use: “The official” AMP WordPress plugin

Other Things You Can Do

Aside from the tips and tricks mentioned above, you can also try:

  • Canonical AMP
  • Post-load interaction improvements
  • New ways of thinking about CSS

Q&A

Here are just some of the attendee questions answered by Alderson.

Q: Google is pushing AMP pages for mobile but as a designer, this option is quite limiting. Do you recommend that we fo the AMP route for mobile load options?

A: As we touched on, adopting AMP is a big decision.

As for the design limitations, I’d take a look at amp.dev (which is built in AMP code!), and read some of their recent announcements for AMPConf.

They’ve removed some of the previous restrictions (custom JS is now supported), and they’re even planning to be more flexible on the 50kb CSS limits.

There are a ton of off-the-shelf components now, too, for best-practice UI elements and so on. It’s worth going and exploring.

Q: How does WordPress compare to other platforms such as Wix?

A: I’m obviously a WordPress nerd, and I’ll happily say that it’s by far the best CMS and choice for almost any use-case.

It’s far from perfect, but it’s much less-bad than anything else out there. Don’t go within a mile of Wix if you value your business, your customers, or your SEO.

Q: How stable is HTTP/2 Server Push for production websites?

A: It’s widely supported and stable, however, there are some interesting challenges and trade-offs with caching. You need to be quite careful with when you use it, and what you use it for. There’s a great article you can read here.

Q: How do we choose what loads first for Time to Interactive?

A: You can’t easily choose what loads first (certainly not with an existing site), but you can choose what doesn’t load first.

You can use techniques like lazy-loading your images (Chrome is getting native support, soon!), deferring your JavaScript, or loading scripts asynchronously. That’ll move them out of the way for the initial load.

Interestingly, browsers are also getting much smarter on automating this. Chrome does a good job of prioritizing things which are visible, things which are of high importance, etc.

Of course, it doesn’t always get this right, so it’s worth double-checking how all your CSS, scripts and fonts load.

Q: Is it possible to check whether or not you’re on HTTP2?

A: Yes, it is! https://http2.pro/check?url=https%3A//yoast.com/

Q: How important is it to use images in next-gen formats?

A: Excellent question! New image formats are generally smaller, faster, and better. WebP is a great example; it’s generally better than a JPG or a PNG. But, support isn’t universal.

There are techniques you can use to detect if a user has support, and if not, fall back to a normal format. But that means you have to generate, store and maintain two versions of every asset. Alternatively, Cloudflare does all of this automatically!

Q: Can you please talk a little bit more about how to automatically cache pages? What´s the great advantage on doing that?

A: When you load a page, a ton of processes happen. Your CMS wakes up, makes queries to the database, calculates what content it needs to show you, etc. All of this takes time.

But for most of your visitors, and most of the time, the results of all these calculations are the same. A static page cache just saves the output – the final HTML page – and serves that to users, instead.

If you change something about your page (e.g., you update a post in WordPress), a well-configured cache will ‘purge’ the static version of that page, and, update it with a new one.

It should also detect if you’re logged in, and bypass its cached pages if so. WP Rocket and W3 Total Cache do all of this really well, pretty much out of the box.

Q: How many plugins are too many plugins on WP or is it more about the quality/size of the plugin? Also, what are your thoughts on using Page Builders in WP, specifically, Elementor?

A: It’s definitely about the quality/size/impact. I’ve seen sites running 50+ plugins, all of which served a purpose, and all of which were performant.

Plugins aren’t inherantly bad or slow – they’re just containers for code and functionality. It’s only when they’re coded badly, or when there’s overlap between them (e.g., two plugins doing similar things, inefficiently) that it’s a problem.

Page Builders like Elementor tend to add a lot of weight, but, they deliver a ton of functionality. It’s always a trade-off!

Q: We use Sucuri Website Security Pro which includes a basic CDN. Does combining it with Cloudflare ideal? Some articles say yes, and others not but there are very few people talking about these two tools.

A: I’m not familiar with how their CDN works, but typically, it shouldn’t hurt to combine it.

Cloudflare will likely sit ‘in front’ of your site / your Sucuri CDN, which means it can work as expected, and just fall back to Sucuri when Cloudflare ‘misses’. Worth testing, though!

Q: What is the best strategy to try and clean up bloated WordPress sites? Loading assets that aren’t even used in the template choice seem to be a constant speed issue.

A: Absolutely; it’s worth going through and seeing where plugins are loading things which aren’t needed (e.g., a contact form plugin which loads CSS or JS on pages without a contact form…)

Asset CleanUp is a neat plugin for managing those types of scenarios, if you don’t want to wade into the code.

Q: I know this has mainly been about individual pages – but what about optimizing site structure? Heavier CSS and JS pages first or does it matter? Also, what about redirects?

A: Great question – this is something I think about a lot. In fact, I wrote an article recently proposing (what I think is) a best practice approach to authoring CSS structure for sites. It’s at – let me know what you think!

Q: If I use CloudFlare and WP rocket, on which service should I minify? Both have the option.

A: I’d leave Cloudflare to do the minifying; then you’re not putting extra strain on your server.

Whilst WP Rocket speeds up your site through a bunch of optimizations, it costs time/resource to do that – so anything you can offload to Cloudflare is one less process you’re straining your site with!

Q: Can we get more information on AMP?

A: Absolutely, though I’d suggest going and doing your own research, as it’s quite a broad topic!

The website for the project (which contains all the documentation, etc) is here. The official WordPress plugin is here.

[Video Recap] How to Take Your Website Beyond Fast

Watch the video recap of the webinar presentation and Q&A session below.

Here’s the SlideShare:


Image Credits

All screenshots taken by author, April 2019

Join Us for Our Next Webinar!

Join our next sponsored webinar on Wednesday, May 8 at 2 p.m. Eastern as we share how ecommerce brands can stand out in search results with user-generated content.

How to Improve Ecommerce SEO with User Generated Content





Source link

Continue Reading

Trending

Copyright © 2019 Plolu.