10Web Services

10Web offers three web services, Backup, Image Optimization and Search Engine Optimization, which you can use on your websites. They let you have your website performing at its best, and this will help you grow your community, business or organization.

More services are being developed and will added to this list soon.

Managing Backup Service

Navigate to Backups toolbox to start managing your website backups. This toolbox is divided into three sections:

  • Backups
  • Jobs
  • Logs

Backups section displays the list of created backups on your website. Here you will be able to check the backup files, their physical size and see the date when they have been created.

Jobs presents the list of active backup jobs on your website. These jobs are the configurations for your site backups. Meaning, they control the type of backups, their destinations and more.

To modify the settings of backup jobs, open WordPress administrative dashboard of your website and edit the jobs in Backup plugin section.

Logs section includes the logs from backups done on your website. Each one of them include records from successfully completed or failed backup jobs.

10Web Backup

Image Optimization

Image Optimizer service of 10Web lets you optimize the pictures of your website. This tool helps you speed up your website and allow its visitors have the best experience.

You can configure image optimization settings from WordPress administrative dashboard of your site.

After optimizing a few images, Statistics and other information from the plugin will be displayed under Image Optimizer tab of your website manager on 10Web Dashboard. You can quickly review the data and receive comprehensive information about your website optimization.

Image Optimization

Search Engine Optimization

10Web offers its Search Engine Optimization service which helps you improve the SEO of your website. It assists you in detecting and fixing all SEO errors, provides the list of search queries users made to your website, and more. You can enable the service with just a few clicks using 10Web Dashboard.

Navigate to Websites section of 10Web Dashboard, hover over your WordPress site, then click Manage. Afterwards, click on SEO tab to expand its tools.

Firstly, you need to click Enable SEO Service button to activate the service. This action will install and activate SEO by 10Web plugin on your WordPress site.

SEO service brings notices and errors from the plugin and displays them on Overview screen of 10Web Dashboard. You can access Search Analytics and Search Console pages of the plugin on your WordPress site with a click.

To receive in-depth and precise information about the indexation behavior of your website, make sure Google Authorization Code is added to SEO by 10Web plugin.

You can also check this information from Search Analytics and Search Console tabs of 10Web Dashboard.

Furthermore, you can authorize SEO Moz account and display corresponding statistics on 10Web Dashboard, as well as in SEO by 10Web plugin.

SEO by 10Web

Performance Monitoring

Check the performance, load time, and speed insights of your WordPress site with Performance service of 10Web. Get full information about the behaviour of your website, and find useful tips to improve the performance of it.

To begin using this service, click Manage on your website from 10Web Dashboard, then navigate to Performance tab. Press Activate Performance button to enable the service, and run a performance check on your site for the first time.

Checking the overall performance of your website will take a few moments. After the results are loaded, you will receive the following data:

  • Performance grade (e.g. 90%),
  • Average load time,
  • Page size,
  • Number of requests,
  • Page speed insights,
  • Timeline of the loaded files and requests.

Page speed insights tool of 10Web checks more than just the performance of your WordPress site. It also provides details and tips about best practices and accessibility of your website.

10Web Performance

Fixing Performance Errors

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 browser

Scaling 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 path

To 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 render

We 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 page

It 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 failures

In 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 asynchronously

To 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 description

Page 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 format

A 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 tags

According 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 page

Increase 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 forms

Most 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 landmarks

Semantic 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 zoom

One 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 page

In 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 tables

Use <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.

More 10Web Services Coming Soon

10Web continuously adds new features to products, develops new plugins, themes, add-ons and services. In the near future, 10Web will launch the following WordPress services:

  • Website Security
  • Web Hosting
  • Uptime Monitoring

In case you have questions about 10Web’s upcoming services and products, feel free to drop us a line using this contact form. Our Customer Care Team will respond to you shortly.