Google updates their snipetts

On December 1st, 2017, Barry Schwartz reported on Search Engine Land that Google had officially confirmed a change to how it displays text snippets in Google’s Search Engine Results Pages (SERPs).
Barry wrote,

“A Google spokesperson told us: ‘We recently made a change to provide more descriptive and useful snippets, to help people better understand how pages are relevant to their searches. This resulted in snippets becoming slightly longer, on average.’”

These snippets are the blurbs of text displayed in Google’s SERPs along with the clickable blue text and the page URL.

A quick Google search corroborates this – let’s use the query “how were the pyramids built” as an example:

In the answer to the general query, you can see that where Google would previously display a snippet approximately 150-165 characters long including spaces (give or take, you can see it varies now and it varied before Google made the change too), but now they’re much longer.

The text snippet Google shows in the SERP is *supposed* to be (more on this later) the contents of the meta description tag in the HTML of the page – let’s check each of these page’s actual meta descriptions and their lengths.

Here they are, in the same order as above:

◾There are no photographs of the pyramid being built, and the engineers didn’t leave detailed blueprints. [Length:109]

◾The ancient Egyptians who built the pyramids may have been able to move massive stones by transporting them over wet sand. [Length:122]

◾No meta description specified in the HTML

◾No meta description specified in the HTML

◾Here’s everything you need to know about the incredible Egyptian pyramids. [Length:74]

Two things jump out right away.

1.Google is not displaying the page’s actual meta description as the SERP snippet for these specific listings for this specific query, even when the meta description is specified in the HTML, but instead is being pulled directly from the text that appears at or near the top of the page.

2.The length of the snippets is longer than the length that Google previously displayed, congruent with Google’s confirmation that they’re showing longer SERP snippets.

Here’s how that breaks down for the above query, again in the same order as the SERP listing screenshot above:

◾The first sentence of the text is used as the SERP snippet

◾The first sentence of the text is used as the SERP snippet

◾The H1 page headline, followed by ellipses ( … ), followed by the second, third, and fourth sentences on the page in the first paragraph (skipping the first sentence in the first paragraph) are used as the SERP snippet.

◾The first and second sentences, and part of the third, are used as the SERP snippet

◾The first and second sentences, the image ALT attribute (or the image caption, they’re both the same text), plus text via HTML code associated with the image, Checking a number of other queries returned similar observations about what Google is using as the SERP snippet, but note that some SERP snippets were indeed taken from the actual meta description.

For example, in the SERP for a query for musician “Todd Rundgren”, this SERP snippet is obviously taken directly from the meta description:

For many other queries I performed, both commercial and non-commercial in query intent, it turned up a mix of SERP snippet sources – primarily either text on the page or the actual meta description specified in the HTML, and in some cases via image ALT attribute, and occasionally from some other bit of code in the HTML.

On mobile devices, the SERP snippets were very similar, in many cases the same as on desktop.

The SERP orders were slightly different, so yes, there’s going to be ranking variations based on various factors (it’s well known that Google can and will alter the SERPs you see based on your search history, geo-location, query type, your previous interaction with SERPs, etc.).

However, the overall scheme of the SERP snippets remained constant – text was taken mostly from either the first paragraph of the page, or the meta description, and in some cases the image ALT attribute, and occasionally from other text in the HTML code.

Dr. Pete Meyers over at Moz conducted research late last year on 89,909 page-one organic results.

Pete noted that the average SERP snippet was 215 characters long with the median length at 186, and he was quick to point out that, “big numbers are potentially skewing the average. On the other hand, some snippets are very short because their Meta Descriptions are very short”.

Pete also noted no significant differences between desktop and mobile snippet lengths, sometimes seeing mobile snippets longer than desktop snippets.

For sure the actual SERP snippet you see, and the length, will vary by query type.

What is going on here?

Google is trying to satisfy searchers.

Yes, traditionally the idea was that Google would pull the SERP snippet from the meta description, but for years now Google has been using whatever text its algorithms determine makes the most sense based on the user’s query.

