After running a performance check on your WordPress site, you will be provided with a list of insights, along with their grades. These grades are scored from 0 to 100%, and also, from A to F. errors and notices. Lets discuss every notice and find out how they can be resolved.
Performance
Don't scale images in the browserScaling images in the browser helps to make them appear nice with any screen size. However this is a common performance mistake. When the images are scaled in the browser, the website uses more CPU and hurts the performance on mobile. Also, this makes the user to download extra Kilobytes, or even Megabytes of information, and this could be avoided.
Instead of scaling images in the browser, you can create multiple versions of the same image and provide the appropriate one.
Do not load specific print stylesheets.If you load a specific CSS stylesheet for printing, speed issues may occur on the page, even though the stylesheet is not used. Instead, you can include the print styles inside other CSS files by using @media query to target type print.
Avoid slowing down the critical rendering pathTo begin rendering a page, browser needs to use the critical rendering path. Each file or script included inside the <head> element will slow down the rendering of the page. To prevent the rendering from slowing down, you need to avoid:
- loading JavaScript synchronously inside the
<head>, - including files from the same domain as your website (this prevents DNS lookups) and inline CSS,
- using server push for fast rendering and a short rendering path.
Inline CSS for faster first renderWe can all agree, inline CSS can be one of the ugliest and messy things to do. However, this has changed nowadays, especially, if you wish to have quick rendering on your website pages. Use inline styling method for critical CSS, when you use HTTP/1 and HTTP/2. To put it differently, you need to prevent the site from making CSS requests, which block rendering. Additionally, you can lazy load and cache the rest of the CSS.
Alternatively, in case you use HTTP/2, HTTP push can be helpful, if your server supports it.
If most of your website users have a slow connection, it would be better to always use inline CSS. Some servers prioritize HTML content over CSS, letting the user download the HTML first. Having inline CSS will help you render the HTML and CSS content altogether.
Avoid using more than one jQuery version per pageIt is highly recommended to avoid using multiple versions of jQuery on the same page.
This is done to prevent users from unnecessarily downloading extra data. Make sure your code is clean and the site uses only one jQuery version.
Avoid Frontend single point of failuresIn case a JavaScript, CSS, or in some cases, font files cannot be fetched, the page can be stopped from loading in the browser. As a result, your website will appear to users as a blank screen.
It is highly recommended to avoid loading 3rd-party components synchronously inside <head> tag of your pages.
Always load third-party JavaScript asynchronouslyTo speed up the overall load time of your pages and improve user experience, use JavaScript snippets that load .js files asynchronously. This will also help to prevent blocking the initial load.
Best Practice
Declare a charset in your document.Make your website read all fonts, characters, punctuations, and symbols by declaring document charset to Unicode Standard (UTF-8). It covers almost all available symbols in all languages of the world.
Declare a doctype in your document.Always declare <!DOCTYPE> at the beginning of your HTML document. It is not an HTML tag. It informs the web browser about the version of HTML the page is structured with.
Serve your content securely.It is highly recommended to use HTTPS over HTTP. This allows you to provide secure content to your users. Furthermore, HTTPS is required, in case you wish to use HTTP/2.
You can get a free SSL/TLC certificate from this link.
Serve your content using HTTP/2.Having your website to tun with HTTP/2 together with HTTPS is the new best practice. If you do use HTTPS, which is highly recommended, you should also use HTTP/2.
Declare the language code for your document.According to the W3C standards, you need to declare the language of the pages on your website. To do this, you need to add lang attribute inside <html> tag, e.g. <html lang="fr">.
Meta descriptionPage title
Search engines recognize your web pages with their titles and meta descriptions. Add a relevant text into <head>using <title> tag, as well as meta description, to improve the SEO of your web pages.
Have a good URL formatA great URL improves the SEO of your web pages, and is good for your users also. Use readable, short URLs, avoid using spaces in the path, as well as too many request parameters. Do not have session IDs in your URLs.
Accessibility
Always use an alt attribute on image tagsAccording to W3C Accessibility Standards, you need to provide alt attribute for all <img> tags without any exception. Missing a single alt attribute is considered as an error.
Use heading tags to structure your pageIncrease the readability of your pages by adding heading tags. This also provides a logical, easy-to-follow structure to your users. Have one <h1> as the main heading of your page, and <h2> through <h6>, to emphasize subsections.
The headings also help screen readers and search engines to read the structure of your document.
Always set labels on inputs in formsMost form elements, such as inputs, textareas and select boxes need to have labels which describe their purpose. Make sure to provide labels to increase the accessibility of your pages.
Structure your content by using landmarksSemantic Elements of HTML5 allow you to indicate various sections of your page. Examples of these tags are <header>, <article>, <footer>, and <nav> tags. Having appropriate landmarks will structure your document nicely and help users navigate easily.
Don't suppress pinch zoomOne of the most important features of mobile browsing is letting users to zoom the content in and out within a page. To have great accessibility on your pages, you need to provide pinch zoom for small screens.
Use headings tags within section tags to better structure your pageIn case you have different <section> tags on your pages, make sure to provide at least one heading tag in them. This provides a good structure for your content.
Use caption and <th> in tablesUse <caption> tag in <table> elements to properly describe its content. You can find out more about captions within this link.
Also, <th> tag is necessary to mark the headings of table columns and rows.