Website Optimization - Where do I start?

This article gives you some quick tips and helpful resources on how to optimize web and landing pages.

Why Optimize Pages:

You should be optimizing your web pages for User Experience (no excuses), as doing so will also help with advertising naturally. UX is important  because Google wants to make sure that the pages it sends people are easy to use, load fast, and of course, have relevant content.

When you take time to think about it, that makes perfect sense; but most companies I interact with just don't know where to start exactly. Here are some things to keep in mind (with extra tips/ details below):

• Does the page load fast?
• What does Google think of the page?
• Are the images compressed?
• Is your meta description missing or too long in SERP (not cut off/ truncated)?
• Are your Heading tags coded in, and are they in the right hierarchal order (not just used for styling)?
• Is your title tag optimized and looks proper in SERP (not cut off/ truncated)?
• Is the content relevant to a users' search/ query?

We could go into more technical details, but the above are great places to start and should be kept in mind. 

Optimized Page Speed

Many clients I interact with are not as concerned about page speed as they should be, even though there is overwhelming evidence that it directly affects analytics due to user experience (higher bounce rates, lower time on page, negative impact on conversion rates, etc.). 

I believe these clients are not concerned because they simply don't monitor the negative effects. Bad page speeds will impact their rankings, impact their conversions/ goals, and with advertising, it will impact their QS (Quality Score: Google & Bing). It is important enough that Google stated it is a data point picked up by its algorithm to rank pages.

So, what are some ways to look at speed overall? Below are some helpful tools and references:

Tools for Page and Site Speed Lookup:

Google Page Speed Insights - This is a great place to look at the speed of a specific page. Not only will it give the page a score, but it will explain what exactly is causing issues and give you extra information when you click on "Show how to fix". Also, you can download the optimized files at the bottom (though the images usually can be compressed just a bit more; or even though some light photo manipulation).

PageSpeed Insights Rules: This page gives you all the information needed to understand what Google looks at on your page. In general, there are some great best practices to keep in mind.

GT Metrix: This tool uses several different tools available on the web and brings them to one location. Pulling from PageSpeed Insights, YSlow, and more, this tool does a good job at analyzing your page's speed performance. If you sign up for free, you have better control of the test settings (For example, you can change the "Test Server Region" to something more local.)

WebPagetest: This site is a bit more technical, but gives you great insight into the speed of a page. Not only that, but it gives you great visuals on what exactly is slowing down/ loading on a page and a checklist of where to start optimizing. Also, before starting the test, you can setup multiple "runs" to compare views & metrics.

Optimized Images

Something I usually see ignored are images. Not only are they uncompressed most of the time, but they are usually not sized correctly. Additionally, image sprites are not used when applicable or just don't respond correctly for mobile. So what should you keep in mind?

Keep your images optimized:

• Compress your images! If you already used Google PageSpeed Insights, it provides compressed images after the scan. The files they provide after the scan are a tiny bit hard to find, but if you look close to the bottom of the page, you will see text labeled "Download optimized image, JavaScript, and CSS resources for this page."
•  GiftOfSpeed is a tool that identifies which images to minify and their sources, images that could be used in a CSS sprite, and even which images don't have size dimensions (width and height are set for quicker page rendering). 
• Check your image dimensions! Sounds weird that setting image dimensions can affect page speed, right? Well, not only do you not have to wait for another asset (the stylesheet) to load, but by specifying the height and width attributes of an <img>, the browser reserves a space matching those dimensions for that image while it continues parsing the rest of the HTML document. Then, when the browser loads the image, the reserved space is waiting and there is no need to "reflow" the document (A reflow involves changes that affect the layout of a portion of the page or the whole page (different then a "repaint").) Providing this sizing data results in a faster rendering process.
• Use CSS sprites where applicable. That means combining multiple images into a single image called a sprite sheet or tile set. Sprites reduce network congestion by reducing the number of downloads needed to render a web page ("HTTP requests" - which you can see using WebPagetest or GT Metrix).
• Size your images correctly! Too many times I see images that are extremely large. Basically, it seems people just take the largest file size from a stock site and toss them into a section and manually resize using some kind of wysiwyg editor. Using an image that is giant in a spot that only needs a couple hundred pixels is slowing down your site!  Find the size you need, resize and compress the image, and then specify those image dimensions in your code please.
• Check your images on mobile! I don't know how many times I have seen a small image blow up to gigantic sizes and become a blurry mess. Or, a large image shrinks down to be illegible and hard on the eyes. Not only does it look unprofessional, but it will provide a bad UX also (and Google will figure that out...). Some common issues I see on mobile are large images that should not be displayed at small widths and subsequently create huge scrolling sections; small images that are sized down to even smaller sizes making clicking/ targeting hard on a  user; large images that should be displayed at a smaller resolution being coded as responsive, but the image size is massive for mobile thereby causing weird breaking points that push the copy around, etc. All these issues can easily be avoided by doing a bit of mobile QA! Google will notice these issues from user interaction/analytics or from a crawl, so don't let something so simple impact your rankings or conversions! 