Not all sites – for example, Wikipedia and another we saw above – don’t even make use of the meta description tag in the HTML of their pages, so what’s a poor search engine to do in that case?

Similarly, what if the meta description is badly written, or spammy-sounding with lots of keyword stuffing, or doesn’t well-reflect the page’s theme and topic(s)?

So that’s what’s going on here – Google evolved over time to use whatever it deems makes the most sense to a user performing a certain query.

Wait: What the heck is a meta description, anyway?

Meta descriptions are HTML code that Google understands, and that is meant to provide a synopsis of the page.

Here’s an example:

This code goes between the tags of the HTML and is not displayed on the visible content that a user would see.

Do meta descriptions impact SEO?

Meta descriptions will not impact rankings.

But, if Google does use a page’s meta description as the SERP snippet, that can impact click-through from the SERP.

That’s because a well-written meta description that is compelling, relevant to the page, and relevant to the query or queries for which the page is ranking, can impact organic traffic.

And that can have a downstream impact on conversions (the desired actions you want website visitors to take – fill out a form, buy something, and so on).

Poorly written meta descriptions, if used as the SERP snippet, can have the opposite effect and discourage the user to click through to your page, and instead go to your competitors.

So, what should be your strategy now that Google has increased the SERP snippet length?

In summary, you could do any of the following:

◾Do nothing at all

◾Rewrite longer meta descriptions for all your pages

◾Rewrite longer meta descriptions for some of your pages (e.g. your top ten or twenty organic landing pages, or some pages you determine have low click-thru rates)

◾Delete all your meta descriptions

◾Audit your site’s content to ensure that the first text on your page is compelling, uses keywords congruent with how someone would search for your content, ensure the first paragraph contains at least 300-350 characters of text including spaces, and front-load the first 150 characters in case google changes back to shorter snippets in the future.

What you decide to do (or not do) will at least in part hinge upon resources you have available to make changes.

Don’t take a “set it and forget it” attitude with your website’s content and your meta descriptions. It’s common for businesses to put in a fair amount of work into their website, then just let it go stale.

A good recommendation here would be to cycle through this stuff on a regular basis – think quarterly or a couple times per year. Once per year at a minimum.

Here’s what I recommend

First, it should be obvious that your page’s textual content is for humans to consume, and that should always be your primary consideration.

You’ve heard the phrase “dance like no one’s watching” – well, write like Google doesn’t exist. But Google does exist, and their mission is satisfied users (so that people continue to use their service and click on ads) – Google is chasing satisfied users and so should you.

The refrain of “write great content” has been used ad nauseum. The only reason I’m mentioning the whole “write for your users” thing is simply because often people focus primarily on “how do I SEO my pages?” instead of “what’s good for my users?”.

Okay, with that out of the way and forefront in your mind, here’s what I recommend. Adjust this according to your specific needs – your industry, your users – don’t just take this as a cookie-cutter approach.

And, do this on the time frame that makes the most sense and works for you and the resources you have available to you to make changes to your site. If you haven’t looked at your page content and meta descriptions in a year or more, then this is a higher priority for you than if you refreshed all that 60 days ago.

Meta descriptions

◾Make them about 300-320 characters long, including spaces

◾Make the meta description super-relevant to the page text

◾Front-load the first 150-165 characters with your most-compelling text – compelling to your users who might see the text as a SERP snippet (just in case Google decides to shorten them again)

◾Use a call to action if applicable, but don’t be a used car salesman about it – and as appropriate, use action-oriented language

◾Remember WIIFM – what’s in it for me – as applicable, focus on benefits, not features

◾Don’t be deceptive or make promises your page content can’t keep

Keep in mind that Google may not use your meta description as the SERP snippet and may instead use content from your page, likely from the first paragraph.

With that in mind:

Review & refresh your content

◾Make sure the H1 page headline is super-relevant to the page’s topic

◾Include an image (as applicable) that is super-relevant to the page (not one of those dumb, tangentially-related stock images) and craft an excellent and page-relevant image ALT attribute

