The 5 most important Tools to Test Your Site performance

Modern websites and applications are mostly performance oriented. How do you judge the performance of your site? Here are 5 tools to test for performance and you may just have a lot of work to do.

PageSpeed
PageSpeed Insights (PSI) reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.

Giftofspeed
Is a set of tools, tests, and techniques to optimize page speed and the overall website performance.

TestMySite
Compare the speed of your website with that of competing sites and discover how to offer a faster and more smooth mobile experience.

WebPagetest
Run a free website speed test from multiple locations around the globe using real browsers (IE and Chrome) and at real consumer connection speeds.

Gtmetrix
GTmetrix
 is a free tool that analyzes your page’s speed performance. Using PageSpeed and YSlow, GTmetrix generates scores for your pages and offers optimization opportunities.

Lighthouse
Is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

The importance of getting good scores in PageSpeed

Does PageSpeed affect Google ranking?
Starting in July 2018, Google will finally use mobile page speed as a ranking in their mobile search results. Google today announced a new ranking algorithm designed for mobile search. … Google recommends you use the new updated PageSpeed report and tools like LightHouse to measure page speed and make improvements.

How can I improve my Google page speed? The speed rules include the following:
1-Avoid Landing Page Redirects.
2-Enable Compression.
3-Improve Server Response Time.
4-Leverage Browser Caching.
5-Minify Resources.
6-Optimize Images.
7-Optimize CSS Delivery.
8-Prioritize Visible Content.

Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

This post doesn't have any comment. Be the first one!

hide comments

We Web

FollowLin.X.
...
window.addEventListener("load", initCursor); function initCursor() { const $img = document.querySelector("#site-header"); const { $width } = $img.getBoundingClientRect(); const $halfImgWidth = $width / 2; $img.addEventListener("mousemove", function (e) { const xPos = e.pageX - $img.offsetLeft; /*IE11 need this*/ //this.classList.remove("cursor-prev"); //this.classList.remove("cursor-next"); this.classList.remove("cursor-prev", "cursor-next"); if (xPos > $halfImgWidth) { this.classList.add("cursor-next"); } else { this.classList.add("cursor-prev"); } }); } // Cursor ICON substitition <-- // Button Ripple Effect // Function to add the ripple effect function addRippleEffect(event) { const button = event.currentTarget; const ripple = document.createElement("span"); const rect = button.getBoundingClientRect(); const size = Math.max(rect.width, rect.height); const x = event.clientX - rect.left - size / 2; const y = event.clientY - rect.top - size / 2; ripple.style.width = ripple.style.height = `${size}px`; ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; ripple.classList.add("ripple"); button.appendChild(ripple); ripple.addEventListener("animationend", function() { ripple.remove(); }); } // Function to attach the ripple effect to buttons with given class names function attachRippleEffectToButtons(classNames) { classNames.forEach(className => { const buttons = document.querySelectorAll(`.${className}`); if (buttons.length === 0) { console.warn(`No elements found for class ${className}`); return; } buttons.forEach(button => { button.addEventListener("click", addRippleEffect); }); }); } // Attach the ripple effect when the document is ready document.addEventListener("DOMContentLoaded", function() { const targetClassNames = ["btn-mat", "another-class"]; attachRippleEffectToButtons(targetClassNames); function createCircleInner() { const circleInner = document.createElement('div'); circleInner.className = 'circle-inner'; const box = document.createElement('div'); box.className = 'box'; circleInner.appendChild(box); const smallCircle = document.createElement('div'); smallCircle.className = 'small-circle'; box.appendChild(smallCircle); for (let i = 1; i <= 10; i++) { const span = document.createElement('span'); span.style.setProperty('--i', i); box.appendChild(span); } document.body.appendChild(circleInner); } createCircleInner(); }); window.onbeforeunload = function leavingPage(){ console.log('leaving'); return null; } -->