Optimized Data Points and Headers

There are two points I want to make in this section.

One, stop using headers as styling elements!

Two, unless you have a large site, stop dynamically generating titles & metas!

Now, you might not get exactly penalized for these issues, and they won't impact page speed times, but they are quick wins and important when optimizing a page. Why?

• Each header is a data point Google will rank the page against. Be wise with what headers you are using to give Google to match you with keywords or queries; being lazy with it will water down your content and make it harder for Google to understand what the page is about. Stop putting lazy filler content, generic statements, or data points that don't support content in headers, i.e: "We help the way you do business", "Take control of your IT future", "Take your IT to the next level", etc. Text like this tells Google nothing about the page/ supporting content.
• Stop using your headers for styling purposes. I have seen too many pages with dozens of H1s or H2s that are being used to style a CTA, or Testimonial, some generic statement like the examples above in a fancy style, or even house images that Google probably won't recongize or don't add to the content at all. Your headers are data points to rank pages; make sure what you have in them helps Google understand your page. Again, like above, stop using filler content in them and generic statements (i.e. "Better IT for A Better Business", "Focus on your business while we focus on your IT", etc.). Those "catchy" headlines tell nothing to Google and most of the time to the user as well. Also, unless you coded your page in sections properly using HTML5, please only use one H1 for now and stay in hierarchal order (Don't skip a tag number when going up or down the order.)
• Unless you have a large site, you should really keep an eye on your Titles and Meta Descriptions. Yes, Matt Cutts said they don't directly affect your rankings, but they will affect your user interaction/ click throughs, which in turn can affect your rankings. Metas are your chance to show searchers that your page contains the information they're looking for. Consider them a way to advertise your content to a searcher in order to show the information you have is relevant. Titles also help search engines a lot when trying to understand your page. Your search engine results are really the first impression searchers have of your page, give them something enticing to click on.  Give your titles some love, and more importantly, check out how they look in SERP.
• Use a SERP Checker - When I say check them out in SERP, it is so they don't look odd or are truncated (You can check how they look using a SERP Checker.) Sometimes you can see metas go up to 300 characters in length (same with Titles, going upwards of 100 characters), but that is not always the case. For metas, you should stay under 160 characters, and for titles, you should stay around 50-60 characters.

Provide Relevant Content and Ease of Use

This should be a no-brainer, but please keep your content up to date/ ever green if possible. I can't count the amount of times where I see "thin content" pages or pages that provide non-relevant content to the actual search/ query. Google wants you to basically stay transparent and be as relevant to your ad text, keyword, or query focus as possible. .

There a few things to keep in mind that Google specifically suggests to improve your on page user experience. Those bullets have been referenced below:

1. Offer relevant, useful and original content on your landing pages
   • Make sure your landing page is directly relevant to your ad text and keyword.
   • Be specific when the user wants a particular thing: If someone clicks on an ad for a sports car, they shouldn’t wind up on a general “all car models and makes” page
   • Be general when the user wants options: If someone’s looking to compare digital cameras, they probably don’t want to land on a specific model’s page
     Provide useful information on your landing page about whatever you're advertising.
   • Try to offer useful features or content that are unique to your site.
2. Promote transparency and foster trustworthiness on your site
   • Openly share information about your business and clearly state what your business does
   • Explain your products or services before asking visitors to fill out forms
   • Make it easy for visitors to find your contact information
   • If you request personal information from customers, make it clear why you're asking for it and what you'll do with it
   • Distinguish sponsored links, like ads, from the rest of your website’s content
3. Make mobile and computer navigation easy
   • Organize and design your page well, so people don’t have to hunt around for information.
   • Don’t annoy customers with pop-ups or other features that interfere with their navigation of your site.
   • Help customers quickly find what they’re looking for by prioritizing the content that's visible above-the-fold
4. Be fast—decrease your web page loading time
   • Make sure your pages load quickly once someone clicks on an ad, a link or an offer, whether on a computer or mobile device.

Start looking at your site today with a free TSL audit report via email and see if there is anything you should be concerned about or can improve. We will email you the full report free!