◾Ensure that your opening paragraph is enticing and practically forces the reader to keep reading – that way if it’s the text used as the SERP snippet, that will capture people’s attention.

Summary

My summary is that if you haven’t already, please go back and read the whole article – I promise you it’ll be worth it. But I will add one more piece here and that is that ostensibly the type of content you’re creating is going to dictate how you configure your meta descriptions, H1 page headlines, and especially the opening text on the page.

In some cases, it makes sense to use the “how to feed a (Google) hummingbird” technique where you pose the topic’s question and answer it concisely at the top of the page, then defend that position, journalism style, in the rest of the text under that.

Similarly, you may be shooting for a SERP featured snippet and voice-assistant-device answer using bullet points or a numbered list at the top of your content page.

The point is, the guidelines and recommendations I’ve provided for you here are not a one-size-fits-all, cookie-cutter approach to your meta descriptions and your content. SEO experience, switching your brain into the on position, and a willingness to test, observe, and adjust are all mandatory to achieve the best results.

ABCO Technology teaches a comprehensive class for web development. Call our campus between 9 AM and 6 PM Monday through Friday at: (310) 216-3067.

Email your questions to info@abcotechnology.edu

Financial aid is available to all students who can qualify for funding.

ABCO Technology is located at :

11222 South La Cienega Blvd. STE #588
Los Angeles, Ca. 90304

 

Build highly visible webpages today

A guide to web technologies

As a certified Internet web developer, your role will invariably lead you to interactions with people in a wide variety of roles including business owners, marketing managers, content creators, link builders, PR agencies, and developers.

That last one – developers – is a catch-all term that can encompass software engineers, coders, programmers, front- and back-end developers, and IT professionals of various types. These are the folks who write the code and/or generally manage the underlying various web technologies that comprise and power websites.

In your role as a web developer, it may or may not be practicable for you to completely master programming languages such as C++ and Java, or scripting languages such as PHP and JavaScript, or markup languages such as HTML, XML, or the stylesheet language CSS.

And, there are many more programming, scripting, and markup languages out there – it would be a Herculean task to be a master of every kind of language, even if your role is full-time programmer and not a web developer.

But, it is essential for you, as a certified web developer professional, to understand the various languages and technologies and technology stacks out there that comprise the web. When you’re making website recommendations, which developers will most likely be executing, you need to understand their mindset, their pain points, what their job is like – and you need to be able to speak their language.

You don’t have to know everything developers know, but you should have a good grasp of what developers do so that you can ask better questions and provide SEO recommendations in a way that resonates with them, and those recommendations are more likely to be executed as a result.

When you speak their language, and understand what their world is like, you’re contributing to a collaborative environment where everyone’s pulling on the same side of the rope for the same positive outcomes.

And of course, aside from building collaborative relationships, being a professional web developer involves a lot of technical detective work and problem detection and prevention, so understanding various aspects of web technology is not optional; it’s mandatory.

Web tech can be complex and intimidating, but hopefully this guide will help make things a little easier for you and fill in some blanks in your understanding.

Let’s jump right in!

The internet vs. the World Wide Web

Most people use these terms interchangeably, but technically the two terms do not mean the same thing, although they are related.

The Internet began as a decentralized network of independent interconnected computers.

The US Department of Defense was involved over time and awarded contracts, including for the development of the ARPANET (Advanced Research Projects Agency Network) project, which was an early packet switching network and first to use TCP/IP (Transmission Control Protocol and Internet Protocol).

The ARPANET project led to “internetworking” where various networks of computers could be joined into a larger “network of networks”.

The development of the World Wide Web is credited to British computer scientist Sir Tim Beners-Lee in the 1980s; he developed linking hypertext documents, which resulted in an information-sharing model built “on top” of the Internet.

Documents (web pages) were specified to be formatted in a markup language called “HTML” (Hypertext Markup Language), and could be linked to each other using “hyperlinks” that users could click to navigate to other web pages.

Further reading:

◾History of the Internet

◾History of the World Wide Web

◾ARPANET

Web hosting

