21
In Chrome, you can open the developer tools, click in the device icon (1), and then select the connection throttling (2).
Edit (2015-11-03)
Since around Chrome 45, it actually got a little bit easier: you don't have to be in device mode anymore.
14
As covered here, GitHub Pages is served with Nginx and automatically gzip's content.
You can confirm gzip compression for your site by checking the HTTP headers with online tools like this one. Enter the URL to a webpage or resource, and type in gzip under "Accept-Encoding" to indicate that the HTTP client (i.e., the online testing tool in this case) ...
12
The base64 image option should be used where you would only have a very small number of images and you want to eliminate the network overhead of fetching a picture from the server. However from what you are indicating in the question I assume this could scale to a large number of images. In this case I would use a single 1px x 1px transparent image from the ...
12
As of 2011, you will see the first drop in page performance after 14.6 KB has been sent. For the speediest page, all of your HTML code from the first byte up to and including the critical CSS should fit within this amount of data.
14.6 KB is the size of an HTTP server's initial TCP congestion window assuming a default TCP IW value of 10 (which was agreed on ...
answered Oct 10 '18 at 18:07
Maximillian Laumeister
8,8592 gold badges12 silver badges35 bronze badges
10
Browsers download data in parallel and try to start rendering the page as soon as possible.
If you do not specify the size, the browser has no idea how large the image is going to be until after the image download is fully complete.
This delay forces the browser to repaint or reflow the layout - delaying the page load time.
The more images with this ...
9
You can slow down specific resources with Deelay.me:
<img src="http://deelay.me/1000?http://mysite.com/image.gif">
Deelay.me is a delay proxy for web resources. You can use it with your images/stylesheets/scripts, to increase their load time.
9
Initial Connection
You will find that the initial connection includes negotiating the SSL, so since the handshake is high, its a good indicator that something is seriously wrong with the way you have setup the SSL.
Google Chrome: Understanding Resource Timing
Time it took to establish a connection, including TCP handshakes/retries and negotiating a ...
8
If your framework/CMS/whatever has the appropriate functions, you can include the scripting conditionally as @Michael suggests, but without the additional library.
Taking your datatables case, for example, WordPress might handle the situation via something like:
// For reference; this isn't functional code.
if (is_page('whatever')) {
<script src="/...
8
You have no control over them because they are hosted by another provider. And honestly speaking you should not worry about them, it's up to Google, Facebook, etc to handle the caching accordingly to their need.
You could potentially proxy the URLs or download the files locally, but I don't encourage you to follow that route. In fact, you may potentially ...
8
Google measures speed from the US. However, for SEO, Google doesn't actively penalize sites unless they are very slow. Unless your pages (without JS, CSS, and images) takes more than 7 seconds from the US, you have nothing to worry about.
Google will notice if your users find your site slow. If your page isn't usable for your visitors in three seconds, ...
answered Dec 9 '19 at 11:05
7
A review of the github Pages Documentation would suggest that this level of configuration is not made available to github Pages users.
You can contact github Pages Support to see if this level of configurability will be made available (or if they can configure for you), however, I suspect that you will find a more expedient solution by hosting your images ...
7
Reading the title of your question, there are two things you can do to speed up the initial connection and SSL/TLS handshake. These work for any connection, not just 3G, so you should use these as best practice anyway.
First, use HTTP/2 to serve the site. This requires Apache 2.4.17 or later.
Second, configure Apache to use OCSP stapling. This requires ...
6
For MacOSX ImageOptim optimizes the images. Internally it uses the same tools used by google page speed.
http://imageoptim.com
6
You can use requirejs to dynamically load the libraries you need only on that pages. Then you only have to load the requirejs (which is about 14k) on all pages, saving about 385kb.
Integration is also very easy: just "wrap" the code you have with the require include stuff:
require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
//the jquery....
6
Based on your reference to the ImageMagick convert method and quality parameter, it appears you're working with JPEG images. If that's the case, the EXIF information for JPEG images does not have a standard compression level tag.
However, ImageMagick appears to be able to obtain this information from the image's quantization tables using the identify ...
6
IFrame's are by nature slower due to the overhead they add while rendering a new page within the browser window. And some browsers are slower at rendering iFrame's than others (i.e., IE).
As the chart here demonstrates, iFrames can cost up to 100x more time to create elements than scripts and styles.
IFrame's will also block a window's onload event until ...
5
USE A CDN (CLOUDFLARE)
By the far, the more efficient way to increase your score is to use a free content delivery network to serve your site. I recommend the free version of CloudFlare because of its simplicity. There are a few reasons for this:
The CDN will automatically minify your HTML, CSS and JavaScript.
Google PageSpeed requires this.
GitHub Pages ...
5
700kb of JavaScript IS a performance issue, because it must be parsed after page load. Because of it, you should take care, that only those scripts, that are needed, are loaded. One big JavaScript may be OK on full AJAX sites, such as GMail, when the navigation is handled internally without leaving the single page. However, even full AJAX sites do dynamic JS ...
5
First of all: you are basically doing a lot of things very good at the moment. This results in good grades in PageSpeed for example. Also keep in mind that the biggest part of the waiting time is spent on the frontend, so it makes sense to optimize this before going deep into server configuration.
These are some ideas:
there are a lot of image requests, ...
5
2017 update
The Lighthouse tool developed by Google can be run as a Chrome extension on logged-in pages, and even against Chrome on a real mobile device (which you should use instead of emulators whenever possible). Lighthouse provides audits for performance, accessibility, progressive web apps, and more.
Here's a screenshot of Lighthouse auditing a Google ...
5
You don't have to do everything listed as an optimization. If using a custom font is important to the design of your website then use it. You have a choice between a slightly slower (initial) page load and a better design versus a slightly faster (initial) page load and a slightly lesser design. If using that font improves your business somehow than it's ...
5
Responsive Design does not normally use any width or height attributes
Google Development Tools is a guide and you shouldn't need to enforce everything you read on their site, in fact some of the stuff is outdated. The majority of responsive websites do not use width or height because they want the images to adapt to the screen size and by using fixed ...
5
Page speed is a ranking factor to some degree, as mentioned by Matt Cutts in this related video (Aug 2013): Is page speed a more important factor for mobile sites?.
However, pages are also ranked on their own merits. So that one page may not (should not) bring down the ranking of the other (fast) pages on your site (if that is what you are implying). But ...
5
Tests
https://gtmetrix.com/
http://www.webpagetest.org/
Speed is important - every second costs money. Every second of delay in page loading time can result in a 7% decrease of online sales.
5
Definitely go with the data URI, unless you need support for IE < 8. (Browser support.)
Embedding lots of tiny images directly in the HTML may look like it will take up more bandwidth than linking to them directly, but the increase will be mitigated by gzip; the only difference in the page's size will come from the difference in length between one data ...
5
This is a good question, but the answer is no - it will not affect your search engine rankings negatively. It will provide a (marginal) benefit due to decreased file size.
To understand why it won't negatively affect you, open your site up, right click anywhere, and select "Inspect element" (this option will be called something slightly different between ...
5
One of the Google guys, Paul Lewis, said achieving 85 or better should be your goal. Of course those things you mention matter. Both to Google and, especially, users!
Page render blocking is blocking your page. Is it a problem? Maybe not for you but Google is suggesting you look into it and make sure. (Thanks!). Saving 1.8MB of bandwidth? Holy cow! Maybe ...
5
With HTTP/1, the answer is yes.
As mentioned by Michael Hampton, combining files (which prefer I call "concatenation") is a typical web site performance optimization. This is due to overhead related to requesting new resources. Every time the browser wants a new resource (a new file), it has to open a new connection to the server.
HTTP/2, however, changes ...
5
http://www.whereisthefold.com/ states:
The fold is a term used by webmasters and website owners to mean the portion of your site which can be shown when first entering the site without scrolling down at all.
Therefore, above the fold means everything that is shown on the first screen page. So if your web browser page window is 1000 pixels wide and 800 ...
answered Apr 26 '17 at 17:33
Mike -- No longer here
13.2k4 gold badges21 silver badges50 bronze badges
5
Always Look for Better Solutions
As a rule-of-thumb, always look to see if there are any better solutions. Themes often become dated or even abanded when the developers move on or focus on a new theme they are making. On top of this, new technologies emerge that might not be compatible with older code, such as newer and faster versions of PHP.
Google ...
Only top voted, non community-wiki answers of a minimum length are eligible
