Get My Ultimate PageSpeed Optimization Guide 2015
People Love Speed
WARNING: This is a massive post! If your website is slow to load or you want to figure out how to drive more traffic to it then read this all the way through. The reason I am writing a primer on page load speed is because too many people are not aware of the impact speed can have. Google loves fast web pages and is obsessed with speed. Money also loves speed and gravitates towards it. A page that loads quickly will generate more traffic, more conversions and higher search ranking positions. For example, do you like going to a page that takes several seconds to load and all you see for about 8-10 seconds is the loading bar? I sure don’t.
“Google’s own study showed the importance of speed in search results, finding that increasing latency by 100ms and 400 ms reduced daily searches by 0.2% to 0.6% respectively (Google 2009).”
The above quote from Google means that people were staying on web pages longer because they loaded faster. One of the main reasons why users leave (or bounce) from pages is because they take too long to load. This primer on page load speed will serve as an introduction to how you can increase your website’s speed.
Firstly, here are some tools to test and analyze your page speed:
Webpagetest.org
Google Page Speed Insights
GT Metrix
YSlow
Google PageSpeed Insights
In this article I will focus on Google Chrome since it is the #1 browser across all platforms, mainly because of its mobile presence, hence the reason why Internet Explorer died not too long ago. By running the Google PageSpeed Insights tool you’ll notice that page speed is broken down into two separate sections: Mobile & Desktop grades. Meaning you get a page speed grade for how your website looks and loads on mobile as well as for the desktop. User Interface is given more importance when it comes to mobile. There are several factors that effect page load speed and they are the following:
Speed Rules
Avoid landing page redirects
Enable compression
Improve server response time
Leverage browser caching
Minify resources
Optimize images
Optimize CSS Delivery
Prioritize visible content
Remove render-blocking JavaScript
Use asynchronous scripts
Usability Rules
Avoid plugins
Configure the viewport
Size content to viewport
Size tap targets appropriately
Use legible font sizes
For someone completely new to web developing all of this can seem terrifying. All it really means is how long does it take to download your page by the Google robots. Playing by the rules above will keep your page load speed to a minimum but the concern for Google SERP (search engine ranking position) is crawl time. For example, when you publish new content/pages how fast can the Google robot crawl your page to include it in search results?
“The results of a study on load time factors in Google search engine rankings. The empirical study found that website crawl time and its variability strongly correlate with search engine rankings. Page load time did not correlate with SERP position.” – Journal of Web Engineering
Again this post will serve as an introduction to page load speed, as I am going to make future posts on individual case studies that will provide further information. I’ll be using WordPress websites for reference. Some standard practices when using the WordPress platform is to always update WordPress software and plugins. Also make sure to backup before updating, use BackWPup (free plugin). So lets dive into the world of page load speed.
Avoid Landing Page Redirects
First on the list is to avoid landing page redirects. Which means when your home page URL redirects to another URL. For example, if your web address is “awesomesite.com” and for mobile users it redirects to “m.awesomesite.com” this is a redirect. The more redirects the slower your page is, especially for mobile users. So if you have one of these redirects on your site remove it today and you’ll see a jump in page load speed. Use responsive web design to make sure your site meets the needs of multiple users across multiple devices. I use Avada, one of the best selling themes for WordPress because of its customization options.
Enable Compression
When loading resources compression will only benefit your page load speed. Using standard gzip compression practices on your website can load resources up to 90% faster for the user. In a nutshell compression can make the trip between browser and server much shorter. When a browser makes a request to the server for any file on your site, if this file is sent over already compressed it will get there much faster. Use online gzip test to see if your website is loading compressed content.
Some WordPress hosting plans already come with compression enabled. For example, WordPress managed hosting with GoDaddy comes with backup, compression and caching included. Get $1/month WordPress hosting here (only valid until 11/2015). If you are using WordPress a good compression plugin is GZip Ninja Speed.
Improve Server Response Time
This is how long it takes the necessary HTML to begin rendering your website from your server. A browser requests something from your server, and how fast the server responds can really affect page load speed. According to Google:
“You should reduce your server response time to under 200ms.”
As in most cases, you can invest the time to work with the server you already have or pay for more servers. Usually you’ll hear a website say they are “installing more servers” because of an increase in traffic they may have had. This will lighten the load across more servers; more memory and space equals faster responses. Not only does the amount of servers make a difference but the software they are using and how that software is configured. The most popular server software’s are Apache and Nginx. Again if this sounds like I’m speaking Martian then it’s best to pay someone to install/configure software on your server or just invest the time into learning them.
Another important aspect when it comes to server response time is how many resources have to be loaded. If you’re loading a lot of high-resolution images, HTML, JavaScript, CSS and so forth this can lag your server. Minimize resources for faster response time. There is a good resource to test how many resources your page is using here. You can also defer or lazy load specific resources such as images, javascript and css. This is a little more advanced and I will touch on it below.
Leverage Browser Caching
Remember that each time someone visits your page the web browser makes a request to your server for each and every resource on your page. So what about when a returning visitor sees the same page on your site multiple times in a day, week or even month? There is no need to request a new version of an image or resource that hasn’t changed in a while for example, your company logo or your portrait.
Browser caching saves this version of your resource in the cache of your user’s computer and therefore loads it directly from their browser cache. This can be controlled from being cached for only a few hours to several months. It only changes when you empty the cache on your website or when a user clears their cache on their web browser.
“Each resource should specify an explicit caching policy that answers the following questions: whether the resource can be cached and by whom, for how long, and if applicable, how it can be efficiently revalidated when the caching policy expires.” – Google PageSpeed Insights
Some WordPress plugins that are great for browser caching are Leverage Browser Caching Ninjas, W3Total Cache and WP Super Cache. Another simple way of leveraging browser caching is modifying your .htaccess file on your web host/server. This is a bit more advanced but you can learn more in this great post here. Double check with your hosting provider if they are already taking care of caching for you, like Managed WordPress Hosting from GoDaddy because you wouldn’t want to be caching twice (caching your cache; unless your talking about cashing your cash).
Minify Resources
Go to your website and right-click. Then click View Page Source. See all that code? All of that has to load when someone visits your page. When developers code they use spacing and indentation for clarity and organization. They’ll also create separate files for CSS or JS when the code gets too long to include in HTML. This causes a lot of latency on page load speed. Another thing about coding is that it can get redundant and have several tags (i.e. <style> […] </style>) that are doing the same thing this can also be minified.
Minifying HTML, CSS and JS removes all unnecessary spacing and crunches it all together to load faster. Some examples of this are code comments and formatting, unused code and shorter function names. A great WordPress plugin that does this is Autoptimize, which automatically starts to minify when you simply check a box. Another resource that also has this function is Cloudflare (a free service). You want to make sure that you only have one thing minifying your code because if you have more than one it will cause the opposite effect and make your site slower. The PageSpeed Insights Chrome Extension also minifies html.
Optimize Images
Here is one simple and easy way you can really increase your page load speed. After running the Google PageSpeed or YSlow tools you will see some of your images need to be optimized. Most people when adding images to their websites just drag and drop because it’s easy. A good practice is resizing beforehand. A plugin that automatically optimizes your images in bulk or as you import them is EWWW Image Optimizer. Image optimization will be unique for everyone, see Google’s image optimization guide for help.
You want to make sure you resize your images to the size that they’re going to appear on your website. When images are being resized in HTML this makes your page slower. So if you will be using a thumbnail of your image at 150 x 150px then make sure you make the image that size before uploading it.
Another thing that makes your images larger is useless metadata like the camera that you used to make the image, date and time, shutter speed, geo information etc. If the images are yours the only thing you really want in the metadata is your © copyright information and should remove everything else. There are tools out there that do this, I use Lightroom as most photographers do and there’s an option to export your image with only the copyright in the metadata.
A great website for drag and drop optimization is tinypng.com and if you’d rather have software on your computer you can use RIOT. A more advanced resource is the dataURI tool. A quick note on pngs and jpgs. PNG format is good for images that have text because it does not scale the text with the image like jpg does. Text in jpg images usually looks blurry because of this.
Optimize CSS Delivery
Optimizing CSS delivery is one of the most common page load speed problems. CSS files are cascading stylesheets. They control the look and design of your site for the most part, things like style and layout. Many times a css file will be externally linked as a separate file within your html code. This is a common workflow practice that web developers use especially when css files become too large so they can work on them separately. But, it causes a delay in the rendering of pages.
So, css files load the style and layout of your page, which means they have to load before everything or else your styles and layouts get screwed. Here’s an example, while all of your stuff is being rendered for the viewer, there happens to be a link to an external stylesheet. Now the browser has to wait until everything in that external css file is rendered before continuing the rendering of your page (something that prevents the page from rendering is known as render-blocking). This happens for each and every css and javascript file on your page creating way too many round trips to your server.
Example of “above the fold” content, a page load speed factor.
At this point it’s good to define what a critical rendering path is. The critical rendering path is the necessary (or critical) events for rendering (displaying) the “above the fold” content. Basically whatever resources are needed to serve up viewable content to the user upon arrival. “Above the fold” means anything that can be seen before scrolling takes place (see right image). The critical rendering path usually follows these steps: html > css > js.
It is important to mention that when you are optimizing delivery of anything on a website it means you are making sure it loads first before everything else. That can vary from company to company, individual to individual but is a question everyone should consider. Smashing Magazine’s Vitaly Friedman wrote an article some time ago as a case study on how they improved site performance. Their goal was clearly defined: “A shared main goal was to deliver the content as fast as possible to as many people as possible regardless of their device or network capabilities, and enhance the experience with progressive enhancement for capable browsers.” Their focus was on making sure content (text) loaded first then everything else deferred.
Autoptimize, mentioned above compiles a lot of your css into one file but does not do this with the css files that aren’t housed on your site (i.e. Google Fonts). With this plugin you also have the option to inline css files, meaning instead of externally linking to it you put the css code right into your html but, this only works with small css files. When you have large css files you will have to figure out which part of the css file is critical, load that part first and defer the rest. There is a tool that does this for you called the Critical Path CSS Generator (only works with files that are housed on your server).
Prioritize Visible Content
This refers to the “above the fold” content, mentioned before. Again, the less round trips to your server the better here. Google says the rule is to keep above the fold content to 14.6kB (compressed) or below. One way of doing this is to structure your html to load the above the fold content first. You want to load the main content first. For example, if only 1-2 images are above the fold then you can defer or lazy load the rest. To defer means that it doesn’t load until the above the fold loads and lazy load means that it loads as needed (i.e. as the user scrolls). This will be perceived by the user as loading quickly because content is served as the rest loads in the background.
For example, some things that are not needed in the above the fold content are third-party widgets such as, Facebook badges, Google badges and other sidebar widgets, these can be deferred and loaded later. To accomplish this you will need two separate css files one for above the fold content and one with the rest of your content. If you have more than two css or js files loading on your page it’s usually too much. Once you’ve figured out what is needed in your above the fold (ATF) content you should reduce the amount of resources these things use. That can be done with minifying (mentioned above), using css (styling) instead of images and enabling compression (also above).
Remove Render-Blocking Javascript
Javascript can do a lot of cool things that will make your site look intelligent such as, changing the color of a button after the user has clicked on it or simply adding a subscriber to your email-marketing list. Most of the time js is not necessary for the ATF content. Most js files will be render-blocking, meaning they hog up resources because the page has to wait for your Aweber opt-in form to finish loading before your awesome content does (which is the reason why the user is at your site to begin with). So you want to eliminate render-blocking javascript. Google recommends:
“You should avoid and minimize the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Scripts that are necessary to render page content can be inlined to avoid extra network requests, however the inlined content needs to be small and must execute quickly to deliver good performance. Scripts that are not critical to initial render should be made asynchronous or deferred until after the first render. Please keep in mind that for this to improve your loading time, you must also optimize CSS delivery.”
Basically what this means is, similar to above, that you only need to load the javascript that directly affects the rendering of the page and defer the rest. For example, if you have javascript in your footer or your analytics is using js there is no need to give those priority. Patrick Sexton has written a great post on how to do this here. Deferring the javascript is better than using asynchronous scripts because it doesn’t compete with the loading of your page. When js is deferred it only loads after the page has finished loading. Nonetheless the async tag can come in handy if you’re trying to load lets say a analytics script after the page is done loading, there’s no need to load your analytics before your content. I use the WordPress plugin Async JS and CSS (I use it only for JS). Another great plugin that does async and minifies is Speed Booster Pack. You have to really test and see the options available with plugins and the settings within those plugins, it’s going to be different for every site.
Usability Rules (Mobile)
According to Smart Insights, 51% of users are on a mobile device since July, 2015 and it’s projected to be at 60% in 2016. Do you remember that old browser we all used? Yeah, it’s called Internet Explorer. The reason why it failed is because it didn’t have a mobile presence. Who’s the number 1 browser? Google Chrome, because of its mobile presence.
Your page load speed may be okay on desktop but mobile might be a different story. Mobile bandwidth is a lot slower especially in other countries where users are limited in their downloads and have to pay for every last byte of data. So you want to make people’s time and money on mobile worthwhile and in the end you will make Google happy.
Another example and one bloggers can relate to is, when you’re up late at night on your computer and say “I really need to go to bed”, and then you actually do. We all know what really happens, going to bed means switching to mobile. We won’t mention the places where people take their mobile devices but, you get the point. So, now do you understand the importance of mobile? Ok so on to mobile optimization.
“…Data from Nielsen on mobile media time shows the consumer preference for mobile apps which account for 89% of media time in mobile…”
Check to see if your site is mobile friendly here. Mobile apps are also preferred over mobile websites. If you want to build your own mobile app or hire someone to do it I highly recommend BuildFire.
Create Your Mobile App Today
Avoid Plugins
Plugins are used to allow the browser to access special kind of content. Some common plugins are Flash, Microsoft Silverlight and Java. Mobile browsers do not support plugins so avoid plugins as per Google’s recommendation. Also, Chrome and Firefox intend to remove support for plugins so they will soon not work. Plus most of what those plugins do can be done with html5.
Configure the Viewport
A viewport controls the size of your site when displayed on a mobile device, without the viewport your site will look the same as if on a desktop. Basically, it’s the window that displays your webpage. This can be done in WordPress with a plugin or by simply adding a little code to the head of our main html document:
This code is known as the meta viewport or viewport meta tag. All it does is automatically scale your content according to the size of the screen being used and if the screen is rotated horizontally. We’ve all been there, upon arriving at a site on our smartphone we have to zoom in just to read the content. No one wants to zoom in they just want to scroll through your content and get the main idea of what you’re saying to make sure their time won’t be wasted reading through the entire thing.
It is good to mention here that many mobile devices have high-resolution screens and refresh rates. In essence a new image is refreshed on the screen up to every second on some devices. This is the reason to prioritize your visual content and optimize your images as mentioned above. The Avada theme gives you the option of uploading a logo image for retina screen resolution, which is basically twice as big as normal resolution. Avada is also mobile responsive.
A great plugin for WordPress that automatically configures your viewport is Jetpack. The only thing about Jetpack is that it may oversimplify your site removing things you may want to keep so test it first. Look into buildfire.com and bootstrap for designing your own mobile apps.
Size Content to Viewport
This is when the content on your page does not fit horizontally on the screen, hence making the user scroll horizontally to see it all. In the bit of code mentioned above instead of putting in a pixel value (i.e. 360px) you would put a relative width value such as width:100%. By doing this you’re not depending on a specific device to display your content correctly, instead you’re making sure your content adjusts according to the screen size it’s being viewed on. For more advanced users see CSS media queries.
Size Tap Targets Appropriately
Ever visit a website on your smartphone and the call-to-action (CTA) button is extremely small and you have to zoom in to press it? Or sometimes you can’t even zoom in and you have to press and hope that it loads. That is why tap targets need to be sized correctly. The “rule of thumb” here (quite literally) is 45-57px for index fingers and 72px for thumbs (Google recommends 48 CSS pixels). Most people use their thumbs on smartphones, especially when scrolling. PageSpeed Insights tool will point out any tap targets that need to be resized. You just have to click on it when it shows up under the mobile tab where it says “fix this”.
This also applies to links and form fields in general. When they might be too close to each other for the user to tap without zooming, getting confused or clicking the wrong thing (especially if it’s an ad). You want to make sure your main navigation and whatever buttons you want the user to be clicking are sized correctly with adequate spacing. Any other not-so-important links/buttons like your privacy policy can be smaller but should not have any other buttons too close to them (within 32 CSS pixels). More on sizing.
Share This Article If You Gained Some Value From It
Use Legible Font Sizes
Legible font sizes fall in the same ballpark as I have been describing above. Your font has to be readable without zooming and preferably without rotating the screen. Before adjusting font you must configure your viewport first (above). The easiest way to fix this is by downloading a premium theme from Theme Forest. They have many responsive themes that look great across all devices
Another option is to use responsive design and control the way your text shows up across multiple devices. Google recommends the following:
Use a base font size of 16 CSS pixels. Adjust the size as needed based on properties of the font being used.
Use sizes relative to the base size to define the typographic scale.
Text needs vertical space between its characters and may need to be adjusted for each font. The general recommendation is to use the browser default line-height of 1.2em.
Restrict the number of fonts used and the typographic scale: too many fonts and font sizes lead to messy and overly complex page layouts.
First thing to note is that it’s best to measure your base font in pixels. You will have to set a base font size in your main css file, Google recommends 16 CSS pixels. This size will control the size of your body font, meaning all of your content on your page. In other words all fonts will be scaled according to the base size.
As mentioned before since we want a responsive design we’ll use percentage as a scaling factor (see bit of code below). Heading’s will be designated by a percentage increase according to the base font size, paragraph font size decreased and so forth. This is known as defining the typographic scale (#2 above) and Google recommends using relative sizes to the base size. That means it sizes the rest of your font relative to that base size (i.e. 1.25x bigger).
Vertical line spacing (line height in css) is also necessary for readability and may vary from font to font. Basically it’s what your spacing is like in Microsoft Word (i.e.) you have double spacing, 2.0 or 1.5, Google recommends browser default of 1.2em. EM is a unit in the field of typography, it is equal to the size of the typeface being used. For example, it you are using 16-point typeface then 1em equals 16 points. So in the case of 1.2em it is 1.2 x 16 (base font size) equals the space between each line. Using a 1.2em factor will increase the readability of your text on smaller screens. For more on legible fonts visit this article. Depending on your theme you can control it from there or directly in the css where you will find this line of code:
Another reliable resource W3C Web Standards states:
Page Load Speed Summary
By the length of this article, you now know that page load speed is not that simple but, just requires some time and effort. Google is obsessed with speed and, will serve up sites that load faster over those that don’t without question. PageSpeed is something that many overlook, get overwhelmed with and just simply give up on. Others try to look for paid services but have not found any reputable companies that do it correctly.
The best solution overall is to get your own virtual private server (VPS) or dedicated server. All that needs to be done after that is software configuration. The recommended software options are nginx and apache. These softwares will allow you to install an automatic PageSpeed optimization tool. The server solution I recommend is GoDaddy (they have the best 24-hr phone support). They also have cloud servers, which are more advanced. Going this route eliminates the need for plugins and, with stellar support you’re pretty much guaranteed to get the best speed possible.
Every website is unique and therefore, will be different when optimizing for speed and performance. For example, e-commerce websites will be image heavy and will require a lot of image optimization. If your emphasis is on images then definitely use base-64 code. Other sites will have a lot of scripts or dynamic and interactive content which will require a focus on javascript or css. Again this goes back to the above the fold content issue which determines the most important thing to be loaded. The holy grail of page load speed is as follows:
On WebPageTest, achieve a Speed Index value of under 1000 (ms).
All of your HTML, CSS and JavaScript fit within the first 14 KB.
Determining above the fold content again will depend on what your priorities are. Here is a checklist to get as close as possible to a 1 second page load speed:
Use one CSS file for the above the fold content and defer the rest of the style sheets (compile these into one if possible).
Inline above the fold CSS into your HTML (keep less than 14kb).
Remove JavaScript from the header and defer.
Load above the fold content first, then the rest.
Critical rendering path (CSS) can be tricky use resources.
Think in visual terms instead of total page load time.
Minimize server round trips (especially for above the fold content).
In conclusion, it is best to get your own hosting (not shared) and install Google’s PageSpeed module to start. Once you’ve done that you’ll have access to much more powerful resources for page load speed. Bottom line is if your hosting sucks, get better hosting. Hope this article provided epic value for you.
*I will be adding some case studies in the future.
Some further resources:
Blazing Fast WP Themes, by Amit Panishap 07/05/2015
How To Speed Up Your WordPress Website, by Marcus Taylor 06/25/2014
How we make RWD sites load fast as heck, Posted by Scott on 07/30/2014
Addy Osmani: Detecting Critical CSS For Above-the-Fold Content With Paul Kinlan
Tim Kadlec: Grunt-Perfbudget Webpagetest on the command-line
Elegant Themes Case Study (includes list of plugins)
Skype: Onelfri
Email: info@onelfri.com
Twitter: @onelfri
“My goal is to find the best way you can achieve your dreams of spending more time doing what you love.”
Need expert coaching? Visit my Contact Page to learn more.
PS: If You’re Struggling With Affiliate Marketing Then Check Out This Step-By- Step Premier Commission Generating System (Unless You’re Already Killing It) – Click Here For Instant Access
The post Page Load Speed, A Primer On This Crucial Ranking Factor appeared first on Onelfri Villar.