Category: SEO


Tips to resolve the new warning “Googlebot cannot access CSS and JS files”


Tips to resolve the new warning “Googlebot cannot access CSS and JS files”

Google Search Console has begun sending out a new warning ‘Googlebot cannot access CSS and JS files’ to webmasters who are blocking CSS and JavaScript on their websites.

This warning message means that your robots.txt file is telling Google not to use some of your CSS and/or Javascript files.

Google needs these files to test your site for mobile friendliness. Without them, your website ranking will go down.

This is not a penalty notification, but a warning that if Google cannot see your whole site, it may end up in poor website rankings.

This new warning is sent via both an email and as an alert in Google Search Console for affected websites. It is all about Google’s new focus on responsive design.

In this blogpost, we will explain you how to fix this warning “Googlebot cannot access CSS and JS files” on your WordPress site.

First of all, let us know why Google needs access to CSS and JS Files?

A web page relies on the availability of my_script.js, which is typically run by web browsers to provide the browsers with the core textual content of the page. If my_script.js is blocked from Google, we won’t be able to get the text content when Googlebot renders the web page.

Google is intensive on providing better search rankings to user friendly websites i.e. sites that are fast, have good user experience, etc. In order to find out the user experience of a website, Google needs access to visit the site’s CSS and JavaScript files.

By default, search bots are not prevented by WordPress from accessing CSS or JS files and this blocking is caused by some site owners who accidentally block them while trying to add further security measures or by using a WordPress security plugin.

This controls Googlebot from indexing CSS and JS files which may influence your website’s SEO performance.

How to Give Google Access to Your CSS and JS Files?

To give access to your .css and .js files, you need to first know which files in your site are being blocked from Google.

You can see how Googlebot sees your website by clicking on Crawl -> Fetch as Google in Google Search Console. Next, click on fetch and render button.

You can find the accurate resources that are blocked by Google by clicking on the “Show resources” link on the right-hand-side of Google’s tester and compare the files there to your robots.txt file to find out what needs unblocking.

You can also find a list of these blocked resources under Google Index -> Blocked Resources.
Clicking on each resource will show you the links to actual resources that cannot be accessed by Googlebot.

Most of the time, these are CSS styles and JS files added by your WordPress plugins or theme.

301 Redirect

Now you will need to edit your site’s robots.txt file by connecting to your site using an FTP client. The robots.txt file will be in your site’s root directory.

Look through the robots.txt file for any of the following lines of code:

  • Disallow: /.js$*
  • Disallow: /.inc$*
  • Disallow: /.css$*
  • Disallow: /.php$*

If you see any of these lines, remove them immediately because these lines only blocks Googlebot from crawling the files which it needs to render your website.

The next step is to run your site through Google’s Fetch and Render tool, which will confirm whether you have fixed the problem or not. If Googlebot is still being blocked, then Google’s Fetch and Render tool will provide you additional instructions on the changes to be made to the robots.txt file.

In addition, you can use the robots.txt testing tool in google Search Console to find out if there are further crawling issues.

How to edit robots.txt file through Yoast SEO Plugin ?

First, Log in to your WordPress admin

Then, Go to SEO -> Tools and Click on File Editor menu

Make the changes to your robots.txt file and save your changes.

If the site root does not contain a physical file, then WordPress generates a virtual robots.txt file. To override the virtual file, please follow these steps to create a physical robots.txt file.

  • Use your favorite text editor and create a text file.
  • Save the empty file with the name robots.txt.
  • Upload the file to your server root.

404 Errors

Now compare your fetch results, and you will see that most blocked resources issue should disappear now.

We hope this blogpost helps you in resolving ‘Googlebot cannot access CSS and JS files’ error on your WordPress site.

Way To Manage 404 Error

SEO Friendly Way To Manage 404 Errors


SEO Friendly Way To Manage 404 Errors

“HTTP 404 Not Found Error” means that the webpage which you try to visit could not be found on the server.

It is a Client-side error, which means that either the page has been removed or moved or that the user has typed in the URL wrongly.

A website that has a lot of 404 pages, have the potential to be rated lower on Google search page result rankings.

Google will make the search page result rankings to go down because of high occurrence of 404 pages.

Since Page rank matters on both the page and domain level, your whole website can suffer from 404 errors when users try to access particular pages from your site. So, it’s important that you redirect important links that return 404 errors.

