fbpx

We take a look at the performance and features of the big four internet browsers to see which one will serve you best in 2017.

The web browser is by far the most important piece of software on your PC—at least for most users. Unless you’re at a workstation crunching numbers or editing the next Star Wars you probably spend the majority of your computer time staring at a web app or a website.

That’s why it’s important to make sure you’ve always got the best tool for the job, and in 2017 that does not include Internet Explorer. If you still want the built-in option for Windows that would be Edge, but it’s hard to stick strictly with Edge when you’ve got other choices including Google’s Chrome, Mozilla Firefox, and Opera.

Let’s take a look at the four major (and modern) browsers to see how they stack up in 2017.

(If none of these internet browsers strike your fancy, head over to PCWorld's roundup of 10 intriguing alternative browsers.)

Browsers in brief

Chrome

chromelogo

The current people’s champion, Google Chrome tops the metrics charts of both StatCounter and NetMarketShare by a huge margin. Google’s browser has built a dedicated fan base thanks to its massive extensions library, and the fact that it just gets out of your way to put the focus on web content, not the browser’s trimmings.

Chrome isn’t quite as simplistic as it once was, but it’s still very easy to use. There isn’t much to Chrome except a huge URL bar—known as the OmniBar—plus a space for extensions, a bookmarking icon, tabs, and that’s it.

Yet Google still finds a way to hide all kinds of features inside the browser, including deep integration with Google’s services. This allows you to sync your bookmarks, passwords, open tabs, and more across devices. Chrome also has multi-account support if you need it on a family machine, a built-in PDF viewer, built-in Google Translate functionality, a task manager, and the always handy Paste and go context menu item.

If there’s one complaint people have about Chrome it’s that the browser eats up available memory. Our browser testing in 2015 showed that Chrome was definitely a memory beast, but two years later it fared pretty well in our tests.

Firefox

 

mozilla firefox logo

 

For users who love extensibility but want greater privacy than a Google-made browser can provide, the open source Mozilla Firefox is your best bet. Firefox paved the way for other browsers to become extensible, and while Firefox’s add-on catalog is pretty good, it now pales in comparison to the Chrome Web Store. Like Google, Firefox has a sync feature.

 

Where Firefox has really shined in recent years is with the browser’s incognito mode. All browsers have a private mode that lets you browse without any of your activity being logged in your saved history. But most of the time these private modes still allow websites to track your activity for that specific session. Firefox does away with this by including an ad and tracker blocker when using incognito mode.

Opera

 

operabrowser

 

Before Chrome, Opera was a popular choice among power users—a position former Opera CEO Jon Stephenson von Tetzchner is trying to take back with Vivaldi. Opera today is really one of the more under-rated browsers around. It’s based on the same core technologies as Chrome (the Blink rendering engine and the JavaScript V8 engine), which means it can run many Chrome extensions—there’s even an extension for installing extensions from the Chrome Web Store.

Opera’s also got a few unusual features like Turbo, which saves on load times and bandwidth by compressing webpages on Opera’s servers. It’s also got a nice security feature called domain highlighting that hides most of the URL so that users can see easily and clearly if they’re on Google.com or google.com.scam.com—with scam.com being the actual website.

More recently, Opera introduced its own take on the social sidebar with one-click access to services such as WhatsApp, Facebook Messenger, and Telegram. Like Chrome and Firefox, Opera also has its own cross-device syncing feature.

Microsoft Edge

 

microsotedge

 

Microsoft Edge is still a work in progress. You'll see below that its performance is getting better, but that’s not all there is to the browser in 2017. The Edge extensions library is tiny, its sync functionality is near nonexistent, and it doesn’t get updates nearly fast enough—though that is expected to change with the Fall Creators Update.

Despite its shortcomings, Edge has several helpful features that will appeal to some. Edge is deeply integrated with Windows 10’s inking capabilities, as well as with OneNote, making it easy to clip a webpage, annotate it, and save it to a notebook. Cortana is also a big part of Edge. You can use Microsoft’s digital assistant to quickly search for information, compare prices, or get a quick calculation.

Like Chrome, Edge has a casting feature. There’s also a nifty set-aside tabs feature to stash a collection of websites, the ability to read ebooks (great for tablets), and an MSN.com-ish new-tab page.

Benchmarks

That’s enough of an overview for our four contestants, let’s get down to business. To see which browser is worthy of your bandwidth in 2017 we used a variety of testing tools. For judging JavaScript we used JetStream, and the now unsupported Octane 2.0 and SunSpider 1.0.2 benchmarking tools. Then we turned to WebXPRT 2015 and Speedometer to challenge our browsers under simulated web app workloads.

Finally, we took a look at CPU and RAM usage. Similar to what we did in 2015, we loaded a set of 20 websites in a single window in quick succession using either a batch file or the command line depending on the quirks of the browser in question. Once all tabs began loading, we waited 45 seconds, and then checked the CPU and RAM usage. The idea was to see the amount of system resources the browser would use during a heavy workload.

One difference from 2015 is that Flash was turned off for each browser—benchmarks were done with and without the plugin in 2015. In recent years, most browser makers have de-emphasized Flash, enabling it as “click-to-play” and blocking nonessential website elements that use Flash. Since the web is moving to a Flash-free existence we decided to live the dream right now.

For these tests our rig was an Acer Aspire E15-575-33BM laptop loaded with Windows 10 Home (Creators Update), a 1TB hard drive, 4GB RAM, and an Intel Core i3-7100U. Each browser was tested over a hard line internet connection.

Edge makes big gains

Looking at both Jetstream and SunSpider, Edge won top marks by a wide margin. SunSpider has been deprecated for some time and is no longer supported, but the result was still surprising. For Octane 2.0, which is also no longer supported, Firefox and Opera vied for top spot, with Chrome the laggard by a wide margin. For this set of benchmark scores higher is better with the exception of SunSpider.

browser performance jetstream2

The JavaScript test Jetstream shows Microsoft Edge hanging tough.

browser performance sunspider

SunSpider also shows Microsoft Edge with a performance edge, loading JavaScript quite a bit more quickly than others.

browser performance octane

 

Chrome makes the poorest showing in the Octane test.

Moving on to the more modern Speedometer test, which quickly iterates through a bunch of HTML 5-based to-do lists, Chrome came out on top. Google’s Blink-based cousin Opera came in second, with Edge and Firefox way behind. The numbers were much closer for WebXPRT 2015, which uses a wide number of web apps, from photo collections to online note-taking to data sets. Edge came out on top there, while the others were closer together with only a few points separating the back three. Again, higher is better for these tests.

browser performance speedometer

Chrome narrowly edges out Opera in HTML-5-based tasks.

browser performance webxprt 2015

Edge makes another good showing in the web apps realm.

Finally, we come to the memory and CPU test. Slamming an average PC with 20 tabs of mostly media rich sites all at once is certainly going to chew up a good chunk of CPU and memory. These browsers did not disappoint in that respect.

Despite its reputation, however, Chrome was tops here, using less than 40 percent CPU power, followed by Edge. The results were similar for memory with Chrome using the least. Take those impressive Edge numbers with a healthy dose of skepticism, however, as during testing the PC froze, and we couldn’t access task manager as swiftly as with the others. The fact that the whole PC slowed to a crawl suggests Edge’s numbers don’t tell the whole story. Based on that experience, power users with multiple tabs open in Edge would feel some serious pain trying to get work done.

browser performance cpu usage2

It's true that running media rich content in multiple tabs will tax your system's CPU.

browser performance memory usage

As with the CPU test, Chrome's reputation as the biggest resource hog is undeserved these days.

As for Firefox, you may notice that the browser chewed up CPU usage, but was relatively low in memory usage. The reason for that, as Mozilla reminded us, is that Firefox alone is transitioning from one browser process to four. Whereas Chrome and Edge use multiple processes for each tab. The idea behind the latter is that individual tabs running on separate processes won't take down the whole browser if they crash. That approach does use more memory, however. Mozilla is trying to find a middle ground. On the one hand, Firefox helps maintain overall PC performance under heavier workloads, but it's not great if you want dozens of sites to load as quickly as possible. 

And the winner is...

So who wins? Here’s the way we see it.

Once again, Edge gets honorable mention for making some serious gains in performance and earning some truly impressive scores. But when you factor in customizability and how Edge fared in the live site stress test, it still has some work to do—like offering a wider extension library and the ability to sync across devices. 

As in our previous showdown, Chrome continues to capitalize on these strengths, and even improves in the performance department by addressing its past resource issues, making it, once again, our first choice.

Opera again earns second place since it performed relatively well in the live stress test, and can be set up to take advantage of nearly all the same conveniences Chrome can.

As for Firefox, it’s also a fine choice. Mozilla’s browser definitely gets the job done, it’s very customizable, and its open source roots puts the browser in a league of its own.

Source: This article was published pcworld.com By Ian

Categorized in Search Engine

If you're conducting an SEO audit, you should probably be using DevTools in Google Chrome. Columnist Aleyda Solis shares 10 ways to use these tools to identify and fix SEO issues.

Although many of us in the industry pay hundreds or even thousands for SEO software that helps to automate and simplify our everyday work, we already have one of the most handy free SEO tool sets in the market with Google Chrome’s DevTools. Built into Google Chrome, this set of web authoring and debugging tools allows us to validate some of the most fundamental and critical SEO aspects of any page.

In most cases, using DevTools is pretty straightforward. But there are a few very handy and not so obvious applications for SEO analysis. Let’s go through them now.

Start by navigating to the page you want to investigate in Google Chrome and opening DevTools. You can do this by selecting More Tools > Developer Tools from the Google Chrome menu in the upper right-hand corner of your browser window.

google-chrome-devtools

Alternatively, you can use the keyboard shortcuts Ctrl+Shift+I (Windows) or Cmd+Opt+I (Mac), or you can right-click on the page element you’d like to investigate and click “Inspect” from the drop-down menu that appears.

 

1. Check your page’s main content elements, including JavaScript-rendered ones

Google is now able to crawl and index JavaScript-based content, but it doesn’t always do so flawlessly. Therefore, it is a must to verify the main content elements of your pages — not only by reviewing their HTML source code, but also by checking their DOM to see how the information will be actually rendered and identified by Google.

You can directly see the DOM of any page with DevTools in the “Elements” panel.

chrome-devtools-elements-tab

Use this to review the content of any of the page’s elements (such as the title, meta description or page text) to verify that the desired relevant information is shown in each case, to make sure it’s accessible to Google.

For example, in the upper left screen shot below, we can see how the displayed main text (in red) is included in a <div>. But this is actually implemented with JavaScript, the code for which can be seen in the upper right screen shot below, which shows the page’s HTML source code.

Javascript Content Rendering

When identifying these differences between the content shown in both, you can then take the appropriate steps to verify it’s being indexed correctly: reviewing the page cached version in Google, verifying if the text is being shown in Google’s results when searching for it, using the “Fetch as Googlebot” in Google Search Console and so on.

2. Look for CSS hidden content

It’s known that Google “discounts” text content that, although included in the page’s HTML source code, is hidden to the user by default with tabs or menu options that need to be “clicked” to view or expand them.

Among the most common ways to hide text is by using CSS with the “display:none”  or “visibility:hidden”

properties, so it’s recommended to check if there’s any important information on your site pages that might be hidden via these means.

You can do this with Chrome’s DevTools “Search” drawer, which you can access by hitting Ctrl + Shift + F (Windows) or Cmd + Opt + F (Mac) when DevTools is open. This search feature will allow you to look not only through the opened page file itself but across all of the used resources, including CSS and JavaScript.

search hidden content styles

Here, you can search for the desired properties, in this case “hidden” or “display:none” to identify if/where they exist within the page code.

Click on a search result to view the full code surrounding the property you’ve searched for. Review the code to see which text is being hidden; if it’s important content, check if it’s being discounted by Google, and take the appropriate actions.

 

3. Verify your images ALT descriptions

Besides checking your pages’ main text content elements, you can also verify your images ALT descriptions in the “Elements” panel. Right-click on any image and select “Inspect,” as shown here:

Verify Images ALT Descriptions

4. Identify no-indexation & canonicalization configuration in pages & resources

You can also use Chrome’s DevTools to inspect your pages’ technical configuration. For example, you can validate the meta robots and canonical tags configuration, which can be done by using the “Search” drawer to look for these specific tags and review how they’re implemented.

devtools-search-canonical

This validation can be done not only for the implementation of these tags in the HTML <head> area, but also in the HTTP headers, by going to the “Network” panel and selecting the desired page or resource to verify their header information, including the existence of a link rel=”canonical” in an image file, for example, as shown below.

devtools-network-headers

5. Look for the HTTP status in the header configuration

When checking the header configuration of the pages and resources using the “Network” panel, you can also verify their HTTP status and see if there are any redirects, which type of redirects they are, and error statuses, as well as the inclusion of other configurations such as the x-robots-tag, hreflang or the “vary: user agent” ones.

HTTP Headers Validation

6. Validate your mobile web optimization by emulating any device

Mobile-friendliness is now essential for SEO, and you can validate page configuration and content in mobile using the DevTools “Device Mode.” This option can be enabled by clicking the device icon in the upper left-hand area of the panel or by pressing Command+Shift+M (Mac) or Ctrl+Shift+M (Windows, Linux) while the DevTools panel is open.

devtools-device-toolbar

Once in Device Mode, you will be shown viewport controls in the upper area of the window. Here, you can select a responsive viewport (freely resizable) or choose a specific device to test your page with. You can also add your own custom device using the “Edit…” option.

Emulate Mobile Devices

7. Assess your page load time & identify speed issues

Analyze any page load time by emulating the network conditions and device used. For this, you can go to the “Network Conditions” tool, which you can access from the Customization menu in the upper right-hand corner of the panel under “More tools.”

devtools-network-conditions

Here you will find the “Caching,” “Network throttling” and “User agent” configurations.

Emulate Network Conditions

Once you’ve chosen your settings, you can reload the desired page and go to the “Network” panel to see not only the page’s full load time (Load) but also when the initial markup of the page has been parsed (DOMContentLoaded), both of which appear at the bottom of the window. You can also view the load times and sizes of each one of the used resources, which can be recorded by clicking on the red button at the left side of the panel.

To get recommendations of actions to take in order to improve the page speed performance, navigate to the “Audits” panel and click the “Run” button. Each recommendation will specify the related resources causing issues, as can be seen below:

Network insights resources & Recommendations

Additionally, you can capture screen shots of your page rendering with the “Filmstrip” option. By clicking on the camera icon and reloading the page, you can view screen shots of your page across various stages of loading, which allows you to verify what your users can see at every stage.

filmstrip screenshot load time

8. Identify render-blocking resources

You can also use the resources load times data in the “Network” panel to identify which JS and CSS resources are loading before the DOM and potentially blocking it, which is one of the most common page speed issues. You can filter by CSS and JS by clicking the buttons for them (as shown below).

Render Blocking Resources

9. Look for non-secure resources during HTTPS migrations

Chrome DevTools can be very helpful during HTTPS migrations, as it allows you to identify security issues in any page with the information provided in the “Security” panel. You can see if the page is secure and has a valid HTTPS certificate, the type of secure connection, and if there are mixed content issues due to non-secure origins of any used resource.

Secure Pages & Resources Validation Chrome DevTools

10. Validate your Accelerated Mobile Pages (AMP) implementation

If you’re implementing AMP, you can see if there are any issues with your pages by adding “#development=1” string to your AMP URL, then checking in the “Console” panel. This will tell you if there are any issues, warnings or errors — and in which element and line of code these have been found so you can take the appropriate action to fix them.

AMP Pages Validation

Bonus: Personalize Chrome DevTools settings

As you can see, you can use Chrome DevTools for SEO in so many ways that you will likely spend some time in it. Thus, you might want to personalize it a bit based on your own preferences. You can adjust the appearance, enable shortcuts and more.

You can do this in the “Preferences” settings, which can be found by clicking on the Customization menu button in the upper right-hand corner of the panel and choosing the “Settings” option.

Chrome DevTools Preferences

Last but not least, speaking of personalization of preferences: Analyzing minified code can make it difficult to parse, so make sure to click on the pretty print “{}” button in the central bottom area of the panel so you’re able to see a non-minified version. This will allow you to go through it easily due with improved readability.

PrettyPrint Chrome DevTools

I hope these Chrome DevTools tips help to make your SEO life easier!

Author: Aleyda Solis
Source: http://searchengineland.com/chromes-devtools-seo-10-ways-use-seo-audits-266433

Categorized in Search Engine

Have a login form on an HTTP URL? You will need to switch it to an HTTPS URL if you want to avoid security warnings in Chrome in January.

This morning, Google began sending out notices through the Google Search Console to websites that have login and password fields on pages that are not over HTTPS. The notification says nonsecure Collection of Passwords will trigger warnings in Chrome 56 for domain.com.

Chrome 56 in January will issue a security warning for web pages that have these login fields without serving them on a page that is over HTTPS. The message reads:

Beginning in January 2017, Chrome (version 56 and later) will mark pages that collect passwords or credit card details as “Not Secure” unless the pages are served over HTTPS.

The following URLs include input fields for passwords or credit card details that will trigger the new Chrome warning. Review these examples to see where these warnings will appear, and so you can take action to help protect users’ data. The list is not exhaustive.

 

Google also posted about this on Google+ and wrote:

From the end of January with Chrome 56, Chrome will mark HTTP sites that collect passwords or credit cards as non-secure. Enabling HTTPS on your whole site is important, but if your site collects passwords, payment info, or any other personal information, it’s critical to use HTTPS. Without HTTPS, bad actors can steal this confidential data. #NoHacked

nohacked2016_post2_g-1

Google has been pushing sites to go HTTPS for some time now, including giving a ranking boost to pages with HTTPS URLs.

Here is a copy of the notification:

google-nonsecure-collection-passwords-chrome-1482846162

Author: Barry Schwartz
Source: http://searchengineland.com/google-search-console-warns-nonsecure-collection-passwords-upcoming-chrome-browser-release-266486

Categorized in Search Engine

airs logo

Association of Internet Research Specialists is the world's leading community for the Internet Research Specialist and provide a Unified Platform that delivers, Education, Training and Certification for Online Research.

Get Exclusive Research Tips in Your Inbox

Receive Great tips via email, enter your email to Subscribe.

Follow Us on Social Media