It was never really my intention to get a perfect score for rebel-ist.com on HubSpot’s WebSite Grader. Sure, I have an obsession for performance and secretly wanted to get it there, but I didn’t exactly sit down with the intention of doing it. In fact, scoring 100 on website.grader.com is a result of testing, investigating, and implementing suggested solutions from every possible SEO tool I could find out there. So many of these SEO report tools focus on different aspects of a site in determining the “grade” including performance, security, social media, structured data and more. I’ll save all of my findings and thoughts on the other SEO tools out there for another post. As for now, I will focus on how I achieved this score on website.grader.com.
Website Grader gives you all the information needed to identify the areas for improvement, but I found that their links to “learn more” didn’t always provide me with a proper solution. What wound up happening is I would spend hours at a time researching these items and the numerous proposed solutions floating around out there on the web.
PAGE SIZE
Pretty straightforward here; mind your code. At one point I thought it would be a good idea to inline all of my SVGs (scalable vector graphics) to reduce requests, but in fact, I bloated my html with extra code that didn’t need to be there. We’ll tie it in with compression here in a minute, but bottom line is cut out the bloat and call those below the fold.
Beyond page size, there’s some SEO weight behind code to text ratio to keep in mind as well. If your code significantly outweighs your content, it can have a negative impact.
PAGE REQUESTS
Here, its all about keeping things together. Combine your files into as few as possible to avoid any unnecessary trips back to the server. Google likes to see a page render the ‘above the fold’ content as fast as possible, with ‘above the fold’ being the content that is visible when the page first loads (like your nav bar, banner, logo, etc.). If you have a lot of scripts / style sheets in the <head>, then those are all downloaded in full prior to loading the page. You can work around third party scripts with the async tag:
| 1 | <script async src="https://use.fontawesome.com/fa########.js"></script> |
PAGE SPEED
Your page speed will reflect your efforts in the 2 previous items. If your page size is small and your requests are low, then the page will load quickly.
BROWSER CACHING
To enable browser caching for a website hosted in IIS, you’ll need to modify the Web.config file. Note that I have set cacheControlMaxAge="7.00:00:00", this is where you specify in days:hours:minutes the amount of time to allow the browser to cache. Since I am still modifying things throughout the weeks, I only allow static content to be cached for 7 days right now.
| 1234 | <!-- add to <system.webServer> section --><staticContent><clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /></staticContent> |
PAGE REDIRECTS
Likely not an issue. If you’re redirecting from an old domain to a new one, you should be reviewing the new domain name anyway.
COMPRESSION
Compression was a fun one. This will assist in page speed and overall performance because the content is being compressed before its delivered to the browser. We already had compression turned on. However, in the case of rebel-ist.com, I used SVG graphics almost exclusively. One thing I didnt know…IIS doesn’t compress SVG graphics by default. So, we had to modify the applicationHost.config to include the image/svg+xml mimeType.
| 12345678910111213 | <!-- ADD TO --><httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files"><scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" /><!-- ######## --><staticTypes><!-- other mimeTypes --><add mimeType="image/svg+xml" enabled="true" /></staticTypes><dynamicTypes><!-- other mimeTypes --><add mimeType="image/svg+xml" enabled="true" /></dynamicTypes></httpCompression> |
RENDER BLOCKING
There are a lot of opinions and suggested best practices on how to do this. The way I accomplished this was to inline some critical above the fold CSS in the <head> and then place the <link> to CSS at the bottom of the page. When you first visit rebel-ist.com, the text loads as a default font for less than a second before the css is downloaded and overrides the default.
RESPONSIVE
Use percentages for padding, margin, width, and height where possible. Not only does this allow the content to scale fluidly with the screen size, but also enables you to keep your CSS smaller with fewer class adjustments under @media rules.
VIEWPORT
Because high DPI screens are becoming more common, it’s now more important than ever to declare the viewport in the <head> of your document. It wont compensate for display scaling set by the OS, but it will compensate for high DPI displays wanting to render as a standard display. If you want users to be able to pinch-zoom on mobile devices, ditch maximum-scale=1.
| 1 | <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> |
PAGE TITLES
First, make sure every page has a title. Then, make sure your titles are optimized for search engine results. Google typically displays the first 50-60 characters of your title. If the title is longer than that, you wind up with the title cut off by ellipses…
META DESCRIPTION
Similar to Page Titles, the meta description is the block of text that shows under your title in search engine results. For it to be relevant and captivating, you want to write it yourself and keep it under 160 characters. If you don’t have a meta description in your head, google will just pull the first 160 characters of text it encounters.
HEADINGS
H tags provide a hierarchy for search engines as well as readers. However, there is a lot of conflicting info out there about what is the best way to use your H tags. Some places say no more than 5 <h1> tags, others say only 1 <h1> tag. I think it’s debatable, but I ultimately went with 1 <h1> and then multiple <h2>, <h3>, and <h4> tags.
SITEMAP
Another straightforward item. Mainly, use them to submit your site to google and bing via search console and webmaster tools.
SSL CERTIFICATE
In the interest of security, everyone should be using an SSL certificate these days. I read something the other day about a website not using HTTPS that was transmitting credentials in plain-text. Now, the accounts had no real function other than turning on visibility to some general content, but these users are more than likely using the same email addresses and passwords for other sites. So any ill-willed individual wise to that knowledge could theoretically watch the traffic and nab all login credentials. From there, those accounts could be tested to login to social media accounts, financial institutions, etc.
The moral of the story being: get an SSL certificate. You may be unintentionally putting your users at risk.
If you’re already hosting with Rebel IST, we make this easy and affordable with SSL certificates starting at just $14.95.