In this blogpost, we will explain you how to manage 404 errors to assist everyone in maintaining a site which is optimized for all search engines.

Common reasons for 404 error pages

  • When the permalink or the link structure of your website is modified.
  • When the content from your website is removed.
  • If somebody linked your website to a misspelled link or to any other incorrect link.

When a user or search engine bot requests access to a bad page on a server, web servers usually reply with a HTTP status code of 404, to tell the user that the web page doesn’t remain on the server.

How to fix your 404 errors

A great way to increase the PageRank and usability of a website is to fix the 404 errors of that website.

From an SEO point of view, the easiest and most efficient way to fix 404 errors is to use a 301 redirect.

301 is a HTTP response code that intimates to the user’s browser that your content has moved permanently from one URL to another one. Unlike 404 errors, 301 redirects keep PageRank flowing to your site.

301 redirect is implemented in .htaccess file.

301 Redirect

When you come across a link which provides a 404 error, use a 301 redirect, to redirect the users to the most appropriate page on your website. This will direct the web page from the old URL towards the new one.

For example, if you run a B2B services website and notice links that point towards a professional services page that no longer prevails, then use a 301 redirect to make them point towards a page featuring a similar, related service.

Following are some of the tips to manage the 404 errors easily.

Create a well-designed 404 page

A “404 Not Found page” is displayed when the requested URL is not found on the server. In order to avoid this error, you should first create a user friendly 404.

How to create a user-friendly 404 page?

First, the page should describe why the user has landed on a 404 page rather than the page which they intended to reach.

Second, it should include the website’s search box and tell the user to type in any relevant keywords in the hope of returning related posts.

Third, the 404 page should not have any server-related errors.

And finally, a user-friendly 404 page should comprise other important website navigational components such as the sidebar, footer and header should be comprised as well, so that the user can easily navigate to other pages on your website.

404 Error Image

Make sure your 404 error pages really provide a 404 header status

All “404 error” pages does not provide a 404 header status and this status simply translates to search engine bots and other bots, as “page not found.”

For example, Google uses this server header status when removing outdated webpages in your website. Suppose you are deleting 30 URLs, then these 30 URLs will return a 404 header status.

When Googlebot re-crawls these pages and identifies that they are returning 404 not found, it will only be a matter of time before these pages are also removed from the Google index without requiring you to submit URL removals in Google Webmaster tools.

What if you have a lot of 404 errors in your website?

If you’ve restructured your website or switched to a new CMS, then you might have hundred or thousand links which return 404 errors. In this case, redirecting all of them to individual web pages will not be a cost effective solution.

You can resolve this problem by 2 ways.

  • The first is to bulk redirect all pages to your website’s homepage, and the second option is to download your backlinks and prioritize the links.
  • Finally, 404 errors not only kills SEO, but a long list of 404 pages on your website creates a poor user-experience.

We hope this blog post will help you in handling 404 pages on your blog or website, and also assist you in increasing your page ranking.


How to Speed Up Your Website and Improve Conversion


How to Speed Up Your Website and Improve Conversion

  • Loading time is a critical element for running a successful website and should always be a priority for website managers as it affects the user experience considerably.
  • In addition to providing a lag-free and responsive user experience, a fast loading website also has a direct impact on the overall performance of the site.
  • Faster loading websites benefit from better user engagement, higher conversion rates, higher SEO rankings and much more.
  • Improving website speed is critical, but it can be a daunting process that involves many moving parts between onsite optimization to network and accessibility configurations. However, if performance truly matters, you have no choice but to take it on one step at a time.
  • A good place to start would be to run some tests and find out how fast your website really is.
  • Speeding up your website is critical – not just for ranking well with Google, but to keep your bottom-line profits high.
  • Following are few things which you can do to shave seconds off your website speed and enjoy higher profits to boot.

Minimize HTTP Requests

More than 80% of website’s load time is spent downloading the different parts of the page such as images, style sheets, scripts, Flash, etc. A HTTP request is made for each one of these elements, so the more on-page components, the longer it takes for the page to render.

That being the case, the easiest way to improve the website speed is to simplify your design by following the below points,

  • Streamline the number of elements on your page
  • Use CSS instead of images whenever possible
  • Combine multiple style sheets into one
  • Reduce scripts and put them at the bottom of the page


Reduce server response time

What is server response time?