Web hosting, or hosting for short, are services that allow people and businesses to put a web page or a website on the internet. Hosting companies have banks of computers called “servers” that are not entirely dissimilar in nature to computers you’re already familiar with, but of course there are differences.

There are various types of web hosting companies that offer a range of services in addition to web hosting; such services may include domain name registration, website builders, email addresses, website security services, and more.

In short, a host is where websites are published.

Further reading:

◾Web Hosting Service

Web servers

A web server is a computer that stores web documents and resources. Web servers receive requests from clients (browsers) for web pages, images, etc. When you visit a web page, your browser requests all the resources/files needed to render that web page in your browser. It goes something like this:

Client (browser) to server: “Hey, I want this web page, please provide all the text, images and other stuff you have for that page.”

Server to client: “Okay, here it is.”

Various factors impact how quickly the web page will display (render) including the speed of the server and the size(s) of the various files being requested.

There are three server types you’ll most often encounter:

1.Apache is open-source, free software compatible with many operating systems such as Linux. An often-used acronym is “LAMP stack” referring to a bundling of Linux, Apache, MySQL (relational database) and PHP (a server-side scripting language).

2.IIS stands for “Internet Information Services” and is proprietary software made by Microsoft. An IIS server is often referred to as a “Windows Server” because it runs on Windows NT operating systems.

3.NGINX – pronounced “Engine X”, is billed as a high-performance server able to also handle load balancing, used as a reverse proxy, and more. Their stated goals and reason for being include outperforming other types of servers.

Further reading:

◾Apache

◾IIS

◾NGINX

Server log files

Often shortened to “log files”, these are records of server activity in response to requests made for web pages and associated resources such as images. Some servers may already be configured to record this activity, others will need to be configured to do so.

Log files are the “reality” of what’s happening with a website and will include information such as the page or file requested, date and time stamp of the request, the user agent making the request, the response type (found, error, redirected, etc.), the referrer, and a few other items such as bytes served and client IP address.

Web developers should get familiar with parsing log files. To go into this topic in more detail, read JafSoft’s explanation of a web server log file sample.

FTP

FTP stands for File Transfer Protocol, and it’s how you upload resource files such as webpages, images, XML Sitemaps, robots.txt files, and PDF files to your web hosting account to make these resource files available and viewable on the Web via browsers. There are free FTP software programs you can use for this purpose.

The interface is a familiar file-folder tree structure where you’ll see your local machine’s files on the left, and the remote server’s files on the right. You can drag and drop local files to the server to upload. Voila, you’ve put files onto the internet! For more detail, Wired has an excellent guide on FTP for beginners.

Domain name

A domain name is a string of (usually) text and is used in a URL (Uniform Resource Locator). Keeping this simple, for the URL https://www.website.com, “website” is the domain name. For more detail, check out the Wikipedia article on domain names.

Root domain & subdomain

A root domain is what we commonly think of as a domain name such as “website” in the URL https://www.website.com. A subdomain is the www. part of the URL. Other examples of subdomains would be news.website.com, products.website.com, support.website.com and so on.

For more information on the difference between a domain and a subdomain, check out this video from HowTech.
URL vs. URI