A web browser requests something from your server and your web server responds to that request. The time between those two events is known as the “Server Response Time”. It is counted in milliseconds. Lower the milliseconds of your sever response, higher the page loading speed you will have.

No matter how much your web pages are optimized, if your server response time is slow, then your web pages will display slow.

To reduce the server response time, you can use a web application monitoring solution and check for bottlenecks in performance.


Enable compression

Large pages are bulky and slow to download. The best way to speed up their load time is to zip them up. Compression reduces the bandwidth of your pages, thereby reducing HTTP response. You can use a compression algorithm like Gzip.

Most web servers can compress files in Gzip format before sending them for download, either by calling a third-party module or using built-in routines. According to Yahoo, this can reduce download time by about 70%.

More than 90% of today’s Internet traffic travels through browsers that support Gzip, and it’s a great option for speeding up your site.


Enable Browser Caching

What is browser caching?

The browser cache is a temporary storage location on your computer for files downloaded by your browser to display websites.

Files that are cached locally include any documents that make up a website, such as html files, CSS style sheets, JavaScript scripts, as well as graphic images and other multimedia content.

When you revisit a website, the browser checks which content was updated in the meantime and only downloads updated files or what is not already stored in the cache. This reduces bandwidth usage on both the user and server side and allows the page to load faster.

Hence, the cache is especially useful when you have a slow or limited Internet connection.

Why do you need to clear the cache?

The browser cache can get quite large and take up a lot of space on your hard drive, filled with data from websites you will never visit again. While you can limit how large it can get, it is still useful to occasionally clear it to fix problems and speed up things again.

When you visit a website, the elements on the page you visit are stored on your hard drive in a cache, or temporary storage, so the next time you visit the site, your browser can load the page without having to send another HTTP request to the server.

How to leverage browser caching?

  • To enable browser caching you need to edit your HTTP headers to set expiry dates on certain types of files.
  • Find your .htaccess file in the root of your domain, this file is a hidden file but should show up in FTP clients like FileZilla or CORE.
  • You can edit the .htaccess file with notepad or any form of basic text editor.


Minify Resources

Resources make it easy to build a Web page, but they sometimes create messy code, and that can slow down your website considerably.

Since every unnecessary piece of code adds to the size of your page, it is important that you eliminate extra spaces, line breaks, and indentation in your code so your pages are as lean as possible. It also helps to minify your code.

  • To minify HTML, you can use PageSpeed Insights Chrome Extension to generate an optimized version of your HTML code. Run the analysis against your HTML page and browse to the ‘Minify HTML’ rule. Click on ‘See optimized content’ to get the optimized HTML code.
  • To minify CSS, you can try YUI Compressor and cssmin.js.
  • To minify JavaScript, try the Closure Compiler, JSMin or the YUI Compressor. You can create a build process that uses these tools to minify and rename the development files and save them to a production directory.


Optimize images

With images, you need to focus on three things: size, format and the src attribute.

Image size:

  • Oversized images take too much time to load, so it’s important that you keep your images as small as possible.
  • Use image editing tools to crop your images to the correct size.
  • For instance, if your page is 570px wide, resize the image to that width. Don’t just upload a 2000px-wide image and set the width parameter (width=”570”). This slows your page load time and creates a bad user experience.
  • Reduce color depth to the lowest acceptable level.
  • Remove image comments.

Image format:

  • JPEG formats are the best option.
  • PNG is also good, though older browsers may not fully support it.
  • GIFs should only be used for small or simple graphics (less than 10×10 pixels, or a color palette of 3 or fewer colors) and for animated images.
  • Do not use BMPs or TIFF formats.

Src attribute:

  • Once you’ve got the size and format right, make sure the code is right too. In particular, avoid empty image src attributes.


Reduce the number of plugins you use on your site

Too many plugins slow down your site, create security issues, and often cause crashes and other technical difficulties.
Deactivate and delete any unnecessary plugins. Then weed out any plugins that slow your site speed.
Try selectively disabling plugins, then measuring server performance. This way you can identify any plugins that harm the speed of your website.

Reduce redirects

Redirects create additional HTTP requests and increase load time. So you want to keep them to a minimum.
If you’ve created a responsive website, more than likely, you have redirects in place to take mobile users from your main website to the responsive version.
Use a HTTP redirect to send users with mobile user agents directly to the mobile equivalent URL without any intermediate redirects, and include the markup in your desktop pages to identify the mobile equivalent URL.