URL stands for “Universal Resource Locator” (such as https://www.website.com/this-is-a-page) and URI stands for “Uniform Resource Identifier” and is a subset of a full URL (such as /this-is-a-page.html). More info here.

HTML, CSS, and JavaScript

I’ve grouped together HTML, CSS, and JavaScript here not because each don’t deserve their own section here, but because it’s good for web developers to understand that those three languages are what comprise much of how modern web pages are coded (with many exceptions of course, and some of those will be noted elsewhere here).

HTML stands for “Hypertext Markup Language”, and it’s the original and foundational language of web pages on the World Wide Web.

CSS stands for “Cascading Style Sheets” and is a style sheet language used to style and position HTML elements on a web page, enabling separation of presentation and content.

JavaScript (not to be confused with the programming language “Java”) is a client-side scripting language to create interactive features on web pages.

Further reading:

◾HTML intro

◾CSS intro

◾JavaScript intro

AJAX & XML

AJAX stands for “Asynchronous JavaScript And XML. Asynchronous means the client/browser and the server can work and communicate independently allowing the user to continue interaction with the web page independent of what’s happening on the server. JavaScript is used to make the asynchronous server requests and when the server responds JavaScript modifies the page content displayed to the user. Data sent asynchronously from the server to the client is packaged in an XML format, so it can be easily processed by JavaScript. This reduces the traffic between the client and the server which increases response time and speed.

XML stands for “Extensible Markup Language” and is similar to HTML using tags, elements, and attributes and was designed to both store and transport data, whereas HTML is used to display data. For the purposes of SEO, the most common usage of XML is in XML Sitemap files.

Structured data (AKA, Schema.org)

Structured data is markup you can add to the HTML of a page to help search engines better understand the content of the page, or at least certain elements of that page. By using the approved standard formats, you provide additional information that makes it easier for search engines to parse the pertinent data on the page.

Common uses of structured data are to markup certain aspects of recipes, literary works, products, places, events of various types, and much more.

Schema.org was launched on June 2, 2011, as a collaborative effort by Google, Bing and Yahoo (soon after joined by Yandex) to create a common set of agreed-upon and standardized set of schemas for structured data markup on web pages. Since then, the term “Schema.org” has become synonymous with the term “structured data”, and Schema.org structured data types are continually evolving with new types being added with relative frequency.

One of the main takeaways about structured data is that it helps disambiguate data for search engines so they can more easily understand information and data, and that certain marked-up elements may result in additional information being displayed in Search Engines Results Pages (SERPs), such as review stars, recipe cooking times, and so on. Note that adding structured data is not a guarantee of such SERP features.

There are a number of structured data vocabularies that exist, but JSON-LD (JavaScript Object Notation for Linked Data) has emerged as Google’s preferred and recommended method of doing structured data markup per the Schema.org guidelines, but other formats are also supported such as microdata and RDFa.

JSON-LD is easier to add to pages, easier to maintain and change, and less prone to errors than microdata which must be wrapped around existing HML elements, whereas JSON-LD can be added as a single block in the HTML head section of a web page.

Here is the Schema.org FAQ page for further investigation – and to get started using microdata, RDFa and JSON-LD, check out our complete beginner’s guide to Schema.org markup.

Front-end vs. back-end, client-side vs. server-side

You may have talked to a developer who said, “I’m a front-end developer” and wondered what that meant. Of corse you may have heard someone say “oh, that’s a back-end functionality”. It can seem confusing what all this means, but it’s easily clarified.

“Front-end” and “client-side” both mean the same thing: it happens (executes) in the browser. For example, JavaScript was originally developed as something that executed on a web page in the browser, and that means without having to make a call to the server.

“Back-end” and “server-side” both mean the same thing: it happens (executes) on a server. For example, PHP is a server-side scripting language that executes on the server, not in the browser. Some Content Management Systems (CMS for short) like WordPress use PHP-based templates for web pages, and the content is called from the server to display in the browser.

Programming vs. scripting languages

Engineers and developers do have differing explanations and definitions of terms. Some will say ultimately there’s no differences or that the lines are blurry, but the generally accepted difference between a programming language (like C or Pascal) vs. a scripting language (like JavaScript or PHP) is that a programming language requires an explicit compiling step, whereas human-created, human-readable code is turned into a specific set of machine-language instructions understandable by a computer.

Content Management System (CMS)

A CMS is a software application or a set of related programs used to create and manage websites (or we can use the fancy term “digital content”). At the core, you can use a CMS to create, edit, publish, and archive web pages, blog posts, and articles and will typically have various built-in features.

Using a CMS to create a website means that there is no need to create any code from scratch, which is one of the main reasons CMS’ have broad appeal.

Another common aspect of CMS’ are plugins, which can be integrated with the core CMS to extend functionalities which are not part of the core CMS feature list.

Common CMS’ include WordPress, Drupal, Joomla, ExpressionEngine, Magento, WooCommerce, Shopify, Squarespace, and there are many, many others.

Read more here about Content Management Systems.

Content Delivery Network (CDN)

Sometimes called a “Content Distribution Network”, CDNs are large networks of servers which are geographically dispersed with the goal of serving web content from a server location closer to the client making the request in order to reduce latency (transfer delay).

CDNs cache copies of your web content across these servers, and then servers nearest to the website visitor serve the requested web content. CDNs are used to provide high availability along with high performance. More info here.

HTTPS, SSL, and TLS

Web data is passed between computers via data packets of code. Clients (web browsers) serve as the user interface when we request a web page from a server. HTTP (hypertext transfer protocol) is the communication method a browser uses to “talk to” a server and make requests. HTTPS is the secure version of this (hypertext transfer protocol secure).

Website owners can switch their website to HTTPS to make the connection with users more secure and less prone to “man in the middle attacks” where a third party intercepts or possibly alters the communication.

SSL refers to “secure sockets layer” and is a standard security protocol to establish communication encryption between the server and the browser. TLS, Transport Layer Security, is a more-recent version of SSL

◾More info on HTTPS, SSL, & TLS

HTTP/1.1 & HTTP/2

When Tim Berners-Lee invented the HTTP protocol in 1989, the computer he used did not have the processing power and memory of today’s computers. A client (browser) connecting to a server using HTTP/1.1 receives information in a sequence of network request-response transactions, which are often referred to as “round trips” to the server, sometimes called “handshakes”.

Each round trip takes time, and HTTPS is an HTTP connection with SSL/TSL layered in which requires yet-another handshake with the server. All of this takes time, causing latency. What was fast enough then is not necessarily fast enough now.

HTTP/2 is the first new version of HTTP since 1.1. Simply put, HTTP/2 allows the server to deliver more resources to the client/browser faster than HTTP/1.1 by utilizing multiplexing, compression, request prioritization, and server push which allows the server to send resources to the client that have not yet been requested.

Further reading:

◾HTTP/2 FAQ

◾What is HTTP/2 and how does it benefit SEO?

Application Programming Interface (API)

Application is a general term that, simply put, refers to a type of software that can perform specific tasks. Applications include software, web browsers, and databases.

An API is an interface with an application, typically a database. The API is like a messenger that takes requests, tells the system what you want, and returns the response back to you.

If you’re in a restaurant and want the kitchen to make you a certain dish, the waiter who takes your order is the messenger that communicates between you and the kitchen, which is analogous to using an API to request and retrieve information from a database. For more info, check out Wikipedia’s Application programming interface page.

AMP, PWA, and SPA

If you want to build a website today, you have many choices.

You can build it from scratch using HTML for content delivery along with CSS for look and feel and JavaScript for interactive elements.

Or you could use a CMS (content management system) like WordPress, Magento, or Drupal.

Or you could build it with AMP, PWA, or SPA.

AMP stands for Accelerated Mobile Pages and is an open source Google initiative which is a specified set of HTML tags and various functionality components which are ever-evolving. The upside to AMP is lightning-fast loading web pages when coded according to AMP specifications, the downside is some desired features may not be currently supported, and issues with proper analytics tracking.

Further reading:

◾What will Google’s Accelerated Mobile Pages mean for marketers?

◾Accelerated Mobile Pages (AMP) one year on: stats and infographic

◾Accelerated Mobile Pages vs Facebook Instant Articles: Is Google winning the mobile war?

PWA stands for Progressive Web App, and it blends the best of both worlds between traditional websites and mobile phone apps. PWAs deliver a native app-like experience to users such as push notifications, the ability to work offline, and create a start icon on your mobile phone.

By using “service workers” to communicate between the client and server, PWAs combines fast-loading web pages with the ability to act like a native mobile phone app at the same time. However, because PWAs are JavaScript frameworks, you may encounter a number of technical challenges.

Further reading:

◾Progressive Web Apps versus Android Instant Apps: Which is better for marketers?

◾Google I/O: What’s going on with Progressive Web Apps?

SPAs – Single Page Applications – are different from traditional web pages which load each page a user requests in a session via repeated communications with the server. SPAs, by contrast, run inside the browser and new pages viewed in a user session don’t require page reloading via server requests.

The primary advantages of SPAs include streamlined and simplified development, and a very fast user experience. The primary disadvantages include potential problems with SEO, due to search engines’ inconsistent ability to parse content served by JavaScript. Debugging issues can also be more difficult and take up more developer time.

It’s worth noting that future success of each of these web technologies ultimately depends on developer adoption.

Conclusion

Obviously, it would require a very long book to cover each and every bit of web technology, and in sufficient detail, but this guide should provide you, the professional web developer, with helpful info to fill in some of the blanks in your understanding of various key aspects of web technology.

I’ve provided many links in this article that serve as jumping off points for any topics you would like to explore further. There’s no doubt that there are many more topics web developers need to be conversant with, such as robots.txt files, meta robots tags, rel canonical tags, XML Sitemaps, server response codes, and much more.

In closing, here’s a nice article on the Stanford website titled “How Does The Internet Work?” that you might find interesting reading; you can find that here.

ABCO Technology teaches a comprehensive program for web development. Call our campus between 9 AM and 6 PM Monday through Friday at: (310) 216-3067

Email your questions to: info@abcotechnology.edu

Financial aid is available to all students who can qualify for funding.

ABCO Technology is located at:
11222 South La Cienega Blvd. STE #588
Los Angeles, Ca. 90304

 

Learn web development today!

8 tips for boosting the speed of your WordPress site

Chances are you’d not have waited for this page to load had it taken a second or two longer.

That’s the best known fact on the Internet today. users expect web pages to load very fast as soon as they click on a hyperlink.

Slow loading web pages can become the leading cause of high bounce rates, low user engagement, lost traffic opportunities, and abandoned sales journeys. Here are some numbers to put things in perspective.

◾47% of users expect a web page to load in less than 2 seconds.

◾40% of online shoppers abandon a web page if it takes more than 3 seconds to load.

◾A 1 second delay in page loading can lead to a 16% dip in customer satisfaction, a 7% dip in conversions, and a 11% dip in page views.

What’s more, ecommerce websites associate fast loading with increased revenue, and the reverse is also true.

The calling is clear: your websites need to load super quickly to sustain and nurture audience attention, avoid high bounce rate, and prevent abandoned sales.

If you have a WordPress site, there are a number of easy and effective methods you can begin using today that will significantly increase your site’s loading speed.

Use grids and floats instead of nested tables

It’s surprising how many websites still continue to use nested tables, in spite of the negative impact they have on page loading speeds. Here’s what a nested table code looks like:

………

Such coding adds additional burden on the browser, delaying complete loading of the content. Instead, use non-nested table structure as follows:

……

More importantly, use floats and grids to enhance loading speed. Here is a basic float example:

Basic float example

image anchor text

Sample text

Sample text

Reduce the number of HTTP requests

A web page consists of several components – style sheets, Flash components, images, scripts, and more. To deliver content rich experiences, you need to opt for entire Page Speed Insights Optimization process.

More the number of elements per page, more the number of HTTP requests made for each of these, resulting in longer page loading time durations, which could hurt your conversions. Yahoo estimates that almost 80% of page loading time is accounted for the time spent in downloading the different elements of the page.

Use the HTTP requests checker tool to find out how many requests your page makes.

Luckily, you can reduce HTTP requests without ruining your web design. Here’s how:

◾Combine files: Use scripts and external style sheets (but don’t have more than one script and CSS file each.

◾Image maps: Use contiguous images instead of several image blocks, to reduce the number of HTTP requests.

◾CSS Sprites: Combine multiple images to a sprite, and call the sprite instead of each image. When the sprite contains images from internal pages also, the internal page load times improve, because the content is already downloaded before the user reaches there.

◾Make smaller Javascript blocks inline.

◾Convert images to Base64 coding using an encoder; because it transforms an image into code, the HTTP request is prevented.

Break comments into pages

Your most popular content posts could also be the ones loading the slowest, because of the hundreds of comments on the page. You can’t block comments, because they are conversation starters and link builders for you.

How do you manage, then? WordPress offers a very smart solution – break the comment stream into pages.

In the Dashboard, go to Settings. Under the section Other comment settings, you can tweak the settings for how many comments appear on a page, and which page is displayed beneath the article.

Upgrade to the latest PHP version

Upgrading your website every time a new PHP version is launched can be a bit of a headache. But it’s worth your time and effort. The same scripts could run almost 25-30% faster on newer PHP versions; imagine the kind of website loading time improvements it can bring for you.

PHP Classes published an extensive experimental study, which highlighted that scripts ran significantly faster on PHP 7.1 as compared to previous versions.

Gzip compression

If you use Google’s Page Speed Insights tool for a quick analysis of your web pages, it’s likely you will find advice to use Gzip compression. This compression enables web servers to compress heavy website content elements.

The compression is so effective that it could reduce your page size to 30-40% of its initial size. Dolloped speeds, because of this, could increase to three or four times their previous speed.

For many webmasters, installing a Gzip compression plugin continues to be the best option. W3 Total Cache plugin, apart from all its amazing features, also offers HTTP compression.

Other options are:

◾Ask your web host if it offers Gzip compression.

◾Manually enable Gzip compression via .htaccess (this guide by Kinsta explains how to do so)

Don’t let ad scripts and pop-ups spoil user experience

Chances are you run at least some form of pop-up to optimize conversions. As beneficial as these might be for your website’s monetization strategies, they may also be causing significant damage in terms of higher page loading times.

To take control and strike the perfect balance, you need to know the third-party scripts running on your website, their source, and their impact.

I recommend Pingdom’s Website Speed Test for a thorough analysis of each file and script from a webpage. The tool will tell you which script takes the most time to load.

Gauge the effectiveness of your pop-ups; do away with non-performing pop-up plugins, as they’re only slowing down your page. OptinMonster is one of the most reliable pop-up plugins, helping you optimize conversions without killing speed.

Install a caching plugin

Caching plugins can be a blessing for your website; these plugins create static copies of your webpage content, and instead of making to and fro queries to the database, use the static versions to immediately showcase the web content to users. Since you ordinarily won’t update your web pages daily, caching proves to be very useful for almost all web pages, always.

Among the many caching plugins you can use, WOT Cache Plugin enjoys a lot of trust and popularity. Among its many features are:

◾Combines CSS and Javascript files

◾Leverages the power of page caching and browser caching

◾Utilizes lazy load to massively improve the page load time

◾Helps with database optimization and removes query strings from CSS/Javascript files

◾Saves a lot of bandwidth by reducing the file size of the webpages.

Bonus tip: Seek help from your web hosting service provider

It makes sense to move to a dedicated hosting plan, so that your website gets all the resources it needs to load in a jiffy, always. Ask your web host as to what help it can provide you to improve your website speed.

Most web hosts are willing to offer their technical expertise to help you pluck the low hanging fruits in terms of your website’s speed issues. This, in turn, benefits them, as the load on their servers reduces.

Particularly, ask for their advice on optimizing mobile website speed, because the impact of slow loading is much severe on mobile devices.

Concluding remarks

Every few milliseconds of improvement in your web page’s loading speed could bring tens of percentage points of improvements in its traffic and conversion rates.

Start with these easy and practical tips, most of which will result in almost immediate improvements in page loading speed for your website.

ABCO Technology teaches a comprehensive program for web development. Call our campus between 9 AM and 6 PM Monday through Friday at: (310) 216-3067.

Email your questions to: info@abcotechnology.edu

Financial aid is available to all students who qualify for funding.

ABCO Technology is located at:
11222 South La Cienega Blvd. STE #588
Los Angeles, Ca. 90304

 

Building fast loading webpages today!

×

Request Info with No Obligation

    How much is tuition?Can I get financial aid?What are my career prospects?When does it start?

    By checking this box, I give consent for ABCO Technology to use automated technology to call and/or text me at the number provided above, including my wireless number if applicable. Call us for information: 310-216-3067

    I understand & agree